Membuat Popular Post Dengan Angka Atau Nomor Urut Versi 0.2

Alhamdulillah admini kembali dapat menulis artikel mengenai tutorial blogger kembali setelah kemarin admin berbagi tutorila tentang modifikasi popular post yang simpel dan sederhana beberapa waktu lalu baca artikel berikut : Membuat Popular Post Dengan Angka Atau Nomor Urut.

Pada kesempatan kali ini admin kembali memberikan tutorial modifikasi popular post yang cukup sederhana namun cukup elegan, mungkin sebagian teman-teman pernah melihat tampilan topik terhangat seperti yang dimiki tempo.co atau most popular yang dimiliki detik.com kali ini desain popular popst yang saya modifikasi akan merujuk pada desain most popular seperti yang dimiliki detik.com

Bagaimana hasilnya, yuk langsung kita modifikasi saja. Langkap pertama seperti biasa

kita perlu menambahkan widget popular post untuk itu langsung saja menuju halaman Tata Letak, Tambahkan Widget kemudian pilih Entri Populer, lalu atur sesuai gambar dibawah ini.

Lanjut pada langkah berikutnya, edit HTML template dan langsung saja cari kode tag ini ]]></b:skin> kemudian letakan kode CSS dibawah tepat diatasnya.

.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: #f22b32;
color: #ffffff;
position: relative;
font-weight: bold;
font-family: georgia;
float: left;
border-radius: 20px;
box-shadow: 1px 2px 9px #666666; }
.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;
}

Setelah terpasang, save dan lihat hasil popular post yang sudah kita modifikasi tersebut, selamat mencoba jika ketemu kendala silahkan berkomentar untuk bertanya.