Add custom unordered Bullet List Numbering in Blogger

Add custom unordered Bullet Numbering in Blogger

0
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. 
Add custom unordered Bullet List Numbering in Blogger
4 Stars stars - "Add custom unordered Bullet List Numbering in Blogger" Generally we add bullet numbering in Blogger  in case  of unordered lists. This is just for at...

Post a Comment

Facebook Group Community Disqus Channel Code ConverterHide Code Converter Show EmoticonHide Emoticon

Got questions? Ask ’em below! While we’re here, you might like to give any feedback about this Post, Your comment inspire us to continuous Improvement of This Blog and Contents. Your words are your own, so be nice and helpful if you can. Please, only use your REAL NAME, not your business name or keywords. Using business name or keywords instead of your real name will lead to the comment being deleted. Anonymous commenting is not allowed either. Limit the amount of links submitted in your comment. We accept clean XHTML in comments, but don't overdo it please.

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 *