

Popular post adalah salah satu widget blogger yang bagi saya patut terpasang di website/blog. Hal ini dilakukan untuk mempermudah pengunjung melihat topic apa saja yang sering dikunjungi pada blog tersebut. Dengan demikian blog terlihat seo friendly.
Walaupun artikel ini sudah usang, apa salahnya dibagikan lagi tentu dengan kreasi terbaru dan unik. Style popular post ini makin hidup dengan modifikasi urutan nomor pada pojok kanan setiap linknya. Ditambah script popular post yang saya bagikan ini telah di validasi CSS3 dan HTML5, sehinggal sangat cocok digunakan bagi blog yang menerapkan mobile friendly pada templatenya.
Baca artikel tentang mobile friendly
Bagi yang tertarik ingin memasang popular post warna-wrani versi 2 seperti yang terlihat pada screenshot di atas berikut caranya.
Semoga artikel ini membantu dan membuat blog anda makin menarik.

Walaupun artikel ini sudah usang, apa salahnya dibagikan lagi tentu dengan kreasi terbaru dan unik. Style popular post ini makin hidup dengan modifikasi urutan nomor pada pojok kanan setiap linknya. Ditambah script popular post yang saya bagikan ini telah di validasi CSS3 dan HTML5, sehinggal sangat cocok digunakan bagi blog yang menerapkan mobile friendly pada templatenya.
Baca artikel tentang mobile friendly
Bagi yang tertarik ingin memasang popular post warna-wrani versi 2 seperti yang terlihat pada screenshot di atas berikut caranya.
1. Kopi paste kode CSS dibawah ini
/* Popular Posts Versi 2 */
.PopularPosts ul,.PopularPosts li,.PopularPosts li img,.PopularPosts li a,.PopularPosts li a img{list-style:none;border:none;background:none;outline:none;margin:0;padding:0}.PopularPosts ul{list-style:none;font-family:Oswald,Sans-Serif;font-size:13px;color:#fff;margin:.5em 0}.PopularPosts ul li img{display:block;transition:all 400ms ease-in-out;width:70px;height:70px;float:left;margin:0 15px 0 0;border:4px solid rgba(0,0,0,0.2)}.PopularPosts ul li img:hover{border:4px solid rgba(0,0,0,0.5);transition:all 400ms ease-in-out}.PopularPosts ul li{background-color:#eee;counter-increment:num;position:relative;margin:0 10% 0 0;padding:10px}.PopularPosts ul li:before,.PopularPosts ul li .item-title a{font-weight:300;font-size:13px;color:inherit;text-decoration:none}.PopularPosts ul li:before{content:counter(num);display:block;position:absolute;font-size:40px;font-weight:700;color:rgba(0,0,0,0.2);bottom:11px;right:9px;}.PopularPosts ul li:nth-child(1){background-color:#83a4b9;margin-right:0}.PopularPosts ul li:nth-child(2){background-color:#7fbfbb;margin-right:2%}.PopularPosts ul li:nth-child(3){background-color:#84be9a;margin-right:4%}.PopularPosts ul li:nth-child(4){background-color:#cacd73;margin-right:6%}.PopularPosts ul li:nth-child(5){background-color:#cd9089;margin-right:8%}
2. Buat pengaturan widget popular post seperti ini

Semoga artikel ini membantu dan membuat blog anda makin menarik.
Baca Juga:
Share this
2 komentar
https://www.blogger.com/profile/10543250374328906670
https://www.blogger.com/profile/13162875744493565460
Image
.pre
,code
, atauquote
.Salin Kode!
lalu paste ke kolom komentar.image quote pre code