Cara Membuat Widget Popular Post Keren

Cara Membuat Widget Popular Post Keren

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 :

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
Demikianlah tutorial kali ini semoga dapat bermanfaat.
Blog Tutorial
Voizd.com
Voizd.com
Voizd.com Merupakan situs yang membahas Tentang Teknologi, Komputer dan permasalah seputar Komputer
Post a Comment
Top comments
Newest first
Table of Contents
Link copied successfully.