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.
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 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>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.
Article
0 komentar