Cara membuat efek hover pada popular post

بِسْـــــــــمِ ﷲِالرَّحْمَنِ الرَّحِيم Cara membuat efek hover pada popular post. Pada posting terdahul cara edit blog telah membuat posting tentang Cara menambah bullet pada popular post seperti bisa kita buka pada link
https://caraeditblogger.blogspot.co.id/2014/11/cara-menambah-bullet-pada-popular-post.html
, pada posting kali ini juga tentang popular post lagi yaitu dengan membuat efek hover. Yang dimaksud efek hover pada popular post disini adalah ketika kursor menyentuh salah satu judul pada popular post maka judul tersebut akan berubah background berikut iconnya.

Muncul background biru saat di sentuh

Jika kita perhatikan pada gambar diatas, sebuah judul popular post terlihat ada background berwarna biru, dan warna biru tersebut akan berpindah jika kita geser mouse ke judul yang lainnya, berikut icon / bullet yang ada disamping judul juga terlihat berubah.

Mau coba buat ? mari kita coba langkah demi langkah :
1. Login ke blogger.com
2. Buka Template
3. Edit html. (jangan lupa backup dulu template yang ada)
4. Cari kode

]]></b:skin>

5. Tambahkan kode berikut diatasnya :

.popular-posts { margin: 10px 0px 5px 0px;} .popular-posts ul{padding-left:0px; font: normal 13px Arial, Tahoma, Verdana;} .popular-posts ul li {background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfF2-5iJv22qim_xVryPLoq51rA7igYxFtq4s5j-JhfUnjZG6_mnEELoh6TxKC4t-V6ch_i6YHsME9JWjvsXuPcnx3Fa2AdS-DomKX4vSIPuaGsuWO2AX8dC1AQz63AI7KFkRmCDizJCGm/s1600/caraeditblogbullet.jpg) no-repeat scroll 5px 10px; list-style-type: none; margin:0 0 5px 0px; padding:8px 5px 7px 33px !important; border-bottom: 2px dotted #dddddd;}
.popular-posts ul li:hover { background: #d0e2f6 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZXd_5KeFGCwiDC9VoWOQ0CPIhhnio2eIsYsOhdktS63kc75i2UIGH9rukIJlyeLhIdYVL2QVfXGEjFlyoMC-CsowcDnUc0jTXUZK00ffIMhUV3v4qUUhYNGZyBirNKtlCnGpJ4MeYwo1w/s110/caraeditblogbullet.gif) no-repeat scroll 5px 10px; border: 2px solid #c0d8f3; border-radius: 1px; -moz-border-radius: 1px; -webkit-border-radius: 1px; } .popular-posts ul li a:hover { text-decoration:none; }

6. SImpan template
7.