How to Add Animated Bullet for Blogger Blogs

Today, I want to share an easy way to add animated bullet for blog. This bullet Hovers on pointing it. This looks clean and cool on your site.

So whenever you bullet a list in your blog post, instead of showing like what you are seeing below.

• Demo Line 1
• Demo Line 2
• Demo Line 3
• Demo Line 4
• Demo Line 5

It will change to what you are seeing below:

• Demo Line 1
• Demo Line 2
• Demo Line 3
• Demo Line 4
• Demo Line 5

The beauty of this customization is that whenever you point your mouse cursor on the list, the image colour will change.

Note  : Before making any changes to your template learn how to Backup it.

How to Add Animated Bullet for Blogger

• Login to your Blogger Dashboard.
• Go to Template –> Edit HTML.
• Now search for ]]></b:skin> this code using Ctrl + F.
• Finally add the below code just before ]]></b:skin>  tag.

.post ul {list-style:none;}.post ul li { line-height: 1.4em; background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvUZe82ua37dt0Dtq4DXQpH1eRi_yKMzf0DE-30twfJMQaf8obigDQavn6HlgV4_408IL9X0DSkF31CtFyiKlE74sC1nLr31UmdYq3roi1tpd_MByDws4f57EceixJemBaBicAWGu3W-I/s400/251.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/AVvXsEgFq5GD0Wdo5F5hHC9ngveSbyCSnLXaGd5JjQaqRGhb39nYc_XKiaa5CGtn2qNcQ3ZHAdOO0ivSoqMlrgw50OBQusiCnqdEOXf1T3dBb6LzXEK8DvvTLDr2T5nWe7UXSVOEolAczitgIDs/s400/255.gif) no-repeat scroll 0px 4px;}

• Save your template.