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;}



Share this on:Share on Facebook7Tweet about this on TwitterShare on Google+1Pin on Pinterest0Share on StumbleUpon1Digg this

Become a fan on Facebook and us on twitter for our new updates.

3 Comments

  1. Ashutosh Jha
  2. Tasha W

Leave a Reply