How To Use Images For List Bullet Points On Your Blog

Posted : Sunday, June 26, 2011 | Post Author : Paul Crowe | 20 comments

Images As Bullet Points In ListsIn this post i have a really cool Blog Design Tip to spice up the lists on your blog.When you create an ordered list, items in the list are numbered, and in an unordered list items have what is called a bullet point.What we will do in this post is replace the default bullet point with an image.We do this with just a small snippet of Css including the image URL.To make it as easy as possible i have 10 ready to use images for your bullet points but you can of course use your own image.I also have this set so you can just use the image bullet point on selected lists.If we set it to work on all lists on your blog it could mess up your sidebar and other sections.

You can see a screenshot and demo of how it looks on our templates site were we list the features for templates, the image we use is the same as the favicon further promoting the brand.

View Demo Button

I also use this on our Blogger Templates Site, there i use the Favicon as the list image – Best Blogger Templates.

Video Tutorial – I have added a short video tutorial to the foot of the post for extra help.

Add Image Bullet Points To Your Blog

For WordPress or other platforms paste the Css code in your style sheet and add the class to the list html in the same way.

Add The Css To Blogger

Step 1. Copy the Css code below for the Bullet Image you want to use from below.On Blogger you add it via the template designer by going to Design > Template Designer > Advanced > Add Css as shown below, remember to click apply to blog to save.

Use Your Own Image – Replace IMAGE-URL-HERE with an image around 12x12px.

ul.imglist {
margin: 0;
padding: 0;
}
ul.imglist li {
margin: 0;
list-style-image:url(‘IMAGE-URL-HERE’);
}

Ready To Use Images – These have the image shown already included.

Green Tic Bullet 1

