How to Change Bullets To Customized Images in Blogger


Design is among the traits of a professional blog. In recent time, many tricks and hacks have been shared on this blog on how to make a professional blog using blogger platform.

Change Bullet to Customised images, Change Blogger Bullet to Images

Today, I want to share an easy way on how to change blogger bullets to a customized image. So whenever you bullet a list in your blog post, instead of showing like what you are seeing below:

• This Is First Demo Line
• This Is Second Demo Line
• This Is Third Demo Line
• This Is Fourth Demo Line
• This Is Fifth Demo Line

It will change to what you are seeing below:

  • This Is First Demo Line
  • This Is Second Demo Line
  • This Is Third Demo Line
  • This Is Fourth Demo Line
  • This Is Fifth Demo Line

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

Adding this feature to your blogger blog is easy; just follow the steps outlined below:

1. Log in to your Blogger Dashboard, Navigate to Template ==> Edit HTML and checked the Expand Widget Templates Check box. Then use (CTRL+F) to search for ]]></b:skin> tag in your templates.

2. Finally add the code below before the ]]></b:skin> tag

.post ul {list-style:none;}.post ul li {     line-height: 1.4em;         background: transparent url(http://2.bp.blogspot.com/_7wsQzULWIwo/SuM3oYoTkRI/AAAAAAAACHw/Dig1etGrcpY/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(http://3.bp.blogspot.com/_7wsQzULWIwo/SuM3oFg5zlI/AAAAAAAACHo/n5UluB5ugMI/s400/255.gif) no-repeat scroll 0px 4px;}

I love sharing my knowledge with others. Feel free to contact me with any questions you may have. Please subscribe to the newsfeed and get updates through email, share this article with friends, or leave a comment below. New users can read about me HERE

Share this on:Facebook7Twitter3Google+1Pinterest0StumbleUpon1Digg

Comments

  1. @Tasha W, Follow the steps to change your blog post bullets to image carefully, this tutorial works very well, as you can see in the demo above.

  2. Tasha W says:

    this didn't work for me, it's not showing up in my post. The bullets in blogger period aren't working for me for some reason :(

Tell us what you're thinking...

All comments are moderated.

* Denotes required field.

*