Cara Mendesain Widget Populer Post Warna Warni dengan mudah

Hallo Sahabat Pelangiku ''
Kali ini saya akan berbagi kembali Cara Mendesaint Widget Populer Post Warna Warni di Blog
Caranya Mudah ko Sobat.....

Mungkin Sobat Sering melihat ketika berkunjung diblog Orang lain Tampilan Label Atau Populer Post Mereka Keren keren dan Unik, Nah" tentunya Tidak membosankan untuk dipandang bagi si pengunjung maka itu kali ini saya akan kasih Triknya Khusus Untuk Sahabat Pelangiku....

Klo Sobat menggunakan Template Bawaan dari blog tapi tampilan Post Populernya biasa aja, Sobat bisa menambahkan kode CSS berikut ini dengan mudah....

Sebagai Contohnya Nanti Tampilan Populer Post Pada Blog anda seperti dibawah ini

Gimana Sobat Keren kan? maka itu saya sengaja tampilkan contoh gambarnya agar sobat tau tampilanya ya seperti itu.... nanti yang ada nyesel lagi... klo dah tau kan enak tu... klo demen diambil ya klo emang sebaliknya mendingan gak usah sih.. hehehe

Ok deh Sahabat Pelangiku... Mendingan  kita langsung aja yu Tutorialnya
Adapun Langkah - langkahnya sebagai berikut :

Langkah Pertama
Tentunya anda Login dulu pada blog anda

Langkah Kedua
Klik Template lalu Klik Edit HTML lihat Contoh Gambar dibawah

Langkah Ketiga
Untuk mempercepat Pencarian lakukan Ctrl + F
Setelah itu Ketik .PopularPosts Lalu Enter maka akan tampil seperti gambar dibawah ini

Langkah Keempat
Lalu Blok kode tersebut lihat gamabar dibawah ini bagian kode yang diblok
Agar lebih jelas klik aja gambarnya sobat

Langkah Kelima
Ganti Kode CSS tersebut dengan kode dibawah ini dengan Cara Copy dan Paste

.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
}

Langkah Selanjut
Save dan Lihat Hasilnya..... gimana Sobat Jelaskan ?