Customise Blogger Ordered Lists In 3 Breathtaking Styles

Blogger is  a great platform to put forth your ideas.It allows you to express yourself with 100% commitment.The niche you choose for your blog is very important as it helps you grow as a entrepaneur. The- default post editor that blogger provides is very useful and helps authors express themselves freely.The blockquotes , list etc helps organise the post and present a post that readers find it easy to read and understand.One important factor in organising a post is the use of lists.
The default lists are boring and hence we are going to spice them up using CSS.

HOW TO USE BLOGGER ORDERED LISTS 

The numbered list button helps you organise your lists by giving them numbers in serial order.Simply click on the button and continue typing in the list contains.Keep pressing enter after each list item.This introduces a new number for your list item.Once you are done using the lists , simply reclick on the ordered lists button and you are done. 

Customising Blogger Ordered Lists 

• Go to blogger 
• Navigate to Template > Edit Html 
• Search for ]]></b:skin>
• Paste any of the styles given below above it 

STYLE 1 

.post ol li{
position:relative;
margin:0 0 20px 2em !important;
padding:4px 8px !important;
list-style:none;
*list-style: decimal;
border:1px solid #e2e3e2;
background:#f2f2f2;
text-indent:10px;
}
.post ol li:before{
content:counter(li);
counter-increment:li;
position:absolute;
top:-5px;
left:-5px;
font-family:'Oswald', serif;
font-size:14px;
width:12px;
margin:0 0 10px 0;
padding:4px !important;
color:#fff;
text-align:left;
background:#3287c1;
text-indent:2px
}
.post ol li:after{
content:"";
position:absolute;
top:-5px;
left:14px;
width: 0px;
height: 0px;
border-style: solid;
border-width: 5px 0 0 5px;
border-color: transparent transparent transparent #3287c1;
}

STYLE 2

 .post-outer ol{
 counter-reset:li;
 margin-left:0;
 padding-left:0
}
.post ol li{
 position:relative;  
 margin:0 0 20px 2em !important;
 padding:4px 8px !important;
 list-style:none;
 *list-style: decimal;
}
.post ol li:before{
 content:counter(li);
 counter-increment:li;
 position:absolute;
 top:-8px;
 left:-39px;
 font-family:'Oswald', serif;
 font-size:40px;
 width:34px;
 margin:0 0 10px 0;
 padding:4px !important;
 color:#727272;
 text-align:center;
}

STYLE 3  

.post ol{
counter-reset:li;
margin-left:0;
padding-left:0
}
.post ol li{
position:relative;  
margin:0 0 13px 2em !important;
padding:4px 8px !important;
list-style:none;
*list-style:decimal;
}
.post ol li:before{
content:counter(li);
counter-increment:li;
position:absolute;
top:0;
left:-2em;
width:27px;
margin-right:8px;
padding:3px 1px 4px 0 !important;
color:#fff; /*color de la fuente*/
font-size:16px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-ZCGUlLdTcmA1TwH-UlwBFB5dxsnSYFvgpJ1pOi2jlpaz80v63E_BzeAU_HQK1U4-nFMK9pS1ifCeY5MBJFyMfiQGEP4pt_dGYRFnxKLNXw4mfeIaSqamjiAeK6YzqQreTfdZNi3CX94/s1600/pasos-2.png) no-repeat left top;
font-weight:bold;
text-align:center
}

• Replace the given link with any one of the images given below , so as to change the  background color

               

Written by Aman

We are Creative Blogger Theme Wavers which provides user friendly, effective and easy to use themes. Each support has free and providing HD support screen casting.