Cara Memasang Popular Post Berjalan Dengan Nomor
Banyak sekali style popular post yang bisa anda temukan disini yang bisa anda pasang di blog anda. Popular post adalah widget yang berisi urutan artikel berdasakan banyak sedikitnya artikel yang dibaca pengunjung di blog kita. Popular post berfungsi untuk memberi tahu pengunjung bahwa artikel yang masuk dalam popular post merupakan artikel yang paling disukai dan dibaca di blog.
Ada banyak style popular post yang menarik dan keren. Namun kali ini saya akan membagikan tutorial cara membuat popular post yang sederhana dan dengan urutan angka. Dengan angka yang tertera pada artikel di popular post menunjukkan urutan artikel yang popular.
Anda juga bisa mengatur supaya popular post menampilkan gambar atau tidak. Popular post yang sederhana dan simple ini sangat cocok untuk dipasang pada blog yang menggunakan template personal dan sederhana pula. Bagi anda yang tertarik untuk membuat popular post ini,maka silakan simak langkah-langkahnya berikut.
Anda juga bisa mengatur supaya popular post menampilkan gambar atau tidak. Popular post yang sederhana dan simple ini sangat cocok untuk dipasang pada blog yang menggunakan template personal dan sederhana pula. Bagi anda yang tertarik untuk membuat popular post ini,maka silakan simak langkah-langkahnya berikut.
Cara Membuat Popular Post Dengan Nomor
Langkah 1 (Buat Widget Popular Post)
Silakan masuk ke blogger,lalu klik Tata Letak → Tambahkan gadget → Entri Popular
Lalu klik simpan
Langkah 2
Silakan klik Template → Edit HTML ,lalu cari kode ]]></b:skin>
Langkah 3
Salin kode CSS dibawah ini lalu letakkan diatas kode ]]></b:skin> .popular-posts ul {
padding-left: 0px;
counter-reset: popcount;
}
.popular-posts ul li:before {
list-style-type: none;
margin-right: 15px;
padding: 0.3em 0.6em;
counter-increment: popcount;
content: counter(popcount);
font-size: 16px;
background: #359bed;
color: #ffffff;
position: relative;
font-weight: bold;
font-family: georgia;
float: left;
border: 2px solid #dddddd;
}
.popular-posts ul li {
border-bottom: 1px dashed #dddddd;
}
.popular-posts ul li:hover {
border-bottom: 1px dashed #696969;
}
.popular-posts ul li a {
text-decoration:none; color:#5A5F63;
}
.popular-posts ul li a:hover {
text-decoration:none;
}
Lalu simpan template.
Selesai,sekarang lihat blog sobat untuk melihat hasil popular post yang telah dibuat. Jika anda ingin membuat popular post dengan style lain silakan search aja di blog ini. Itulah tutorial cara membuat popular post yang sederhana dengan nomor.
Related Posts :
Cara Membuat Slide Demo dan Download Button [Tombol Slide Demo & Download]Bagi para pemiliki blog download tentu tidak asing dengan adanya tombol download. Kecuali bagi mereka yang membuat link download hanya dalam… [Read More]
Cara Redirect Page Not Found 404 Ke Halaman/Page LainBagi anda yang memiliki banyak broken link atau link rusak pasti kesulitan dalam memperbaiki broken link tersebut apalagi jika broken link y… [Read More]
Cara Membuat Widget Iklan Dibawah Header ResponsiveLama tidak membuat artikel karena kendala laptop yang rusak. Nah untuk kali ini saya akan membagikan tutorial cara membuat widget iklan diba… [Read More]
Cara Mengetahui Apakah Blog Kita Di AGC (Auto Generate Content) atau TidakAGC merupakan tindakan pencurian konten artikel yang memanfaatkan feed blog kita. Dengan menggunakan feed blog kita maka para pengguna AGC b… [Read More]
Cara Mencegah Blog Di AGC (Auto Generate Content) Dengan Mengatur FeedGeram dengan adanya AGC konten! Sama saya juga geram dengan adanya cara copas terbaru tersebut. Sekarang tidak perlu repot mencuri artikel d… [Read More]
This comment has been removed by a blog administrator.
ReplyDeleteBisa mas
Deletekeren nih , izin coba ya gan
ReplyDelete