Hacker News :
Home » » HOW TO CHANGE BULLET POINT STYLE IN BLOGGER BLOG?

HOW TO CHANGE BULLET POINT STYLE IN BLOGGER BLOG?

Written By Dipanshu Garg on Wednesday, 28 November 2012 | 02:38


I love to write tutorial about Blogger and WordPress blogs. Because every new blogger want to customize their templates. Blogger creates templates that allow you to set up your blog easily and with little design knowledge. Altering the templates is an advanced function, but you can make small changes without any knowledge of HTML. 


Some times you do not like bullet style in blogger blog. So, I want to tell you that you can easily change bullet style with the help off CSS code. This tutorial will guide you "How To Change Bullet Point Style In Blogger Blog".

How To Change Bullet Point Style In Blogger Blog

Go To Blogger Dashboad -> Template Tab -> Customize Button -> Advance
Scroll Down - Choose Add CSS Option Click On It & Paste Blow Code There At The End Of Other Codes

.post ul li {
list-style-image:url('Bullet Icon URL');
}

Note - Replace Red Color Line With Your Bullet Point Image URL

See Screenshot Here: Click On Images For Large Size


Already Made CSS Codes - Just Copy & Paste


.post ul li {
list-style-image:url('http://3.bp.blogspot.com/_7wsQzULWIwo/SuM3oFg5zlI/AAAAAAAACHo/n5UluB5ugMI/s400/255.gif');
}

******************

MBT Bullets Style

.post ul li {list-style-image:url('http://1.bp.blogspot.com/-L6jqPydAXeA/T-Ae_NVvY3I/AAAAAAAAEOc/wH91q3MmWrE/s1600/bullet_blue_arrow.png');
}


******************



.post ul li {list-style-image:url('http://3.bp.blogspot.com/-VgY5HIBADcE/T-Ae_38EuoI/AAAAAAAAEOk/Gs1nSHBGv7I/s1600/bullet_error.png');
}


******************



.post ul li {list-style-image:url('http://1.bp.blogspot.com/-ESf_DXPfOkA/T-AfAcFN-WI/AAAAAAAAEOs/8D735Aue-Lw/s1600/bullet_home.png');
}


******************



.post ul li {list-style-image:url('http://2.bp.blogspot.com/-UgEKqjyP6pM/T-AfBcHydVI/AAAAAAAAEO8/NNryZFgmP8U/s1600/bullet_tick.png');
}


******************



.post ul li {list-style-image:url('http://3.bp.blogspot.com/-iHyDInZidks/T-CQPj0yjcI/AAAAAAAAO5c/8tIQkJQtS98/s1600/star_bullet.png');
}


******************




.post ul li {list-style-image:url('http://1.bp.blogspot.com/-g3oZgkw7Nf4/T-CRdUryAoI/AAAAAAAAO5s/RWHTvnLzvhg/s1600/Love+icon.png');
}


******************



.post ul li {list-style-image:url('http://3.bp.blogspot.com/-NOERfdCP5aQ/T-CQ7ZZwLoI/AAAAAAAAO5k/MKiAn2f01iQ/s1600/Green+plus.png');
}

Its Done, Visit Your Blog Or Website, Enjoy :)

If you need any help regarding this tutorial you can ask via comment any time. Keep in touch, we will come back with more tutorials.
Share this article :

0 comments:

Speak up your mind

Tell us what you're thinking... !

Note: only a member of this blog may post a comment.

Popular Posts