ul.imglist {
margin: 0;
padding: 0;
}
ul.imglist li {
margin: 0;
list-style-image:url(‘http://2.bp.blogspot.com/-iLGKRHyd64c/TgX2h8v64rI/AAAAAAAAEik/NLysCeZH9VA/s1600/bullet-point-green-tick.png’);
}

Green Tick Bullet 2.

ul.imglist {
margin: 0;
padding: 0;
}
ul.imglist li {
margin: 0;
list-style-image:url(‘http://3.bp.blogspot.com/-YHI_hhrc87w/TgX2jPewnHI/AAAAAAAAEi0/nunfcNj-EKU/s1600/bullet-point-image-6.gif’);
}

Maroon Arrow Bullet Point

ul.imglist {
margin: 0;
padding: 0;
}
ul.imglist li {
margin: 0;
list-style-image:url(‘http://1.bp.blogspot.com/-PzPP314ZtGE/TgX2iGxUcKI/AAAAAAAAEio/-xqTO1ZeCKo/s1600/bullet-point-image-1.png’);
}

Flower Bullet Point

ul.imglist {
margin: 0;
padding: 0;
}
ul.imglist li {
margin: 0;
list-style-image:url(‘http://4.bp.blogspot.com/-VhmsrsW7N0Y/TgX2iemJf7I/AAAAAAAAEis/AWehmGnAXxE/s1600/bullet-point-image-4.jpg’);
}

Orange Double Arrow Bullet Point

ul.imglist {
margin: 0;
padding: 0;
}
ul.imglist li {
margin: 0;
list-style-image:url(‘http://4.bp.blogspot.com/-V8D0HmJ6Yc8/TgX2iy4rMOI/AAAAAAAAEiw/9DH-JDXBaNE/s1600/bullet-point-image-5.gif’);
}

Yellow Tick Bullet Point

ul.imglist {
margin: 0;
padding: 0;
}
ul.imglist li {
margin: 0;
list-style-image:url(‘http://3.bp.blogspot.com/-YHI_hhrc87w/TgX2jPewnHI/AAAAAAAAEi0/nunfcNj-EKU/s1600/bullet-point-image-6.gif’);
}

Blue Plus Bullet point

ul.imglist {
margin: 0;
padding: 0;
}
ul.imglist li {
margin: 0;
list-style-image:url(‘http://4.bp.blogspot.com/-SIzxtuS5HrU/TgX2jub0HzI/AAAAAAAAEi8/CAXs53FBd1I/s1600/bullet-point-image-8.png’);
}

Orange Dimond Bullet Point

ul.imglist {
margin: 0;
padding: 0;
}
ul.imglist li {
margin: 0;
list-style-image:url(‘http://1.bp.blogspot.com/-mt6bmmlDxjc/TgX2jyw6nbI/AAAAAAAAEjA/YmNKlJmx2T8/s1600/bullet-point-image-9.gif’);
}

Double Bullet Point

ul.imglist {
margin: 0;
padding: 0;
}
ul.imglist li {
margin: 0;
list-style-image:url(‘http://4.bp.blogspot.com/-0hKEoefJUJY/TgX2kH2HQoI/AAAAAAAAEjE/zibnWAiDVmI/s1600/bullet-point-image-10.gif’);
}

Simple Circle Bullet Point

ul.imglist {
margin: 0;
padding: 0;
}
ul.imglist li {
margin: 0;
list-style-image:url(‘http://3.bp.blogspot.com/-aPuDCwZje08/Tgc6dm_blWI/AAAAAAAAEjk/peo_2GbQQVo/s1600/circle-bullet-point-image.png’);
}

Thats the Css, We now have to add a class to the lists we want to use images on.

When you create an unordered list this is the code you use :

<ul>
<li>Item One</li>
<li>Item Two</li>
</ul>

We simply add class=’imglist’ to the ul tag like this :

<ul class=”imglist”>
<li>Item One</li>
<li>Item Two</li>
</ul>

 

Video Tutorial

And that’s it you now have a neat image for the bullet points on your lists.Make sure to check out more of our Blog Design Tips.

20 comments:

  1. Great CSS code
    thanx

    ReplyDelete

  2. exterior siding optionsJune 27, 2011 at 5:18 AM

    Wow Thanks for sharing this code new code for image… I try to used this into my blog….. Thanks for sharing me this much….

    ReplyDelete

  3. Thanks for this great post i always read your blog and i use these tips on my blog cargoogler 😀

    ReplyDelete

  4. Oluvil Campus BlogJune 27, 2011 at 3:24 PM

    great post!

    ReplyDelete

  5. Hi Paul
    i have a question: every time i copy and paste a code to CSS and click apply to the blog it does not save the code which a applied.
    the other question i quit did not understand where to put this code
    “We now have to add a class to the lists we want to use images on.
    When you create an unordered list this is the code you use :”

    ReplyDelete

  6. I am not understanding how to create the lists ?

    ReplyDelete

  7. butcher block oilJune 28, 2011 at 3:18 AM

    Yeah i agree too… I didn’t know were i put this code…. I also copy this code but it can’t save to the place were i put it…

    ReplyDelete

  8. To make it easier I have added a video tutorial on creating the lists.I’m afraid i really cant explain it much clearer than that.

    ReplyDelete

  9. P.s. Sir. How to get email copy of first comment here ? Getting latter after email subscription. Kindly look this feature? With Regards pl.

    ReplyDelete

  10. thanks for sharing the info and knowladge

    ReplyDelete

  11. Anirudh ~ Except Nothing |June 30, 2011 at 3:48 PM

    Good Post ! First could not understand then after the Video tutorial i understood .. http://goo.gl/KYSdw I have added your Bullets to this post 😀

    ReplyDelete

  12. there is only one thing i didn’t get is that what should i use for replacing image-url-image? what image of 12×12??

    ReplyDelete

  13. @ Vertu – If you want to use your own image you need to find one somewere like Google image search, upload it to your blog and use the URL.The size needs to be 12 pixels high by 12 pixels wide.If you dont understand this you can just use one of the 10 i have here…

    ReplyDelete

  14. Thanks a lot..it helped..

    ReplyDelete

  15. LovefortechnologyJuly 3, 2011 at 1:29 PM

    Thank you, very powerful article

    ReplyDelete

  16. Hi there,

    I want to get this Green Tic Bullet 1 code to work

    I have uploaded the image to my wordpress
    I have pasted the code
    I replace the URL with my URL but still it doesn’t work

    I wathced your video and I got the code right for normal bullets
    But I would like to get Green Tic Bullet 1 code to work

    Do I need the two codes? The one in the video and the Green Tic Bullet 1 code

    I have tried so many times and no joy

    Thanks

    ReplyDelete

  17. Thanks.. I have started using in my blog..

    ReplyDelete

  18. I have a problem. Whenever i add new link to list it creates a dotted bottom border automatically, Its looking very ugly. Please tell me what should I need to modify. You can see this below image for understanding better.
    http://foto.pk/images/untitlsds.jpg

    If you need my codes please download it from the below link.
    http://bit.ly/wokM6N

    I am waiting a reply from you as soon as possible.

    ReplyDelete

  19. My bullet stop working 🙁
    http://www.vocaloidp3.com/ All of my post already used bullet but it doesnt show..
    help please 😀

    ReplyDelete

  20. you are just to great sir…… wana be like u

    ReplyDelete