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.
This comment has been removed by a blog administrator.
ReplyDeleteBisa mas
Deletekeren nih , izin coba ya gan
ReplyDelete