Cara Membuat Popular Post Keren Dengan Nomor

Cara Membuat Popular Post keren dengan nomor,- Dulu di akhir tahun 2015 saya pernah membagikan tutorial membuat popular post cantik warna-warni di blog, nah kali ini saya kembali akan membagikan tutorial membuat popular post keren di blog dengan desain yang saya buat sendiri, untuk demonya bisa langsung lihat di template ini. postingan ini saya bikin karena ada request dari salah satu pengunjung yang menginginkan gaya popular post dari template ini, karena sudah membuat janji makanya saya akan secepatnya membuat tutorialnya dan maaf sekali baru bisa sekarang buatnya.

Sebelumya apa yang dimaksud dengan popular post? popular post sendiri adalah salah satu fitur yang ada pada sebuah blog yang menampilkan semua entri atau postingan yang paling banyak dilihat oleh pengunjung yang dijadikan dalam satu daftar widget. Jika anda pemilik blog berplatform blogger pastinya anda sangat mengetahui salah satu fitur popular post ini, karena saat baru pertama kali membuat blog widget yang pasti ada pertama kali adalah popular post. widget ini cukup bermanfaat karena tidak hanya menambah page view blog juga akan membuat artikel yang unggul tetap bertahan di search google. (ini sih pendapat saya).

Nah buat anda yang tertarik dengan popular post seperti di blog ini silahkan ikuti tutorial yang akan saya berikan, yang dimana popular post ini sudah saya kasih nomor yang akan membuat tampilan populat post semakin keren karena bisa dengan mudah melihat peringkat artikel paling popular tanpa menghitung peringkat. terlebih lagi popular post ini saya jamin responsive dan tanpa memberatkan loading blog. Ok langsung saja berikut tutorialnya.

Cara membuat popular post seperti blog ini

1. Pertama silahkan masuk ke blogger.
2. Semudian masuk ke menu template dan klik Edit HTML.
3. Setelah itu silahkan cari kode popular post, biasanya kode popular post seperti #PopularPosts atau .PopularPosts, jika sudah ketemu silahkan hapus semua kode popular post tersebut dan ganti dengan kode popular 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}

4. Terakhir tinggal simpan template dan lihat hasilnya.

Nah biasanya jika anda menggunakan thumnail atau gambar akan membuat tampilan popular post kurang enak dilihat, oleh karena itu silahkan nonaktifkan tampilan gambar dan deksripsi popular post. untuk caranya bisa dilihat dibawah ini.

Cara membuat popular post responsive

1. Untuk caranya silahkan masuk ke menu tata letak.
2. Kemudian klik "Edit" pada widget popular post.
3. Setelah itu pada bagian tampilan silahkan hilangkan centang pada thumbnail gambar dan cuplikan.

4. Terakhir tinggal simpan.

Dengan begitu tamilan popular post blog anda hanya akan terdapat judul dan nomor saja, silahkan bereksperimen sendiri jika tampilan popular post tersebut kurang memuaskan bagi anda. sekian tutorial blog yang dapat saya share dan terima kasih.