Cara Membuat Popular Post Warna Warni di Blog

Cara Membuat Popular Post Warna Warni di Blog - Mungkin bagi anda yang menyukai bidang teknologi dan merupakan seorang pencinta gadget, tentunya anda pernah mengunjungi situs Engadget, salah satu portal berita tentang teknologi terkemuka di Dunia. Jika anda memperhatikan semua unsur pada saat anda berkunjung ke Engadget, pasti anda pernah melihat widget plugin most commented yang terpasang di sidebar seperti ini, berbentuk vertikal ke bawah dan berpenampilan warna-warni, namun sayangnya plugin ini hanya tersedia untuk blog berplatform wordpress. Namun jangan khawatir, karena sekarang saya akan memberikan solusinya bagi para blogger yang menggunakan platform blogspot, yaitu dengan menggunakan widget popular post default dari blogger dan menambahkan kode script yang bisa merubah penampilan popular post tersebut, meskipun mungkin akan sedikit berbeda tampilanya dengan yang tertera di situs Engadget.

Sebelumnya saya juga telah membahas artikel yang berkaitan tentang cara membuat artikel terbaru atau recent post yang bergerak slide show secara vertikal ke bawah. Mungkin ini akan sedikit berbeda dengan widget recent post slide yang sudah saya buat sebelumnya, karena widget kali ini adalah popular post atau artikel populer yang berwarna-warni tanpa efek slide, dan warna setiap popular postnya akan berbeda-beda (tidak duplikat) hingga 10 artikel (karena memang batas widget popular post hanya 10 artikel saja). Widget warna-warni ini juga sangat cocok sekali untuk diterapkan pada template-template yang berwarna 'terang' dan ramai seperti misalnya Johny Genit, Template buatan maskolis.

Bisa diliihat pada gambar yang tertera diatas, seperti yang saya kemukakan tadi bahwa widget ini akan bisa menampilkan popular post hingga 10 artikel, dan disebelah judul artikelnya akan ditampilkan nomor urut dari 1 sampai 10 yang menandakan ke-populeran artikel tersebut. Selain itu, warna-warna yang ditampilakan pada widget ini juga bisa di modifikasi dan diubah-ubah sesuai minat dan interesting rekan-rekan blogger. Well, bagi anda yang berminat, silahkan disimak yang berikut ini.

1. Login ke Blogger.

2. Pilih Tata Letak.

3. Pilih Add Gadget.

4. Pilih Entri Populer.

5. Lalu anda setting widget 'Entri Populer' seperti di bawah ini.

• Hilangkan centang pada Thumbnail Gambar dan Cuplikan.
• Pilih berapa entri atau artikel yang ingin ditampilkan (tergantung minat dan kebutuhan anda).

6. Klik 'simpan'.

7. Masih di Tata Letak, pilih Add Gadget.

8. Pilih HTML/JavaScript.

9. Lalu letakkan kode di bawah ini ke dalam box 'konten'.

<style type='text/css'>

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

10. Klik 'simpan', dan selesai 

Bagaimana? mudah bukan membuat widget popular post ber-warna warni seperti pada situs Engadget. Demikian Cara Membuat Popular Post Warna Warni di Blog, semoga bermanfaat dan selamat mencoba.