Add custom unordered Bullet List Numbering in Blogger

Add custom unordered Bullet Numbering in Blogger

Comments: 2
data:blog.title
bullet numbering

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.


bullet list
Before


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


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

Speak Your Mind

Welcome Khanh, I am very glade that you find this widget helpful. :)

Facebook Group Community Code ConverterHide Code Converter Show EmoticonHide Emoticon

If you Got questions? Ask ’em below! While we’re here, you might like to leave a comment and let me know if you have any stories or questions.

Make sure you tick the Notify Me box below the comment form to be notified of follow up comments and replies. Thank you for commenting

Contact Form

Name

Email *

Message *