Convert Bullet List style with hover image effect for blogger

Have you observe that when you mover on Bullet list style converts to image style. This bloggertrick can be done on your blog by adding simple BlogTariff CSS code. We already discussed in many posts that customization and stylizing blog with unique look makes to attract more visitor and way to boost maximum traffic.
Here, we’re going to educate you how to execute changing of bullet list style with hover image effect.

What are the advantages for adding this code?

• You can prove how quality of posts you write on your blog
• How stylish blog you’re maintaining
• Always a head in maintains good looking and eye-catching blog

Tutorial to “Add Moser over change bullet list style to image”

Sign into your blogger account
Click on “EDIT HTML” link tab
Now, search for code

]]></b:skin>

After finding the code copy the below code and paste above to it

.post ul {list-style:none;
}
.post ul li {
    line-height: 1.4em;
        background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4xz5xNMQ1OEvjOe9AAki-5XuES5hIFN-ZMlBSMsLKW4akPGxslQMStb3OEYCnaAGZjU7HwFCwD9k8S29wER_ECEfG1mhgmeevKwDTnDYZ3eTCoLWTYhTD3Eg5d8tKQycC7KiSMc3FT3c/s307/btf.gif) no-repeat scroll 0px 4px;
    margin: 0.3em 0;
    padding: 0 0 0.8em 20px;
}
.post ul li:hover {
        background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHHyU8wM1lp86X2LMNfaib7DBYvldoaQm8S4jRYtFHxV5iF30FVUskexCqwPcNkCUcDdn6dewb3J2tzbvdR6CyEv-zl7hOZWEY7Eb9UZZJA00Octy7XUFzzVT3oJx8ruAfkjYCPRRguTI/s307/btf1.gif) no-repeat scroll 0px 4px;
}

Customization:-

By default the bullet image is aligned horizontal, you can adjust it with from 4px to your required value.
Customize image simply by replacing image URL with your own image URL as highlighted in the above code
You can simply customize the above code by using our Online HTML Editor.

After successful pasting the above code, “Save the Blog Template” and preview you r blog post where bullet listed Changed…that’s it you’ve done successful.
Author Notes: You can get more bullet list stylish images Free of cost for your blog. By Subscribing to our blog and leaving message to us you can get this all.