Cara Membuat Widget Popular Post Keren Warna Warni di Blog

Pada kesempatan kali ini saya akan membahas sedikit mengenai cara modifikasi widget popular post agar terlihat keren dan full color warna-warni seperti pelangi dilengkapi dengan nomor urut 1 sampai 10.

Widget popular post atau yang kita kenal sebagai widget artikel populer termasuk salah satu widget yang paling banyak digunakan oleh blogger.

Widget ini berfungsi untuk menampilkan artikel atau postingan yang paling banyak di cari oleh pengunjung dan paling populer di blog atau website tersebut.

Pernahkah Anda berpikir bahwa widget popular post bisa kita modifikasi sehingga memiliki tampilan yang keren dan penuh dengan warna-warni yang dapat memanjakan mata saat melihatnya?

Jika widget popular post blog Anda sudah di modifikasi atau di edit dengan kode css lainnya, sebaiknya kode tersebut di hapus terlebih dahulu kemudian di ganti dengan kode css yang baru dari sini.

Baca juga: Cara Membuat Efek Gradasi Warna Pada Teks dan Background Blog

Nah langsung saja kali ini saya akan coba membuat tutorial edit widget popular post supaya terlihat keren dan menarik dilengkapi efek warna-warni seperti pelangi, silahkan ikuti langkah-langkahnya di bawah ini.
Cara Membuat Widget Popular Post Keren Warna Warni di Blog

Cara Modifikasi Widget Popular Post Keren Warna-Warni

Pastikan dulu blog Anda sudah memasang widget popular post, jika Anda belum memasang widget popular post silahkan ikuti langkah-langkahnya dari pertama hingga akhir, tapi kalau blog Anda sudah memasang widget popular post langsung saja ke langkah nomor 3 dan ikuti sampai akhir.

1. Masuk ke Blogger.com.
2. Klik Tata Letak > Tambahkan Gadget > Postingan Populer > Simpan.
3. Klik Tema.
4. Cari kode ]]></b:skin> atau </style>.
5. Copy kode CSS di bawah ini, lalu Paste sebelum kode ]]></b:skin> atau </style>.
/* Popular Post */

.PopularPosts ul,
.PopularPosts li,
.PopularPosts li img,
.PopularPosts li a,
.PopularPosts li a img {
 margin: 0 0;
 padding: 0 0;
 list-style: none;
 border: none;
 background: none;
 outline: none;
}

.PopularPosts ul {
 margin: .5em 0;
 list-style: none;
 color: black;
 counter-reset: num;
}

.PopularPosts ul li img {
 display: block;
 margin: 0 .5em 0 0;
 width: 50px;
 height: 50px;
 float: left;
}

.PopularPosts ul li {
 background-color: #eee;
 margin: 0 10% .4em 0 !important;
 padding: .5em 1.5em .5em .5em !important;
 counter-increment: num;
 position: relative;
}

.PopularPosts ul li:before,
.PopularPosts ul li .item-title a,
.PopularPosts ul li a {
 font-weight: normal;
 color: #000 !important;
 text-decoration: none;
}

.PopularPosts ul li:before {
 content: counter(num) !important;
 display: block;
 position: absolute;
 background-color: #333;
 color: #fff !important;
 width: 22px;
 height: 22px;
 line-height: 22px;
 text-align: center;
 top: 0px;
 right: 0px;
 padding-right: 0px !important;
}


/* Set color and level */

.PopularPosts ul li:nth-child(1) {
 background-color: #A51A5D;
 margin-right: 1% !important
}

.PopularPosts ul li:nth-child(2) {
 background-color: #F53477;
 margin-right: 2% !important
}

.PopularPosts ul li:nth-child(3) {
 background-color: #FD7FAA;
 margin-right: 3% !important
}

.PopularPosts ul li:nth-child(4) {
 background-color: #FF9201;
 margin-right: 4% !important
}

.PopularPosts ul li:nth-child(5) {
 background-color: #FDCB01;
 margin-right: 5% !important
}

.PopularPosts ul li:nth-child(6) {
 background-color: #DEDB00;
 margin-right: 6% !important
}

.PopularPosts ul li:nth-child(7) {
 background-color: #89C237;
 margin-right: 7% !important
}

.PopularPosts ul li:nth-child(8) {
 background-color: #44CCF2;
 margin-right: 8% !important
}

.PopularPosts ul li:nth-child(9) {
 background-color: #01ACE2;
 margin-right: 9% !important
}

.PopularPosts ul li:nth-child(10) {
 background-color: #94368E;
 margin-right: 10% !important
}

.PopularPosts .item-thumbnail {
 margin: 0 0 0 0;
}

.PopularPosts .item-snippet {
 font-size: 11px;
}

.widget-content ul li {
 margin: 0;
 padding: 6px 0px;
 border-bottom: 1px solid #ededed
}

.widget-content ul li:last-child {
 border-bottom: medium none !important
}

.widget-content ul li a {
 color: #333
}

.widget-content ul li a:hover {
 color: #C80441
}

.item-date {
 font-size: 11px;
 font-style: italic;
 font-weight: bold;
 color: #FFCC00
}

6. Klik Simpan tema.

Catatan:
Anda bisa mengganti warnanya sesuai dengan keinginan, silahkan gunakan tools online Kode Warna HTML.

Itulah artikel mengenai cara membuat widget popular post keren warna warni di blog, caranya cukup mudah bukan? Anda hanya perlu menambahkan kode css untuk melakukan modifikasi widget popular post. Selamat mencoba, semoga bermanfaat.

Related Posts

Berlangganan update artikel terbaru via email:

1 Response to "Cara Membuat Widget Popular Post Keren Warna Warni di Blog"

  1. Kolom warna-warni gini juga menarik.
    Kesannya khas remaja banget ☺

    ReplyDelete

Jika ada yang masih kurang jelas, silahkan untuk bertanya pada kolom komentar di bawah ini atau dengan menghubungi kami di halaman kontak.

1. Centang kotak Notify me untuk mendapatkan notifikasi komentar.
2. Komentar kami moderasi, dan tidak semuanya dipublish.
3. Semua komentar dengan menambahkan link akan dihapus dan tidak akan dipublikasikan.

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel