Cara Membuat Widget Popular Post Keren

Posted by Voizd.com

February 13, 2023

voizd.com - Cara Membuat Widget Populer Post Keren - Kali ini saya akan membagikan cara membuat popular posrt keren di blog dengan mudah, mungkin dari kalian belum bnyak yang tau, contohnya seperti gambar berikut.

Tapi sebelumnya kita harus tau apa sih yang dimaksud dengan popular post?

Popular post adalah fitur yang ada pada sebuah blog yang menampilkan semua postingan atau entrian yang paling banyak di lihat oleh pengunung blog kita, yang di jadikan dalam suatu daftar widget

Caranya sebagai berikut :

Buka dan masuk ke blogger kita
Lalu pilih ke menu temlate pilih Edit HTML
Kemudian cari kode populare post contohnya seperti .PopularePost atau #PopularPost, silahkan hapus semua kode popular post dan ganti dengan kode populare post dibawah ini.

/*Popular Post*/
.PopularPosts ul,.PopularPosts li,.PopularPosts li a{margin:0;padding:0;list-style:none;border-radius:10px;background:none;outline:none}
.PopularPosts ul{margin:0;list-style:none;color:black;counter-reset:num}.PopularPosts ul li{border-bottom:1px dashed #ddd;background-color:#eee;margin:0 0 0 0!important;padding:.5em 1.0em .8em .0em!important;counter-increment:num;position:relative;}
.item-thumbnail img{float:left;margin:0 10px 0 0}.PopularPosts a{color:#333!important}
.PopularPosts a:hover{color:#222!important}
.PopularPosts ul li:before,.PopularPosts ul li .item-title a,.PopularPosts ul li a{font-weight:bold;color:inherit;text-decoration:none}.PopularPosts ul li:before{content:counter(num)!important;font-weight:bold !important;
display:block;
position:absolute;
bottom:0px;
right:0px;
border-radius:16px;
background-color:#555;
color:#fff !important;
width:28px;
height:28px;
line-height:28px;
text-align:center;
padding-right:0px !important;
border:2px solid #07ACEC;display:block;position:absolute;background-color:#333;color:#fff!important;width:22px;height:22px;line-height:22px;text-align:center;bottom:0;right:0;padding-right:0!important}
.PopularPosts ul li:nth-child(1){background-color:#fff}
.PopularPosts ul li:nth-child(2){background-color:#fff}
.PopularPosts ul li:nth-child(3){background-color:#fff}
.PopularPosts ul li:nth-child(4){background-color:#fff}
.PopularPosts ul li:nth-child(5){background-color:#fff}
.PopularPosts ul li:nth-child(6){background-color:#fff}
.PopularPosts ul li:nth-child(7){background-color:#fff}
.PopularPosts ul li:nth-child(8){background-color:#fff}
.PopularPosts ul li:nth-child(9){background-color:#fff}
.PopularPosts ul li:nth-child(10){background-color:#fff}

Simpan Template dan lihat

Agar popular post terlihat ramping ada yang perlu kita seting lagi, jika kita menggunakan thumnail atau gambar membuat tampilan popular post kurang ramping, caranya seperti berikut :