Tuesday, June 19, 2012

How To Change Bullet Point Style In Blogger Blog?

Author: Gagan Masoun
How To Change Bullet Point Style In Blogger Blog?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
How To Change Bullet Point Style In Blogger Blog

How To Change Bullet Point Style In Blogger Blog

Already Made CSS Codes - Just Copy & Paste

MBT Bullets Style
.post ul li {
list-style-image:url('http://3.bp.blogspot.com/_7wsQzULWIwo/SuM3oFg5zlI/AAAAAAAACHo/n5UluB5ugMI/s400/255.gif');
}
****************** 
Blue Arrow Bullet Style
.post ul li {list-style-image:url('http://1.bp.blogspot.com/-L6jqPydAXeA/T-Ae_NVvY3I/AAAAAAAAEOc/wH91q3MmWrE/s1600/bullet_blue_arrow.png');
}
******************
Error Bullet Style
.post ul li {list-style-image:url('http://3.bp.blogspot.com/-VgY5HIBADcE/T-Ae_38EuoI/AAAAAAAAEOk/Gs1nSHBGv7I/s1600/bullet_error.png');
}
 ****************** 
Home Bullet Style
.post ul li {list-style-image:url('http://1.bp.blogspot.com/-ESf_DXPfOkA/T-AfAcFN-WI/AAAAAAAAEOs/8D735Aue-Lw/s1600/bullet_home.png');
}
  ****************** 
Tick Bullet Style
.post ul li {list-style-image:url('http://2.bp.blogspot.com/-UgEKqjyP6pM/T-AfBcHydVI/AAAAAAAAEO8/NNryZFgmP8U/s1600/bullet_tick.png');
}
 ****************** 
Award Bullet Style
.post ul li {list-style-image:url('http://3.bp.blogspot.com/-iHyDInZidks/T-CQPj0yjcI/AAAAAAAAO5c/8tIQkJQtS98/s1600/star_bullet.png');
}
  ****************** 
Heart Bullet Style
.post ul li {list-style-image:url('http://1.bp.blogspot.com/-g3oZgkw7Nf4/T-CRdUryAoI/AAAAAAAAO5s/RWHTvnLzvhg/s1600/Love+icon.png');
}
******************
Green Button Bullet Style
.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.

6 comments:

  1. My Dear Brother Nice Post About Bullets, I Have One Question About How To Add MouseOver Effect In This Bullets...!!!
    Please Reply Faster Thanks...

    ReplyDelete
    Replies
    1. Thanks a lot @Syed Bahadur Shah, I will add that tutorial also...

      Delete
  2. You have to keep this great writing skill sir. Your tutor was explanatory good for pro and newbies.

    Regards WorldWebSurfers.com

    ReplyDelete
  3. Awesome tutorial, thanks a lot!

    ReplyDelete