Cara Memasang Widget Popular Post Berwarna Di Blog

screenshot widget warna-warni

Flamboyan68 - Hallo! bagaimana kabarnya, sob? pastinya sehat-sehat saja ya. Malam menjelang subuh ini saya akan men_share postingan buat agan-agan newbie / pemula kayak ane hehe tentang " Cara Memasang Widget Popular Post Berwarna Di Blog ". Blogger pemula seperti halnya saya, suka sekali dengan memasang widget-widget cerah seperti halnya postingan ini.

Widget popular post / artikel populer warna-warni ini tidak di lengkapi dengan efek slide, tampilan warna setiap popular postnya  berbeda-beda (tidak ada warna ganda) sampai 10 artikel dikarenakan terbatasnya widget popular post. Pemasangan widget warna-warni ini sangat cocok alias matching apabila diterapkan pada blog yang bertemplate cerah.

Biar agan-agan tidak penasaran dengan gambarnya, agan-agan bisa melihat pada screenshot diatas. Agan semua pasti tanya-tanya dalam hati hehehe..sebenarnya nomor yang nempel itu apa yah maksudnya? seperti yang saya terangkan diatas tadi bahwa widget ini hanya bisa menampilkan popular post sampai 10 artikel dan disebelah judul artikelnya akan ditampilkan nomor urut dari 1 sampai 10 yang maksudnya adalah menandakan ke-populeran artikel blog agan. Dan satu hal lagi tampilan warna-warna pada widget ini bisa di ubah / dimodif lagi sesuai selera agan. Basa basinya udah dulu ya, sob? kita langsung sedot saja ke cara pemasangannya.

• Masuk / Login ke  >> Blogger sobat.

• Pilihlah  >> Tata Letak.

• Pilihl  >> Add Gadget.

• Pilih >> Entri Populer.

• Selanjutnya lakukan Setting pada widget Entri Populer 

          - Hilangkan >> Thumbnail Gambar dan Cuplikan.

          - Silahkan pilih Entri / Artikel yang ingin ditampilkan (diposkan)

• Klik Save / Simpan 
• Masih dalam posisi di Tata Letak, Kemudian pilih Add Gadget 
• Klik pilih HTML / Javascript.
• Letakan kode di bawah ini kedalam kotak "HTML / Javascript 

<style type='text/css'>

/*----- popular post warna warni by farhanshare.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}

</style>

• Setelah selesai mem_pastekan kode tadi selanjutnya klik ' Save / simpan '. 
• Masuk ke blog agan dan bukalah salah satu artikel dan lihat hasilnya
• Selesai

Bagaimana, gan? pastinya ringan alias mudah, selamat mencoba senantiasa bermanfaat dan sampai jumpa.