Getting bored of the default dark circled bullets ? Then here’s the method to Change list bullets to customized image in Blogger.
Here is the first initiative from Blog SpiceUp to make your blog a professional one for free. Seriously default list bullets look unprofessional and also your blog visitors may not like those. So here is method with detailed steps to let you configure your blogger very easily.
Steps :
1) Login to Blogger account.
2) Click on Blog name where you want to make changes.
3) Check for “Template” in left menu and click on it.
4) Click on “Edit HTML”.
5) Use “CTRL + F” key combination to find this code ===> “]]></b:skin>” (without quotes).
6) At last copy the following code and paste it before “]]></b:skin>”.
|
1 2 3 4 5 6 7 8 9 10 11 |
.post ul {list-style:none;}.post ul li { line-height: 1.4em; background: transparent url(https://lh5.googleusercontent.com/-ScrbzP5YlEc/UPaviJtC2WI/AAAAAAAABLM/PN1UNdLfrUs/s16/add-icon.png) no-repeat scroll 0px 4px; margin: 0.3em 0; padding: 0 0 0.8em 20px; } .post ul li:hover { background: transparent url(https://lh5.googleusercontent.com/-l63-aL65WmQ/UPax0IT6f4I/AAAAAAAABLk/HwovyCj0jNQ/s16/math-minus-icon.png) no-repeat scroll 0px 4px; } |
Final result :
Default Style :
Customized Style :
Demo : See the result in action === > Here
Note : You can customize the images with your own image. Just change the two image links with your own image.
Hope you liked this customization.Visit BlogSpiceUp for more!




need help its not working for me
Its working check the demo link…It is working perfectly on my demo blogger site…Where have you pasted the code?
Kewl you should come up with that. Excleelnt!
Thank you a million
I am writing a new blog and I tried different codes from different websites that never worked. Your code worked right away.
please hit me a visit. Your comment is appreciated
thank you so much
Hey Thanks Ahmad! I assure that everything will work if instructions are carefully followed.Keep visiting for more!