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 Memasang Sosial Share Button Dengan Counter Dibawah PostinganTombol berbagi atau share button adalah widget yang berguna untuk memudahkan dalam berbagi artikel. Share button ini biasanya terhubung deng… [Read More]
Cara Membuat Menu Navigasi Dropdown Menu di BlogNavigasi sangatlah penting. Bukan hanya di kehidupan nyata sehari-hari tetapi juga di blog. Menu navigasi sangat membantu dalam menentukan d… [Read More]
Cara Membuat Share Button [Facebook,Twitter,Google+] Untuk MobileKali ini kita akan membuat share button. Padahal kemarin kita sudah membuat share button yang tak kalah bagusnya. Tapi tidak masalah mungkin… [Read More]
Cara Membuat Kotak Berlangganan Dibawah Artikel Seperti Evo MagzMemasang Subcription Box Seperti Di Evo Magz Blog - Kotak berlangganan yang sering juga disebut subcription box adalah kotak yang berfungsi … [Read More]
Cara Membuat Tombol Berbagi [Share Button] Responsive di Bawah Postingan BlogTombol berbagi adalah tombol yang digunakan untuk mempermudah pengunjung untuk membagikan artikel yang ia baca. Tombol berbagi yang akrab di… [Read More]
This comment has been removed by a blog administrator.
ReplyDeleteBisa mas
Deletekeren nih , izin coba ya gan
ReplyDelete