Read Also
Install Bullet list and numbered list custom CSS in blogspot blogger. Bullet list and numbered list are important for customization of post. They customize the post beautifully. But default bullet list and numbered list CSS in blogger is looking too simple.
Its looks like boring in my opinion. So i will sharing method to install custom CSS for bullet list and numbered list as given in picture in post.
But it can be difficult if you don't know about some basic html of blogger.
Please follow the steps carefully and install bullet list and numbered list custom CSS for blogger.
Congrats! You have now successfully installed custom css for bullet list and numbered list in blogger.
Its looks like boring in my opinion. So i will sharing method to install custom CSS for bullet list and numbered list as given in picture in post.
Install Bullet List & Numbered List Custom CSS in Blogger
Please follow the steps carefully and install bullet list and numbered list custom CSS for blogger.
Bullet list & Numbered List Custom CSS For Blogger
- Go to Blogger > HTML Editor and search for List or OL.
- Now just replace all related List CSS in your blogger with below CSS.
ul,dl{margin:.5em 0 .5em 3em}
ol{list-style:decimal outside}
ul{list-style:disc outside}
li{margin:.5em 0}
div.clear{clear:both}
.clear{clear:both}
dt{font-weight:bold}
dd{margin:0 0 .5em 2em}
.post ul li span{position:relative;margin:0;padding:5px 8px;margin-bottom:10px;text-decoration:none;transition:all .3s ease-out}
ol{counter-reset:li;list-style:none;font-size:14px;padding:0;}
ol ol{margin:0 0 0 2em}
.post ol li{position:relative;display:block;padding:.4em .4em .4em .8em;margin:.5em 0 .5em 2.5em;background:rgba(232, 232, 232, 0.48);color:#666;text-decoration:none;transition:all .3s ease-out;padding-bottom: 5px; margin-bottom: 5px;}
.post ol li:before{content:counter(li);counter-increment:li;position:absolute;left:-2.5em;top:50%;margin-top:-1em;height:2em;width:2em;line-height:2em;text-align:center;color:#fff;background-color:#e8503c;font-weight: 600;}
.post-body ul li {list-style:none;position:relative;display:block;padding:.4em .4em .4em .8em;margin:.5em 0 .5em 2.2em;background:rgba(232, 232, 232, 0.48);color:#666;text-decoration:none;transition:all .3s ease-out;padding-bottom: 5px!important; margin-bottom: 5px!important; font-size: 15px;}
.post-body ul li:before {content:"\f00c";font-family:FontAwesome;position:absolute;left:-2.5em;top:50%;margin-top:-1em;height:2em;width:2em;line-height:2em;text-align:center;color:#fff;background-color:#e8503c;font-size:13px;}
.sharepost ul li:before {content:initial;font-family:FontAwesome;position:absolute;left:-2.5em;top:50%;margin-top:-1em;height:2em;width:2em;line-height:2em;text-align:center;color:#fff;background-color:initial;font-size:13px;}
.sharepost ul li {list-style:none;position: initial; display: initial; padding: initial; background: initial; color: #666; text-decoration: none; transition: all .3s ease-out; margin: 0; margin-right: 5px;}
.widget .post-body ul {padding:0}Congrats! You have now successfully installed custom css for bullet list and numbered list in blogger.