Cara Memodifikasi Widget Popular Post Menjadi Warna Warni

Pasti sobat sudah mengetahui widget popularpost, Widget Popularpost adalah widget yang menampilkan post terpopuler atau entri populer (artikel terbanyak pengunjung). Popularpost juga bisa dimodifikasi, ada banyak macam modifikasinya diantara modifikasi widget popular post warna-warni. disini saya akan menjelaskan Cara Memodifikasi Widget Popular Post Menjadi Warna Warni.

Sebelum memodifikasi widget popular post, pasang terlebih dahulu widget popular postnya. Buka Tataletak -> Tambahkan widget -> Entri popular/Popularpost -> Simpan.

Cara Memodifikasi Widget Popular Post Menjadi Warna Warni

Caranya adalah masuk ke blogger.com -> Template -> Edit HTML, kemudian cari kode ]]></b:skin>. Pastekan kode dibawah ini diatas kode ]]></b:skin>

/* CSS Popular Post Warna-warni */
.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 .item-title a,.PopularPosts ul li a{font-weight:bold;color:inherit;text-decoration:none;font-size:14px}
.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}

Simpan Template, selesai.

Pengaturan Popular Post Warna-warni:

Edit widget popular post yang di tata letak, Jangan dicentang pada bagian "Show/Tampilan" (thumbnail gambar&cuplikan). Jika ingin mengubah berapa post yang akan ditampilkan ubah angkanya sesuai dengan keinginan sobat (Tampilkan hingga "5" entri).