Membuat Widget Popular Posts Berbentuk Daftar (List) Dengan Gambar dan Nomor Urut Postingan di Sidebar Blog

Membuat Popular Post Berbentuk Daftar (List) Dengan Gambar dan Nomor Urut Postingan di Blog Non AMP dan AMP - Widget popular posts biasanya ditampilkan di sidebar blog. Banyak variasi cara pemilik blog menampilkan widget popular postsnya. Ada yang pakai gambar ada juga yang tidak, ada yang pakai nomor urut ada juga yang tidak, dan design-design lainnya. Setiap orang memiliki rasa yang berbeda-beda dalam mengemas tampilan blognya supaya menarik pembaca bisa terus berada di halaman situsnya.

Sebelumnya admin sudah posting widget popular posts tanpa gambar. Bagi yang belum baca, linknya ada di bawah ya. Nah, widget popular posts berikut ini sangat menarik. Ini karena widget ini menampilkan thumbnail dan nomor urut postingan dalam tampilan yang cantik. Hasilnya bisa kamu lihat pada gambar ilustrasi di atas.

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

Jika kamu tertarik membuat Membuat Popular Post Berbentuk Daftar Dengan gambar dan nomor postingan di Blog, bisa ikuti tahapan berikut ini.

1. Salin kode CSS berikut di atas /style.

Tag H2 tanpa ID

/* Popular Post */
.PopularPosts ul{list-style:none;margin:0 auto;padding:0;}
.PopularPosts li,.PopularPosts li img,.PopularPosts li a,.PopularPosts li a img {margin:0 auto!important;padding:0;list-style:none;border:none;background:none;outline:none;}
.PopularPosts ul li {margin:0 0 10px!important;padding:0;position:relative;line-height:1.4em!important;list-style:none;text-align:left!important;font-size:15px !important;display:block;overflow:hidden}
.PopularPosts ul li a:hover {color:#f80538!important}
.PopularPosts li a{color:#000 !important;font-weight:500 !important;list-style:none}
.PopularPosts .item-thumbnail {display: flex;align-items: center;justify-content: center;width:72px;height:72px;margin:0 20px 0 0;overflow:hidden;float:left;border-radius:4px;}
.PopularPosts ul li img {width:auto;height:72px;transition:all .3s ease-in-out;border-radius:4px;overflow:hidden;display:block}
.PopularPosts .item-snippet{display:none}
.PopularPosts .item-title {padding:0 0 5px}
.PopularPosts .widget-content ul li:before{color: #fff;counter-increment: count;content: counter(count);position: absolute;left:57px;text-align: center;top:31px;z-index: 51;transition: all .4s;height:25px;min-width:25px;font-size: 14px;line-height:25px;background:#f80538;font-weight:600;border-radius:99em;border:2px solid #fff;text-align: center;padding:0;overflow:hidden;}
.PopularPosts ul{counter-reset:count;}

2. Simpan template.

Sebelum mengaplikasikan kode CSS Popular Posts di atas sebaiknya kamu menghapus kode sebelumnya atau kode awal popular posts yang ada di template kamu supaya tidak bentrok. Jika kamu menggunakan beberapa tag kondisional pada template, kamu bisa meletakkan kode widget di atas di dalam tag kondisional berikut.

<b:if cond='data:blog.pageType == &quot;item&quot;'>

Letakkan kode widgetnya di atas /style tentunya.

Nah, sekarang kamu bisa pergi melihat hasilnya. Semoga berhasil.

Demikian cara membuat Popular Post Berbentuk Daftar Dengan gambar dan nomor postingan di Blog. Semoga bermanfaat.