How to add images in place of bullets and numbers in Blogger

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

view demo

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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAPEhcxMvmbp7cLY5nmREeLAfr3zKwhRbojdi0VORm8PNlD_95YQpx2F6Srhj1xBxrqpLX2BcVIuK9DYqv4eDRkG11B3aPSvU55Ku3Drrh_Uk8pUY7dd-4knejMgZVl5BTq1REQPtU2CzE/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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpapjACE0XXu3x3jxb3lwgIzlgv3q8dJB2nzmSumzyqcLeOB8dGHNRBMquyQNPNXjgMXzCeMwcUl2-Xr63uHmMbGIkXerX-b4EMsikOBbn0oN7Ccmhbs1bY8vzd130r0zbBc_-giHwpaww/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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgX6_bvhf4y2iZjJ804hdy-yumo-oiPD1OiGLoLxhE5Xudfa2ShuGw7Wn8LPh2NamaLkt-9BJbxIwl-g8EhM3QThUlWSUbDC6TxcXBUnNIk3fD9LiYhfruf9X7otHHP2CPyLG9WCKBBmdre/s1600/bullet-point-image-1.png');
}

Flower Bullet Point

ul.imglist {
margin: 0;
padding: 0;
}
ul.imglist li {
margin: 0;
list-style-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFNUjBhEc6_lRLOO20Cd51Sccn-MXSquT_vFffN149b32x5JpNpT1bfFA2wG1Iz2UlZhoze0PneuvZL4wGZunPv4QEEOs23mC2JprylMATlg5Xvj5HSMqWTDCpvffZh-mf1GoY7-lc14ea/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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmeQUQaf981PstsJ5Loz2Qrt2pXE7tILoDp3KnJtwdesiOes6wJHozYG0nMLtQwIiohPMSSRgsjdf27cDrYU73-vDVHOmwnEyLojLu9OgXnEb4uj0KlrPzLECyXM7i5RhHEiV1JsBlQSn9/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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpapjACE0XXu3x3jxb3lwgIzlgv3q8dJB2nzmSumzyqcLeOB8dGHNRBMquyQNPNXjgMXzCeMwcUl2-Xr63uHmMbGIkXerX-b4EMsikOBbn0oN7Ccmhbs1bY8vzd130r0zbBc_-giHwpaww/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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-e6_fQv4MfRzMQ4HCkJAOiQ8oFsnXvzQx3bt0_tkQD07QOAwE_iCoYkg0__axKd_phGGxKmdFBSL9arqMzmjzEPhR0xZwaryVo-mMqPpMIWhUTkJ3-MhiYiesRzVPRe_1Nh4SLgQDYCZN/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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDLuYOWnyvOUFHTPnyxUEHVa4ooqmF9zisx3iTvzU___chiwAi0NtLPQTRWthAj9oX4WCjL6cS9SHkSrr7UtcHpv_Fix8GbmMXD_isTIY9EUAfCTxliG9deUEIz7s6coO3YmGDijRp4Njh/s1600/bullet-point-image-9.gif');
}

Double Bullet Point

ul.imglist {
margin: 0;
padding: 0;
}
ul.imglist li {
margin: 0;
list-style-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-kZ3JzRNp1rwkpW5g9EtKQNYdF0_Ozk8lPsBpIfQvI9TkrdBJnO9MSF2DLLo1f7hKQwhZ3AwxhElR0rT5cnAyrZZtqNdoPd9qCxTvEbziFKVsmknxD92cQxBWAqiIk61wONVqnRjk0v8I/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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpTTe-RM_h1zXSlFcmYWQRhm9LwTALjJL9izVA2msnENkYEteiWmSQY9WOurv4F7mm2xzIgAa58ky0M7XWncnLzLCsyoigR96QY2XuPChYZPoDYC63fBbCO3VBIsM8b7IkJNLqV2S73e_p/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 (After listing,go to Html version of your blog post and find similar code.

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

Drop Your Comments And Questions Below.