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. Yaps.. , 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.
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 kita..
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.
Nah jika kita sudah melakukan semuanya dengan benar, maka kita 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
Selamat Mencoba !
Sumber : www.joisetrick.us/2013/06/cara-membuat-popular-post-widget.html
