Tutorial Menciptakan Popular Post Keren Dengan Nomor

Cara Membuat Popular Post bagus dengan nomor,- Dulu di final tahun 2015 aku pernah membagikan tutorial menciptakan popular post anggun warna-warni di blog, nah kali ini aku kembali akan membagikan tutorial menciptakan popular post bagus di blog dengan desain yg aku buat sendiri, untuk demonya sanggup pribadi lihat di template ini. postingan ini aku bikin alasannya ada request dari salah satu pengunjung yg menginginkan gaya popular post dari template ini, alasannya sudah menciptakan kesepakatan makanya aku akan secepatnya menciptakan tutorialnya serta maaf sekali gres sanggup kini buatnya.

Sebelumya apa yg dimaksud dengan popular post? popular post sendiri ialah salah satu fitur yg ada pada sebuah blog yg menampilkan semua entri atau postingan yg paling banyak dilihat oleh pengunjung yg disokan dalam satu daftar widget. Jika anda pemilik blog berplatform blogger pastinya anda sangat mengetahui salah satu fitur popular post ini, alasannya ketika gres pertama kali menciptakan blog widget yg niscaya ada pertama kali ialah popular post. widget ini cukup bermanfaat alasannya tidak hanya menambah page view blog pun akan menciptakan artikel yg unggul tetap bertahan di search google. (ini sih pendapat saya).


Nah buat anda yg tertarik dengan popular post menyerupai di blog ini silahkan ikuti tutorial yg akan aku berikan, yg dimana popular post ini sudah aku kasih nomor yg akan menciptakan tampilan populat post semakin bagus alasannya sanggup dengan gampang melihat peringkat artikel paling popular tanpa menghitung peringkat. terlebih lagi popular post ini aku jamin responsive serta tanpa memberatkan loading blog. Ok pribadi saja berikut tutorialnya.

Cara menciptakan popular post menyerupai blog ini

1. Pertama silahkan masuk ke blogger.
2. Semudian masuk ke sajian template serta klik Edit HTML.
3. Setelah itu silahkan cari isyarat popular post, biasanya isyarat popular post menyerupai #PopularPosts atau .PopularPosts, kalau sudah ketemu silahkan hapus semua isyarat popular post tersebut serta ganti dengan isyarat 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 serta lihat hasilnya.

Nah biasanya kalau anda memakai thumnail atau gambar akan menciptakan tampilan popular post kurang yummy dilihat, oleh alasannya itu silahkan nonaktifkan tampilan gambar serta deksripsi popular post. untuk caranya sanggup dilihat dibawah ini.

Cara menciptakan popular post responsive


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


4. Terakhir tinggal simpan.

Dengan begitu tamilan popular post blog anda hanya akan terdapat judul serta nomor saja, silahkan bereksperimen sendiri kalau tampilan popular post tersebut kurang memuaskan bagi anda. sekian tutorial blog yg sanggup aku share serta terima kasih.

Artikel Terkait