Cara membuat popular post warna warni keren dan ringan di blog

 Cara membuat popular post warna warni keren dan ringan di blog - Oke Popular post/artikel populer adalah artikel yang banyak dilihat oleh pengunjung . Pada hari ini saya akan memberikan artikel yaitu post berwarna warni keren dengan memanfaatkan CSS Pseudo Element dan nth-child sehingga popular post anda berwarna warni keren dan enak di lihat oleh pengunjung blog kita. Untuk Tampilan nya seperti ini

 

Berikut ini dia cara dan langkah - langkahnya :

1. Pergi ke Blogger.com
2. Kemudian  Pergi ke Tata Letak dan Tambahkan Widget dan Pilih Entri Populer, lalu atur agar popular post hanya menampilkan judulnya saja
3. 

        4.   Kemudian Pergi ke Template dan klik Edit HTML dan tambahkan CSS dibawah ini Pada Template anda, Simpan diatas kode ]]></b:skin> atau </style> dan Simpan 

/*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}

Catatan : warna bisa di ubah dengan selera anda
Dan Selamat Popular post berwarna warni anda sudah tertempel di blog anda semoga bermanffata untuk artikel nya yah dadah :v wassalam :)