Customize Bullet List Style With Image Hover Effect In Blogger

Today we will learn how to change the bullet list using the Image Hover effect.Every blogger wants to create her post in a unique way,that why they always try to make some different.To add this effect you just have to put some CSS code in your template.

Also Read : How to Optimize blog post title to H1 tags for better SEO 2014.

How To Customize Bullet List In Blogger :

• Go to Blogger Dashboard → Template → Edit HTML.
• Find bellow code,

 ]]></b:skin>

• Now add bellow code just above ]]></b:skin>.

 .post ul {list-style:none;
}
.post ul li {
    line-height: 1.4em;
        background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvw9XtpESBWqCJmgFxCZTjYpsoJrqTiT4vBlleeAVDO0qjMxxhn1VEJM7jjTnILcLS9xbQP4VvTlh5QjgRBpciBCka5ZDc0zr6XM0Y03QUoseH8md9tBZU9jwMdhhYQN2YJ4ZfFnrjTR4/s1600/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/AVvXsEgRt9YZ-IbR8nwJRcWn-dTiMhHOvgNKZb7qebE6T1LDtkepjOtFFSxQ4129VGHkQfX1Dw5ywcHc7J1uFkR-8gdBI4UdsnSxl4i88JpOESFZj7joqWAOjoIn-P84ltlfIaBqmzvdWX9MByk/s1600/251.gif) no-repeat scroll 0px 4px;
}

• Now save your Template and you are done.

Costomizations:

• You can also Replace highlighted image url with your choice.