Customizing Numbered Lists Inwards Posts + Three Examples

From the Compose tab of a Blogger post, nosotros tin practise numbered lists using the "Numbered List" tool.

H5N1 numbered listing is achieved through the HTML code of a "ordered list". You don't accept to worry well-nigh adding the HTML, because the editor does it for y'all yesteryear using this tool. If y'all become to the HTML tab, you'll come across that the listing y'all created appears something similar this:

  

1. The content of the 1st. element


2. The content of the 2nd. element


3. The content of the 3rd. element


4. The content of the 4th. element

    etc...
 

This tool volition automatically lay out each chemical factor of the listing taking an "order", thence the refer "ordered lists inwards HTML". In each chemical factor a lay out is successively generated (from 1 onwards), though y'all tin non come across this inwards the HTML code.

Using ordered lists inwards posts

Creating numbered lists is real suitable for giving whatever instructions. It is ideal for cooking blogs where the steps inwards a recipe has to last numbered, or inwards those blogs that part tutorials... but tin last used inwards whatever type of weblog that ask to lay out something.

By default, when using this tool, the numbered elements volition await like:

1. Nulla tincidunt, neque nec laoreet iaculis, tellus libero sagittis nisl, sed commodo lacus nulla ac sapien. Pellentesque vel magna vitae diam hendrerit bibendum tempus at magna. 
2. Nulla pellentesque egestas sagittis. Cras blandit bibendum ante nec placerat. Nulla volutpat diam non quam suscipit et ornare nisi porttitor. Quisque eget elit nulla, et imperdiet nisi. 
3. Vivamus sit down amet nibh vel enim aliquam auctor. Phasellus fringilla eros leo, nec varius lacus. Vestibulum id dolor a nisl venenatis varius inwards nec enim. Pellentesque feugiat arcu ac purus rhoncus dapibus. 
4. Etiam rutrum quam ac est bibendum cursus. In porttitor nunc odio, vel porttitor nisi. Pellentesque velit est, sodales luctus feugiat et, porta quis lacus. Vivamus non mauris urna, non commodo dui. 

However, nosotros tin customize the elements on the listing alongside CSS. To accomplish this, nosotros volition rely on this interesting tutorial from 456 Berea ST, that explains a technique inwards which using closed to fundamental properties of CSS, nosotros could customize both the numbers of each chemical factor inwards the list, also the content of each element.
The play tricks basically involves canceling the default numbering alongside "list-style: none", too and then role automatic numbering properties: "counter-reset" too "counter-increment". Then the holding "content" is added to the index of the counter that is created using the previous ii properties.

How to Add Some Amazing Styles to Blogger ordered lists

Simply conduct 1 of the styles below, too then re-create too glue the CSS code yesteryear going to Template > Customize > Advanced > Add CSS.

