Cara Membuat Widget Popular Post Warna Warni

بِسْمِ اللهِ الرَّحْمنِ الرَّحِيمِ

Cara Membuat Popular Post Widget Seperti Warna Pelangi – Sebelum saya berbicara lebih lanjut mengenai postingan kali ini mungkin sudah banyak sekali para blogger yang menuliskan tentang postingan semacam ini, tapi ada baiknya juga apabila saya sendiri ikut serta membagikannya untuk para blogger yang belum tahu dan ingin mempercantik tampilan blognya. Key sobat blogger,sekarang kita menuju ke topik pembahasan yakni tentang cara Membuat Popular Post Widget Seperti Warna Pelangi. Widget warna-warni dengan tampilan seperti ketupat ini ada yang sering menyebutnya dengan Rainbow Popular Post lantaran warna backgroundnya yang seperti pelangi. Benar kan..? seperti yang terlihat pada gambar dibawah.

Popular Post

Dan sebenarnya ini merupakan widget popular post bawaan Blogger, cuma saja dengan memakai trik penambahan kode CSS tertentu pada template blog sehingga tampilan widget bisa jadi lebih bagus dan keren sekaligus mempercantik tampilan blog sobat.

Key sobat, silahkan simak cara pembuatan widget popular post dengan warna-warni pelangi dibawah ini.

1. Login ke dashboard blogger sobat.

2. Pilih menu Template > Edit HTML.

3. Carilah kode ]]></b:skin> pada template. Tapi jika sobat susah mencarinya silahkan tekan Ctrl + F.

4. Kemudian Copy script dibawah ini dan paste tepat diatas kode ]]></b:skin> tadi.

/* Rainbow Popular Post Style Start */
#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: 12px; 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 +li +li{background:#d1ffff;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 + li + li +li{background:#c7f25f;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 {background:#f59095;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{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 +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{background:#ff00ff;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li:after{content:"5"}
#PopularPosts1 ul li:first-child + li + li + li{background:#5faff2;width:90%}
#PopularPosts1 ul li:first-child + li + li + li:after{content:"4"}
#PopularPosts1 ul li:first-child + li + li{background:#a9ed04;width:90%}
#PopularPosts1 ul li:first-child + li + li:after{content:"3"}
#PopularPosts1 ul li:first-child + li{background:#ffde4c; 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:3px 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 Style End */

5. Simpan template anda.

6. Lanjutkan untuk mensetting pada gadget Popular Post sobat harus mengaturnya seperti gambar dibawah ini. Hilangkan semua tanda centang / checklist pada tulisan Tampilkan.

Popular Post

Nah jika sobat sudah melakukan semuanya dengan benar, maka sobat sudah memiliki widget artikel populer atau popular post yang cukup keren dengan tampilan warna-warni seperti pelangi.

Key,,, demikian seklas tentang Cara Membuat Popular Post Widget Seperti Warna Pelangi ini saya share, mudah-mudahan bisa bermanfaat. Terima Kasih.D