Add custom unordered Bullet List Numbering in Blogger

Generally we add bullet numbering in Blogger in case of unordered lists. This is just for attracting readers and emphasizing on the list. Suppose if you wants to write about some related Blog list or  some features of any template then you must use the unordered Bullet numbering. By default in Blogger it will display like black dot. But by customization we can make it more attractive. Instead of black dot we can use various symbolic icons.

Before

After

In this widget I have use custom filled start and when mouse over on lists then the star will be unfiled. This is just like a animation, but originally by mouse over it will change the image. I hope you will love this widget and by customizing default listing your  Blog will be more beautiful.

Step 1 Log in to your Blogger account and Go to your Blogger Dashboard

Step 2 Click on -> Template -> Edit HTML

Step 3 Now find ]]></b:skin> by Pressing Ctrl+F (Windows) or CMD+F (Mac)    

Step 4 And Paste the below code above/before ]]></b:skin> 

.post { background: #fff; margin: 0 0 15px; padding: 15px; }

/*Bullet List by www.bloggerspice.com*/
.post ul {
list-style:none;
}
.post ul li {
line-height: 1.4em;
background: transparent url(http://3.bp.blogspot.com/-O78x421luhU/UxQhKP_tOrI/AAAAAAAAHgc/db4p3_DTq8Q/s1600/BloggerSpice+Star+Filled.png) no-repeat scroll 0px -1px;
font:14px "Oswald",sans-serif;
margin: 0.3em 0;
padding: 0 0 0.8em 20px;
}
.post ul li:hover {
background: transparent url(http://3.bp.blogspot.com/-08e0G8o2Sdg/UxQhKKuTvQI/AAAAAAAAHgg/1F8dKyo3hrw/s1600/BloggerSpice+Star+Unfilled.png) no-repeat scroll 0px -1px;
}
.post ul li:active{
background: transparent url(http://3.bp.blogspot.com/-O78x421luhU/UxQhKP_tOrI/AAAAAAAAHgc/db4p3_DTq8Q/s1600/BloggerSpice+Star+Filled.png) no-repeat scroll 0px -1px;
}

Step 5 Now simply hit the Save Template button.

How to Use Custom Bullet number?

Using this Custom Bullet number is very easy. Because Blogger has preset option to use unordered bullet list. And I have just modified it by using CSS coding. For using custom bullet numbering you have to go in your Blogger post editor. So just follow the below steps-

Step 1 Make your text in separate line like 2/3 lines.

Step 2 Now block the whole line by using mouse pointer.

Step 3 Finally click on Bullet list icon from formatting tools bar in writing panel.

Now your text list will be under bullet list style. But when you publish the post then you will see star bullet is displaying.

That’s all about custom bullet list. If you have any query then feels free to leave a comment below. Thank you.