CSS widget popular post Blogger

Pada kali ini Saya mencoba modifikasi popular post menjadi keren dan warna - warni dengan memanfaatkan CSS Pseudo Element dan nth-child sehingga tampilannya menjadi lebih menarik.

Silakan masuk pada akun blogger Anda
Kemudian Tambahkan Gadget dan pilih Entri Populer, lalu atur agar popular post hanya menampilkan judul saja.

langkah di atas dilakukan untuk anda yang belum memasang widget ini di blog.

Kemudian tambahkan CSS dibawah ini pada template Anda, simpan diatas kode ]]></b:skin> atau </style> dan Simpan

PopularPosts ul{list-style-type:none; padding:5px} 
.PopularPosts {color:#fff; line-height:1.6; font-size:100%; border-radius:5px 5px 0 0; padding} 
.PopularPosts {line-height:1.6; font-size:100%; border-radius:0; color:#fff} 
.PopularPosts a{color:#fff} 
.PopularPosts a:hover{color:#fff} 
.PopularPosts ul{list-style:none; margin:0; margin-left:-18px; padding:0; counter-reset:popcount} 
.PopularPosts ul li:before{list-style-type:none; margin-right:15px; margin-left:5px; padding:0.3em 0.6em; counter-increment:popcount; content:counter(popcount); font-size:16px; color:#fff; position:relative; float:left; border:1px solid #fff; border-radius:100%} 
.PopularPosts li{text-transform:uppercase; background:none; margin:0; padding:10px 18px; display:block; clear:both; overflow:hidden; list-style:none; font:13.5px/140%; border-bottom:none} 
.PopularPosts li:hover{background:#0FB9BB} 
.PopularPosts li a{text-decoration:none} 
.PopularPosts ul li{padding:3px 20px; border:none} 
.PopularPosts ul li:nth-child(1){background-color:#F48067; margin-right:0} 
.PopularPosts ul li:nth-child(2){background-color:#2ba6e1; margin-right:0} 
.PopularPosts ul li:nth-child(3){background-color:#718397; margin-right:0} 
.PopularPosts ul li:nth-child(4){background-color:#11b7b5; margin-right:0} 
.PopularPosts ul li:nth-child(5){background-color:#d9ba71; margin-right:0} 
.PopularPosts ul li:nth-child(6){background-color:#F48067; margin-right:0} 
.PopularPosts ul li:nth-child(7){background-color:#2ba6e1; margin-right:0} 
.PopularPosts ul li:nth-child(8){background-color:#718397; margin-right:0} 
.PopularPosts ul li:nth-child(9){background-color:#11b7b5; margin-right:0} 
.PopularPosts ul li:nth-child(10){background-color:#d9ba71; margin-right:0}

ingat, judul widget tidak akan tampil seperti di gambar. untuk seperti itu silahkan edit sendiri ya.

Semoga berguna dan bermanfaat...

Share This