Membuat Popular Post Warna-warni Versi 2

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

• Mobile Friendly Harus Diterapkan di Website Anda Segera

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: