Membuat Popular Post berbentuk List (Daftar) Keren tanpa Gambar di Blog

Popular post adalah salah satu widget blog wajib buat saya termasuk buat nubie yang mau daftar adsense. Popular post menampilkan daftar artikel yang sering dikunjungi pembaca.

Admin mau berbagi cara buat popular post berbentuk daftar. Popular post ini tidak menampilkan jumlah postingan. Tapi kalau kamu mau menampilkan, silahkan saja.

Design popular post ini tanpa gambar dan counter. Jadi jangan khawatir akan membebani loading blog. Ringan banget.

Kita langsung cek cara membuat popular post berbentuk daftar tanpa gambar thumbnail.

1. Kode CSS ini taruh di atas /style.

Kode CSS POPULAR POSTS

/* Popular Post */
#PopularPosts1 ul{list-style-type:none;margin:0;padding:0}
#PopularPosts1 img{float:left;margin-right:10px;width:72px;height:75px;display:block;transition:all .3s ease-in-out}
#PopularPosts1 ul li{padding:8px 0 11px!important;margin:0;list-style:none;font-size:11px;line-height:normal}
#PopularPosts1 ul li:first-child{border-top:none}
#PopularPosts1 ul li:last-child{border-bottom:none}
#PopularPosts1 a:link, #PopularPosts1 a:visited, #PopularPosts1 a:active {font-size:13.5px;color:#444;display:block;font-weight:500;padding:0 5px 0 0;margin:0;line-height:1.4em;overflow:hidden;}
.popular-posts ul{padding-left:0;counter-reset:trackit}
.popular-posts ul li{border-bottom:none;list-style:none outside none!important;margin-left:0!important;overflow:hidden;padding:10px 0!important;transition:all .25s linear 0;counter-increment:trackit}
.PopularPosts ul li:before{content:counters(trackit,".");padding:0 .1em 0 10px;font-size:18px;font-weight:500;color:#ff4c2e;float:left;margin-right:10px}
.PopularPosts li:nth-child(odd){background:#f5f5f5}
.PopularPosts .item-thumbnail,.PopularPosts .item-snippet{display:none!important}
#PopularPosts1 li{padding-right:1em!important;padding-left:1em!important}

2. Simpan template.

Kalau di template kamu udah ada CSS untuk widget popular post maka sebainya dihapus supaya widget popular post ini bisa tampil semestinya.

Demikian cara membuat popular post tanpa gambar. Semoga bermanfaat.