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.
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;}
Liked it..This is really a good design for the list.
Thanks for sharing !!
@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.
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 🙁