How To Use Images For List Bullet Points On Your Blog




| 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.

Drop Your Comments And Questions Below.


Join over 5000 Subscribers! Please sign up to receive Updates.

SUYB has its Focus on Quality. If we post Crap, you can unsubscribe.

No Spam and No Garbage! - Use RSS, Twitter & Facebook as an Alternative


If You Enjoyed This Post Please Take 5 Seconds To Share It.

20 comments:

  1. 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
  2. Thanks for this great post i always read your blog and i use these tips on my blog cargoogler :D

    ReplyDelete
  3. 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
  4. I am not understanding how to create the lists ?

    ReplyDelete
  5. 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
  6. 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
  7. 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
  8. thanks for sharing the info and knowladge

    ReplyDelete
  9. 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 :D

    ReplyDelete
  10. there is only one thing i didn't get is that what should i use for replacing image-url-image? what image of 12x12??

    ReplyDelete
  11. @ 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
  12. 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
  13. Thanks.. I have started using in my blog..

    ReplyDelete
  14. 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
  15. My bullet stop working :(
    http://www.vocaloidp3.com/ All of my post already used bullet but it doesnt show..
    help please :D

    ReplyDelete
  16. you are just to great sir...... wana be like u

    ReplyDelete



Important - If you ask a question make sure you tick the "Notify Me" box below the comment form to be notified of follow up comments and replies.


Hire Us