Customized Bullet Style

Now you can make your Blogspot post even more unique by changing your bullet style by add hover style. In today's tutorial you are going to learn show to add hover style on your blog. The trick is very simple the code depends on only in CSS with two images of button in different color from each other. By adding this style your visitor get fascinate and give you more love to your blog.

Add CSS Code to Blogger Template:

• Go to your Blogger account and open the template tabs right of your Blogger dashboard.
• Click on the edit HTML and open it. The new window appears with your template codes.
• Now press Ctrl + F the new light box will appears and put this ]]></b:skin> code in the box and just above this code ]]></b:skin> past the below code.

.post ul { list-style: none; } .post ul li { line-height: 1.4em; background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEia6irL2vv-lJwGFBTGjCVNqttfijuD1rE-jGhXKcScWjI50TT2lrAVvxmWU9Hqlqdderb1oKyX1G49_2jd-v70E9GKpeaGUS9NMzK3Fztrem2YGpp7krkmSCaoGHwueVlODY3SseLcQLRl/s1600/green-bullet-icon.png) no-repeat scroll 0 5px; margin: 0.3em 0; padding: 0 0 0.8em 20px; } .post ul li:hover { background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgldqb9ka8lmrTt1pynfW4fdu6ghbSdhCqTvrPCVrXmzK6YoiRHlxaz4ChmvH9iB50bZH0sD4G9VV2Jd7PakofKAesU0Yo7hgE1m8LvS6dDdpFtiSMrMXQ_5nWF7smEeTOS_zvr79Ujjo-E/s1600/blue-bullet-icon.png) no-repeat scroll 0px 5px; } - See more at: http://www.helperblogger.com/2012/05/customize-bullet-list-style-with-image.html#sthash.infxGps4.dpuf

You can customize this code too. You may also increasing or decreasing the value of 5px. If you change the value must change the both value to make it correct. Change the URL with your own images so it will give another look. Must try this code. Give us your feedback we are waiting for you.

---

Tweet

About Post Author:

This post is fruit of pen-clipping of Mohammad Hamza, poineer of ProFeedLinks. He likes to shear about his thought and experience with others.

Read more about Mohammad Hamza »