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 |
 |
| 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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRj0R633pVAjEXwJN9oe1Q6gVh_Qhht9e1T5PLInU1_StbpfwSFP154mAzqfkIiDSNuKqyQZ-77TgrOSoYg4_izQ5vPU_6t90faFjMDbDCSQeKMp6YVjKUqauiRsEncOsqlTUkUkjaKk4/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidnIkbRSQSUEvqigSE7XHsXBeK_81n0dSJmo-N9qVWW6ek5tK8WC41qsTlh0n3LATOBUuWqzZvtafgPFsRzjA36xXEyo_zOfkM3gqylZAKAzePoDt5O2be8P65u2os4kaO6T1qIHeX_s4/s1600/BloggerSpice+Star+Unfilled.png) no-repeat scroll 0px -1px;
}
.post ul li:active{
background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRj0R633pVAjEXwJN9oe1Q6gVh_Qhht9e1T5PLInU1_StbpfwSFP154mAzqfkIiDSNuKqyQZ-77TgrOSoYg4_izQ5vPU_6t90faFjMDbDCSQeKMp6YVjKUqauiRsEncOsqlTUkUkjaKk4/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.
2 comments
giảm giá