Modifikasi widget popular posts blogger

Mungkin anda berencanda untuk merubah tampilan widget popular posts yang biasa aja?berikut saya akan memberikan tutorial tentang merubah tampilan widget popular posts keren pada blogger,caranya sangat mudah sob,hanya perlu menambah beberapa code CSS pada tempelate kita,dan hasilnya tampilan popular post pun lebih menarik. . :)

Berikut cara merubah tampilan popular posts pada blogger:

• Pastikan anda sudah memasang popular post
• Edit widget popular post pada blog anda tanpa thumnail dan cuplikan pada popular post
• Kalau sudah sekarang ke menu tempelate>>edit HTML
• Lalu cari kode ]]></b:skin>
• Copy CSS dibawah ini
• Letakan tepat diatas kode ]]></b:skin> pada tempelate anda

.popular-posts ul li a {
background: none repeat scroll 0 0 #DDDDDD;
color: #444444;
display: block;
margin: 0 0 0.5em;
padding: 0.4em;
position: relative;
text-decoration: none;
transition: all 0.3s ease-out 0s;
}
.popular-posts ul li a:before {
background: none repeat scroll 0 0 #CCCCCC;
font-weight: 700;
height: 2em;
left: -2.5em;
line-height: 2em;
margin-top: -1em;
position: absolute;
text-align: center;
top: 50%;
width: 2em;
}
.popular-posts ul li a:after {
border: 0.5em solid transparent;
content: "";
left: -1em;
margin-top: -0.5em;
position: absolute;
top: 50%;
transition: all 0.3s ease-out 0s;
}
.popular-posts ul li a:hover {
background: none repeat scroll 0 0 #CCCCCC;
}
.popular-posts ul li a:hover:after {
border-left-color: #CCCCCC;
left: -0.5em;
}
.popular-posts ul li:first-child + li + li + li + li + li + li + li + li + li a:before{content:"10"}
.popular-posts ul li:first-child + li + li + li + li + li + li + li + li a:before{content:"9"}
.popular-posts ul li:first-child + li + li + li + li + li + li + li a:before{content:"8"}
.popular-posts ul li:first-child + li + li + li + li + li + li a:before{content:"7"}
.popular-posts ul li:first-child + li + li + li + li + li a:before{content:"6"}
.popular-posts ul li:first-child + li + li + li + li a:before{content:"5"}
.popular-posts ul li:first-child + li + li + li a:before{content:"4"}
.popular-posts ul li:first-child + li + li a:before{content:"3"}
.popular-posts ul li:first-child + li a:before{content:"2"}
.popular-posts ul li:first-child a:before{content:"1"}

• Kalau sudah previeuw dulu tempelate anda
• Bila tidak ada yang error langsung "Save"
• Dan lihat hasilnya. .

Nah begitulah cara simple dan mudah,merubah tampilan popular post pada blogger.selamat mencoba dan Happy blogging. . ! ! :D