Cara Membuat Populer Post Blog Menjadi Unik

Populer Post adalah tempat dimana pengunjung blog dan kita dapat melihat postingan-postingan yang sering dilihat oleh pengunjung lain. Pada kesempatan ini saya akan mencoba melakukan perubahan terhadap widget Populer Post menjadi lebih unik dan berwarna dengan memanfaatkan CSSPseudo Element dan nth-child. Tampilan yang akan dihasilkan kurang lebih akan menjadi seperti gambar di bawah ini.

Langkah-langkah yang harus dilakukan adalah sebagai berikut :

1. Login Blog Anda.

2. Pilih Tata Letak.

3. Tambahkan Gatget dan Pilih Entri Populer.

4. Atur agar hanya menampilkan Judul saja.

5. Klik Simpan.

6. Pergi ke Template, lalu pilih Edit Html.

7. Cari kode ]]></b:skin>.

8. Tulis kode berikut di atas kode ]]></b:skin>.

]]></b:skin></style>

/*Custom 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{background-color:#eee;margin:0 0 0 0!important;padding:.5em 1.5em .5em .5em!important;counter-increment:num;position:relative}
.PopularPosts ul li a{color:#fff!important}
.PopularPosts ul li a:hover{color:#2c3e50!important}
.PopularPosts ul li:before,.PopularPosts ul li .item-title a,.PopularPosts ul li a{font-weight:bold;color:inherit;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;bottom:0;right:0;padding-right:0!important}
/* Pengaturan Warna */
.PopularPosts ul li:nth-child(1){background-color:#f1c40f;}
.PopularPosts ul li:nth-child(2){background-color:#f39c12;}
.PopularPosts ul li:nth-child(3){background-color:#2ecc71;}
.PopularPosts ul li:nth-child(4){background-color:#27ae60;}
.PopularPosts ul li:nth-child(5){background-color:#e67e22;}
.PopularPosts ul li:nth-child(6){background-color:#d35400;}
.PopularPosts ul li:nth-child(7){background-color:#3498db;}
.PopularPosts ul li:nth-child(8){background-color:#2980b9;}
.PopularPosts ul li:nth-child(9){background-color:#ea6153;}
.PopularPosts ul li:nth-child(10){background-color:#c0392b;}
.PopularPosts .item-thumbnail{margin:0 0 0 0}
.PopularPosts .item-snippet{font-size:11px}

9. Klik Simpan.

10. Selamat anda memiliki tampilan Populer Post yang unik dan berwarna.

Terima kasih telah berkunjung dan menyempatkan membaca. Semoga berhasil dan jangan lupa rajin berkunjung.