Cara Membuat Widget Popular Post Keren Responsive

PANDUANAJIB.COM - Halo semua, bagaimana kabar hari ini? Semoga tetap dalam keadaan yang baik dan sehat selalu ya, amin. Hari ini saya akan bagikan sebuah tutorial tentang bagaimana cara membuat widget popular post keren dan responsive terbaru di tahun 2020 ini.

Membuat sebuah widget popular post pada suatu blog atau website ini di yakini dapat menambah kualitas SEO pada blog itu sendiri. Selain itu membuat widget popular post keren pada blogger juga menambahkan kesan yang menarik untuk tampilan blog itu sendiri.

Jika Anda mencari artikel tentang membuat widget popular post blogger tentu Anda akan mendapati banyak sekali blogger-blogger yang telah membahasnya.

Namun di kesempatan ini saya bagikan widget dengan tampilan yang keren, menarik, simple serta responsive sehingga tidak akan membuat loading blog Anda terasa berat saat di akses.

Oh iya tampilannya juga akan sedikit mirip dengan unit iklan teks pada Adsense. Yang pastinya ini tidak akan mengecewakan deh. Langsung saja di coba kalau memang penasaran ya.

Cara Membuat Widget Popular Post Keren Responsive

Sebelum melanjutkan artikel ini, pastikan widget popular post  pada blog Anda sudah aktiv. Jika belum silahkan aktivkan terlebih dahulu.

1. Silahkan masuk ke akun blogger Anda

2. Masuk ke menu TEMA > Edit HTML

3. Kemudian cari kode ini pada template Anda ]]></b:skin>, dan letakan kode dibawah ini tepat DIATAS kode tersebut

/* Popular Post */
.PopularPosts ul li:hover{background:#3333330f}
.popular-posts ul li a{color:teal}
.popular-posts ul li a:hover{color:#555}
.PopularPosts h2{text-indent:20px;margin-bottom:-6px;border-top-left-radius:8px;border-top-right-radius:8px;border-bottom:none;width:100%;padding-bottom:15px;padding-top:15px;font:400 14px Poppins,-apple-system,BlinkMacSystemFont,'Segoe UI',Oxygen-Sans,'Helvetica Neue',Arial,sans-serif;color:#fff;text-align:left;background:#0c54c1;background-image:linear-gradient(110deg,transparent 75%,rgba(255,255,255,0.1) 75%,rgba(255,255,255,0.1) 81.5%,rgba(255,255,255,0.2) 0%,rgba(255,255,255,0.2))}
.PopularPosts h2 span{margin-left:20px}.PopularPosts .widget-content ul,.PopularPosts .widget-content ul li{margin:0;padding:0;list-style:none;border:none;outline:none}
.PopularPosts .widget-content ul{margin:0;list-style:none;counter-reset:num}
.PopularPosts .widget-content ul li img{display:block;width:70px;height:70px;float:left}
.PopularPosts .widget-content ul li{margin:0;counter-increment:num;position:relative;background:#0c54c1;margin:0 0 10px;padding:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border-radius:5px}
.PopularPosts ul li:last-child{margin-bottom:0}
.PopularPosts ul li .item-thumbnail-only::after,.PopularPosts ul li .item-content::after,.PopularPosts ul li > a::after{background:#efefef}
.PopularPosts .item-title{line-height:1.6;margin-right:8px;min-height:40px}
.PopularPosts .item-thumbnail{float:left;margin-right:8px}
.PopularPosts .item-snippet{line-height:1.6em;margin-top:8px;opacity:.925}
.PopularPosts ul li > a{font-weight:700;font-size:14px}
.PopularPosts .item-title,.PopularPosts .item-thumbnail,.PopularPosts .item-snippet{margin-left:15px;margin-bottom:9px;margin-top:5px}
.PopularPosts .widget-content ul li a{color:#fff;white-space:nowrap;overflow:hidden;font-size:91%}
.PopularPosts .widget-content ul li a:hover{text-decoration:underline}
.PopularPosts .widget-content ul li:hover{background:#0c54c1;opacity:1;transform:scale(1.02);transition:all .3s ease}
.PopularPosts:hover li{opacity:.7;transform:scale(0.98);transition:all .3s ease}
.PopularPosts .widget-content ul li a{color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:91%}
.popular-posts {padding: 13px;background: #0c54c15e;border-bottom-right-radius: 8px;border-bottom-left-radius: 8px;}

Untuk mengilangkan Nomor pada widget popular post silahkan hapus kode dibawah ini.

<b:includable id='numberedpopularposts'>
<style> /* HAPUS DARI SINI */
DISINI ISI CSS NOMORNYA
</style> /* SAMPAI SINI */
</b:icludable>

4. Jika sudah SIMPAN Template
5. Selesai

Untuk demonya silahkan lihat gambar di atas ya.