Lompat ke konten Lompat ke sidebar Lompat ke footer

Widget Atas Posting

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

Membuat Popular Post berbentuk List 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.
Share :

1 komentar untuk "Membuat Popular Post berbentuk List (Daftar) Keren tanpa Gambar di Blog"

  1. Sangat bermanfaat dan sudah saya coba di blog saya kubis.online dan hasilnya sangat keren gan. Terimakasih dan terus berkarya

    BalasHapus