Membuat Popular Post Blog Dengan Nomor - Kali ini saya akan share
tentang bagaimana cara membuat widget popular post seperti yang ada di
blog ini yaitu popular post yang dilengkapi dengan nomor. Tentu saja
sobat bisa mengubahnya sesuai keinginan sobat sendiri. Ok langsung saja
berikut ini adalah tutorial membuat popular post blog seperti pada blog
ini:
1. Log in ke akun blogger sobat2. Klik tata letak tambahkan widget popular post3. Setelah anda tambahkan widgetnya lalu pergi ke template dan klik edit HTML5. Cari kode berikut ]]></b:skin> lalu letakkan kode dibawah ini tepat diatas kode tersebut:
.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;
}
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;
}
6. Klik pratinjau, jika semuanya berjalan lancar klik simpan.
www.adieteknokom.com


informasi yang sangat bermanfaat
ReplyDeleteOtomotif line