Modifikasi Widget Popular Posts Dengan Efek Hover Border Dan Background Color (Tutorial Blog)

Kali ini saya sakan share cara memodifikasi populer post dengan efek hover dan background, populer post sendri adalah salahsatu wiget yang telah di sediakan oleh blogger, dan populer post juga salah satu yang sangat penting dalam sebuah blogger dengan adaya atau dengan kita memasang popular post, maka pengunjungpun akan mengetahui post mana yang ramai dikunjungi di blog kita, dengan desain yang saya akan share kali ini mungkin akan terlihat lebih indah dan SEO.

Berikut tutorialnya :

1. Masuk ke Blogger shobat
2. Masuk Rancangan/Template
3. Klik Edit HTML
4. Cari kode ]]></b:skin>
5. Langkah selanjutnya bila shobat sudah menemukan kode ]]></b:skin> copy kode berikut tepat di atas kode ]]></b:skin>

.popular-posts ul{padding-left:0px;}
.popular-posts ul li {background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmlilZm-wAiCynkB3WSM4wh46VrMpY36qvq1UYeKyAWKBcXFSYuqGSvXZ0qCecILglWfU8wGVsip8nZRktopwp4flFWR9t25M5tZEZRapaZoiAtAL2saaJSNH4z_Ip2HFH9WAxmsZTx7Q/s1600/helperblogger-list-style-icon.png) no-repeat scroll 5px 10px;
list-style-type: none;
margin:0 0 5px 0px;
padding:8px 5px 7px 22px !important;
border-bottom: 2px dotted #dddddd;
}
.popular-posts ul li:hover {
border-bottom: 2px solid #6BB5FF;
}
.popular-posts ul li a:hover {
text-decoration:none;
}

6. Simpan dan lihat hasilnya .

Berikut saya share Modifikasi Widget Popular Posts Dengan Efek Hover Border Dan Background Color, semoga bermanfaat.