Some Blogger templates mightiness non let adding CSS inwards that location. In that case, for adding the CSS mode y'all ask to access the Template's HTML - from your Blogger Dashboard, become to Template > Edit HTML too glue the code simply inwards a higher house the ]]> tag (press the CTRL + F keys to respect it - y'all mightiness ask to click on the arrow to expand the code too afterwards that search it again)


Examples

Here are 3 examples that I accept prepared for those of y'all who desire to customize numbered lists:
 
Style 1

1. Nulla tincidunt, neque nec laoreet iaculis, tellus libero sagittis nisl, sed commodo lacus nulla ac sapien. Pellentesque vel magna vitae diam hendrerit bibendum tempus at magna. 
2. Nulla pellentesque egestas sagittis. Cras blandit bibendum ante nec placerat. Nulla volutpat diam non quam suscipit et ornare nisi porttitor. Quisque eget elit nulla, et imperdiet nisi. 
3. Vivamus sit down amet nibh vel enim aliquam auctor. Phasellus fringilla eros leo, nec varius lacus. Vestibulum id dolor a nisl venenatis varius inwards nec enim. Pellentesque feugiat arcu ac purus rhoncus dapibus. 
4. Etiam rutrum quam ac est bibendum cursus. In porttitor nunc odio, vel porttitor nisi. Pellentesque velit est, sodales luctus feugiat et, porta quis lacus. Vivamus non mauris urna, non commodo dui. 

.post ol{
counter-reset: li;
list-style: none;
*list-style: decimal;
font: 13px 'trebuchet MS', 'lucida sans'; /* font size of each chemical factor */
padding: 0;
margin-bottom: 4em;
text-shadow: 0 1px 0 rgba(255,255,255,.5);
font-weight: bold;
}
.post ol li{
position: relative;
display: block;
padding: .4em .4em .4em 4em;
*padding: .4em;
margin: .5em 0;
text-decoration: none;
border-radius: .3em;
transition: all .3s ease-out;
}
.post ol li:hover:before{
transform: rotate(360deg);
}
.post ol li:before{
content: counter(li);
counter-increment: li;
position: absolute;  
left: 10px;
top: 50%;
margin-top: -1.3em;
height: 2em;
width: 2em;
line-height: 2em;
color: #fff; /* text color of numbers */
background: #FA8022; /* background color of numbers */
border: .2em company #fff; /* edge color */
-webkit-box-shadow: 0 8px 5px -7px #888;
-moz-box-shadow: 0 8px 5px -7px #888;
box-shadow: 0 8px 5px -7px #888;
text-align: center;
font-weight: bold;
border-radius: 2em;
transition: all .3s ease-out;
}

Style 2

1. Nulla tincidunt, neque nec laoreet iaculis, tellus libero sagittis nisl, sed commodo lacus nulla ac sapien. Pellentesque vel magna vitae diam hendrerit bibendum tempus at magna. 
2. Nulla pellentesque egestas sagittis. Cras blandit bibendum ante nec placerat. Nulla volutpat diam non quam suscipit et ornare nisi porttitor. Quisque eget elit nulla, et imperdiet nisi. 
3. Vivamus sit down amet nibh vel enim aliquam auctor. Phasellus fringilla eros leo, nec varius lacus. Vestibulum id dolor a nisl venenatis varius inwards nec enim. Pellentesque feugiat arcu ac purus rhoncus dapibus. 
4. Etiam rutrum quam ac est bibendum cursus. In porttitor nunc odio, vel porttitor nisi. Pellentesque velit est, sodales luctus feugiat et, porta quis lacus. Vivamus non mauris urna, non commodo dui. 

.post ol{
counter-reset:li;
list-style: none;
*list-style: decimal;
margin-left:0;
padding-left:0
}
.post ol li{
position:relative;
margin:0 0 20px 15px !important;
padding:4px 5px 4px 10px !important;
list-style:none;
*list-style: decimal;
border-bottom:1px company #e2e3e2; /* bottom edge of each chemical factor */
background:#f2f2f2; /* background color of each chemical factor */
text-indent:14px;
}
.post ol li:before{
content:counter(li);
counter-increment:li;
position:absolute;
top:-6px;
left:-10px;
font-family:'Oswald', serif;
font-size:14px; /* size of the numbers */
width:20px;
margin:0 0 10px 0;
padding:4px !important;
color:#A5A5A5; /* color of the numbers */
text-align:left;
background:#e2e2e2; /* background color of the numbers */
text-indent:6px;
text-shadow: 1px 3px 2px #fff;
}
.post ol li:after{
content:"";
position:absolute;
top:-5px;
left:17px;
width: 0px;
height: 0px;
border-style: solid;
border-width: 5px 0 0 5px;
border-color: transparent transparent transparent #aeaeae; /* color of the triangle behind */
}

Style 3

1. Nulla tincidunt, neque nec laoreet iaculis, tellus libero sagittis nisl, sed commodo lacus nulla ac sapien. Pellentesque vel magna vitae diam hendrerit bibendum tempus at magna. 
2. Nulla pellentesque egestas sagittis. Cras blandit bibendum ante nec placerat. Nulla volutpat diam non quam suscipit et ornare nisi porttitor. Quisque eget elit nulla, et imperdiet nisi. 
3. Vivamus sit down amet nibh vel enim aliquam auctor. Phasellus fringilla eros leo, nec varius lacus. Vestibulum id dolor a nisl venenatis varius inwards nec enim. Pellentesque feugiat arcu ac purus rhoncus dapibus. 
4. Etiam rutrum quam ac est bibendum cursus. In porttitor nunc odio, vel porttitor nisi. Pellentesque velit est, sodales luctus feugiat et, porta quis lacus. Vivamus non mauris urna, non commodo dui. 

.post ol{
counter-reset: li;
list-style: none;
*list-style: decimal;
padding: 0;
margin-bottom: 4em;
font: 13px 'trebuchet MS', 'lucida sans'; /* font size of each chemical factor */
text-shadow: 0 1px 0 rgba(255,255,255,.5);
}
.post ol li{
position: relative;
display: block;
padding: .4em .4em .4em .8em;
*padding: .4em;
margin: .5em 0 .5em 4.5em;
text-decoration: none;
}
.post ol li:before{
content: counter(li);
counter-increment: li;
position: absolute;  
left: -30px;
top: 50%;
margin-top: -1em;
background: #bada55; /* background color of the numbers */
height: 2em;
width: 2em;
line-height: 2em;
text-align: center;
font-weight: bold;
}
.post ol li:after{
position: absolute;
content: '';
left: -5px;
margin-top: -.7em;  
top: 50%;
width: 0;
height: 0;
border-top: 8px company transparent;
border-bottom: 8px company transparent;
border-left:8px company #bada55; /* background color of the correct arrow*/
}

Note: In blue are highlighted the values that tin last edited inwards the CSS of these 3 examples, too added closed to comments highlighted in /* light-green */, so that y'all tin know what each matter does.

Compatibility:

This volition move inwards all browsers including IE8 - inwards the instance of Internet Explorer 7, the number' styles volition non last seen equally it does non back upward the :before or :after pseudo-elements. However, I accept added a trouble inwards the CSS that's specific for that browser too volition convey upward the default numbering of the ordered list.

Hopefully this volition last useful for y'all ;)