Membuat angka keren pada Populer Post

adscblog

Populer post adalah salah satu widget yang sangat penting peranan nya apabila kita pasang di blog kita,manfaat dari kita memasang widget populer post adalah agar para pengunjung tau artikel atau postingan mana saja yang saat ini sering di baca oleh para pengunjung blog tersebut,oleh karena itu tidak sedikit para blogger untuk memodipikasi widget popuelr post tersebut.

Salah satu nya adalah menambahkan angka pada bagian kiri atau kanan artikel populer post yang berada di widget tersebut sehingga kelihatan nya lebih unik dan lebih keren tentu nya,mungkin bagi anda para blogger tertarik dengan memasang angka pada bagian populer post ini,maka oleh karena itu silahkan anda mengikuti langkah langkah di bawah ini untuk penerapan nya.

Cara memasang angka atau nomor pada populer post

Untuk memasang widget populer post dengan angka sangalah gampang sekali dan tidak perlu repot repot,untuk memasang widget populer post dengan angka ini seperti hal nya anda memasang widget biasa dengan langkah seperti ini

1. Silahkan anda login ke blogger
2. Setelah itu silahkan anda masuk ke Dashboard
3. Lalu anda klik Layout yang berada di sebelah kiri
4. Kemudian pilih add a Gadget dan klik
5. Setelah itu akan tampil seperti gambar berikut
   
   Silahkan anda pilih atau klik Popular Posts
6. Setelah widget popular post terpasang,kemudian silahkan anda klik lagi Template > Edit Html
7. Dan kemudian silahkan anda pasang kode berikut sebelum 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;
}

Kemudian Save template,dan silahkan anda lihat hasil nya,jika masih ada yang kurang bagus,anda bisa memodipikasi sendiri kode di atas sesuai dengan yang anda ingin kan.

adscblog

Recommendation Apps

ads1

Previous

Posting Lebih Baru

Next

Posting Lama

Posted by Dede Ubed, Published at 22 September and have 0 komentar