How to Change Bullets To Customized Images in Blogger

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