How To Change Your Blogger Bullets To Customized Image / Bullet List Style With Image Hover Effect

Blog traffic and gaining the trust of your readers mostly depends on some particular thing in blogging which are: Inspirational content, consistency in your posting and finally your blog design. Most people fell in love with your blog not only because you have good contents, but also the styles and good designs that make up your blog. So today we will learn how to change the bullet list using the Image Hover effect. Hover your cursor over the bullet list below to see the effect.

Isn’t the image turning blue from green?
Liked it? Now learn it!
This effect is really easy to apply. We only need to apply a simple code to your template. So lets start!

1. Go to Blogger Dashboard 
2. Click on Layout > Edit HTML
3. Now Search for

.post-footer

4. Now Paste this code before it (you can see in the image below)

.post ul {list-style:none;
}
.post ul li {
    line-height: 1.4em;
        background: transparent url(URL-HERE) no-repeat scroll 0px 4px;
    margin: 0.3em 0;
    padding: 0 0 0.8em 20px;
}
.post ul li:hover {
        background: transparent url(URL-HERE) no-repeat scroll 0px 4px;
}

Click on the image to enlarge

 (https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDEA70Sc6a5UgpHK2idSBMuKEk3-xAM84hT0kzi8d7t4jKzUbyEEASle7tmMVuK_6bFJIZ6EFwNerAkM40mEVsfwzLQBm_qqDQG8qnCu2HQMG8vQL8cY77wl575SfYMaTWtrrorDdu7Qo/s400/251.gif)

(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj04_7Jf2VyNQHKazI13RnhS7maKe0vy9w9EoWOqK0UkESokpmfylgVHOcLLm9yuggPOKtuWbaumTZhxINYPe_LMeZc8ue7mYnVR71xH8byDZjVN52qtAZcW1PyzSe-NRyD0ij0bUQ6q6Q/s400/255.gif)

(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyPa5ssyiIsRkcqedaJZj_E4Bu-4MAXyIyNH8-vKJmmp0IvLYHhoJH_ZkF-P3oMXpodCZQj0ox2mIs_fWIqta0kJJOlizRWSHdTZuRiPq49ABquhm8lMfw64LKdVrLa28hd8_cTfdmZDA/s400/261.gif)

(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYyLqGGvkDWX-NsriF5Q1Pn78jbFcP90gMmuATrb8GLj-GRFkCQs7C4VJN20AkEwXJR1XAiQkrRXKm6sXqOrMYV_-qC5P67ucwJOWImj_GbsMc431JjkHbqAMqUC80B_C4YG7C4YzEO6U/s400/265.gif)