Add custom unordered Bullet List Numbering in Blogger
Add custom unordered Bullet 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 |
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
BloggerSpice

Contact Form
Let's Connect
Trending
- How to Float 2 Wide Skyscraper Ad banner on Left and Right Side?
- How to Make YouTube Video Responsive in Blogger Site?
- How to Submit Website to DMOZ (The Open Directory Project)?
- Float AdSense and other Ads on left or right side of your Blog
- 15 Hot SEO Google Chrome Extensions for Website SEO Analysis and Audit
- 6 Killer Tips on How to Get More Views on YouTube for Free
- How to Add 2-Step Verification in Google Account?
- How to add Google progress scrollbar on top of your BlogSpot page?
- How to Fix Bengali Font Problem in Google Chrome Browser?
- The Insider's Guide to Generate Your Blog Traffic by 110%
thanks for share
giảm giá
Welcome Khanh, I am very glade that you find this widget helpful. :)