Dapatkan Update Informasi Dari Ngopimedia.com Follow Google News

Cara Membuat Widget Popular Post Keren

Cara Membuat Widget Popular Post Keren


www.ngopimedia.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 :

Cara Membuat Popular Post agar lebih ramping

  • Masuk ke menu Tata letak
  • Pada widget popular post klik Menu Edit
  • Hilangkan ceklist pada thumnail gambar dan cuplikan

  • Lalu Simpan
Oke kita widget popular post kita sudah jadi, kurang dan lebihnya saya mohon maaf selamat mencoba semoga berhasil dan semoga bermanfaat, terima kasih.

Post a Comment