Cara membuat witget populer post warna-warni

Langsung kita coba cara membuat widget populer dengan warna yang seperti pelangi (rainbow) sehingga menarik perhatian pengunjung untuk melihatnya.

Pastikan kamu sudah memasang widget populer bawaan dari Blogger.

1. Login ke akun Blogger kamu.
2. Dari Dasboard klik blog kamu yang akan dipasang widged populer
3. Setelah itu klik menu Tata Letak atau Layout
4. Kemudian klik Tambah Gadget atau Add a Gadget
5. Pilih Widget Entri Populer atau Populer Post
6. Klik simpan

Langkah selanjutnya adalah menaruh kode yang akan membuat widget populer kamu menjadi pelangi (rainbow).

1. Diasumsikan widget populer kamu telah terpasang di blog yang akan diubah tampilan widget pelangi (caranya seperti diatas).
2. Dari dasboard  blog kamu pilih menu Template
3. Untuk mengantisipasi terjadi kesalahan ataupun kamu tidak cocok dengan tampilan widget populer pelangi (rainbow), save dulu template utama kamu.
4. Untuk menyimpan template utama, saat di pilihan template, pilih cadangkan/pulihkan pada pojok kanan atas.
5. Kemudian unduh template lengkap dan save atau simpan. (file ini untuk mengembalikan setingan awal)
6. Kini melanjutkan merubah menjadi widget populer rainbow. masuk kedalam menu edit HTML
7. Pada area HTML cari kode ]]></b:skin> . Agar pencarian cepat ketemu, gunakan Ctrl + F atau F3 dari keyboard kemudian ketikkan kode diatas yang dicari.
8. Setelah ketemu Copykan kode untuk mengubah widget populer menjadi Rainbow seperti di bawah ini.
9. Copykan kode diatas  kode ]]></b:skin>

/* Rainbow Popular Post by http://hzndi.blogspot.com*/

#PopularPosts1 ul li a:hover{color:#fff;text-decoration:none}
#PopularPosts1 ul li a {-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px;  color: #333333; display: block; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 13px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 18px; margin: 0px 40px 0px 0px; min-height: 30px; orphans: 2; padding: 0px; text-align: -webkit-auto; text-decoration: none !important; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;}
#PopularPosts1 ul li .item-thumbnail{float:left;border:0;margin-right:10px;background:transparent;padding:0;width:51px;height:51px}
#PopularPosts1 ul li:first-child:after,
#PopularPosts1 ul li:first-child + li:after,
#PopularPosts1 ul li:first-child + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li:after{position:absolute;top:10px;right:5px;border-radius:50%;border:2px solid #ccc;background:#353535;-webkit-box-shadow:0px 0px 5px #000;-moz-box-shadow: 0px 0px 5px #000;width:30px;height:30px;line-height:1em;text-align:center;font-size:28px;color:#fff}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li {background:#DF01D7;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after{content:"8"}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li{background:#B041FF;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after{content:"9"}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li +li{background:#F52887;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li:after{content:"10"}
#PopularPosts1 ul li:first-child + li + li + li + li +li{background:#7ee3c7;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li + li:after{content:"6"}
#PopularPosts1 ul li:first-child + li + li + li + li + li +li{background:#f6993d;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after{content:"7"}
#PopularPosts1 ul li:first-child + li + li + li + li{background:#33c9f7;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li:after{content:"5"}
#PopularPosts1 ul li:first-child + li + li + li{background:#c7f25f;width:90%}
#PopularPosts1 ul li:first-child + li + li + li:after{content:"4"}
#PopularPosts1 ul li:first-child + li + li{background:#ffde4c;width:90%}
#PopularPosts1 ul li:first-child + li + li:after{content:"3"}
#PopularPosts1 ul li:first-child + li{background:#ff764c; width:90%}
#PopularPosts1 ul li:first-child + li:after{content:"2"}
#PopularPosts1 ul li:first-child{background:#ff4c54 ;width:90%}
#PopularPosts1 ul li:first-child:after{content:"1"}
#PopularPosts1 ul{margin:0;padding:0px 0;list-style-type:none}
#PopularPosts1 ul li{position:relative;margin:6px 0;border-radius:25px 0px 25px 0px;border:2px solid #f7f7f7;-webkit-box-shadow:3px 3px 3px #000;-moz-box-shadow: 3px 3px 3px #000;padding:10px}

/* Rainbow Popular Post by http://hzndi.blogspot.com*/

Sumber Kode html: http://hzndi.blogspot.com/2012/08/cara-membuat-widget-popular-post-warna.html

     10. simpan dan kamu lihat hasilnya.

selesai dech