Home / CSS / Cara Membuat Popular Post Keren Dengan Nomor

Cara Membuat Popular Post Keren Dengan Nomor

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

Sebelumya apa yang dimaksud dengan popular post? popular post sendiri merupakan salah satu fitur yang ada pada sebuah blog yang menampilkan semua entri atau postingan yang paling kaya 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, sebab saat baru pertama kali menciptakan blog widget yang pasti ada pertama kali merupakan popular post. widget ini cukup bermanfaat sebab tak hanya menambah page view blog juga akan menciptakan artikel yang unggul tetap bertahan di search google. (ini sih pendapat admin).

Cara Membuat Popular Post Keren Dengan Nomor 1

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

Baca :  Cara Ampuh Daftar Google Adsense Cepat Diterima

Cara menciptakan 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, apabila sudah ketemu silahkan hapus semua kode popular post tersebut dan mengganti 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 apabila anda menggunakan thumnail atau gambar akan menciptakan tampilan popular post kurang enak dilihat, oleh sebab itu silahkan nonaktifkan tampilan gambar dan deksripsi popular post. untuk caranya dapat dilihat dibawah ini.

Cara menciptakan 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.

Cara Membuat Popular Post Keren Dengan Nomor 2

4. Terakhir tinggal simpan.

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

Baca :  Cara Moderasi Komentar di Blog Sebelum di Publish

About Erzed