Customise Your Blogger With Image Mouse Hover Effects Bullets

I recently shared a tutorial of customizing the look of your bullet list and number list  and 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.
This effect is really easy to apply. We only need to apply a simple code to your template. Lets start!

• 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. Lets start!

Go To,

• Blogger > Layout > Edit HTML
• Search For ]]></b:skin>
• And just above ]]></b:skin> add the code below,   (Tip:- Press Ctrl + F)

For This Style Copy Code Given Below:

.post ul {list-style:none;
}
.post ul li {
    line-height: 1.4em;
        background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggttnKTvVe69hMCNCFhiJZKxQ-kW1EFVC1GKfCLIP9BVS211eLzZFGLDMPScpT_nLs73JNWge7W8LVosrhE048NzjVGzbY2gi6Gz8mIHwod9iQtlzMJoliH1Yk6IhVzmKReoVPIpFxlKc/s400/265.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/AVvXsEgDR9BnxQXQyspeUTO_wy-LuzPC1rF1nyUYpL8n8xdlXfZWM51Hxo2-RBfgNDk_fdqRhyphenhyphenCXG_jwRUVjc3hX5Ve_qevhZWGbY0LXIfFdrKV_k2JGTF_jXutgTia8QULPZ32XFDiuM6rMUls/s400/261.gif) no-repeat scroll 0px 4px;
}

For This Style Copy Code Given Below:

.post ul {list-style:none;
}
.post ul li {
    line-height: 1.4em;
        background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxgVIprbGu3Gzgsp3lXO-RNAm_BVhfjAVS0y55sNCCOwzwZC3dwRMX6VTBn7Cv9yjbBPYfkXhdaW1AueWKnHFDFo9pqRbG11f_PABounuQbA_5qm-394eGol6-YOUg42tcANFJSTf38qM/s400/255.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/AVvXsEhUjnjbUpIZa7XAOd5KT0PsjxYNtEBk8Aar4IQjlxcfQwxD8tLwDuYAkeGju9doGeGhSmVM5nxJLtJ3g6wY-rMe6EgaAtMlmWnNnMpaOR9oajHyzyCyJ1A0hoXNJBFwfk-9M1_BkQzWjsY/s400/251.gif) no-repeat scroll 0px 4px;
}

• Save your template and you are done!

Customization

The bullet image can be aligned horizontally with the text by increasing or decreasing the value 4px. You can change the value to 7px or more or less according to your blog alignment requirement.