Customizing Numbered Lists Inwards Posts + Iii Examples

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

Influenza A virus subtype H5N1 numbered listing is achieved through the HTML code of a "ordered list". You don't guide to worry most adding the HTML, because the editor does it for you lot yesteryear using this tool. If you lot become to the HTML tab, you'll run into that the listing you lot created appears something similar this:

   <ol>
<li>The content of the 1st. element</li>
<li>The content of the 2nd. element</li>
<li>The content of the 3rd. element</li>
<li>The content of the 4th. element</li>
    etc...
  </ol>

This tool volition automatically seat out each chemical component of the listing taking an "order", so the cite "ordered lists inward HTML". In each chemical component a seat out is successively generated (from 1 onwards), though you lot tin non run into this inward the HTML code.

Using ordered lists inward posts

Creating numbered lists is real suitable for giving whatsoever instructions. It is ideal for cooking blogs where the steps inward a recipe has to live on numbered, or inward those blogs that part tutorials... but tin live on used inward whatsoever type of weblog that involve to seat 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 inward 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 plough over this, nosotros volition rely on this interesting tutorial from 456 Berea ST, that explains a technique inward which using to a greater extent than or less fundamental properties of CSS, nosotros could customize both the numbers of each chemical component inward the list, also the content of each element.
The play tricks basically involves canceling the default numbering alongside "list-style: none", together with and so role automatic numbering properties: "counter-reset" together with "counter-increment". Then the belongings "content" is added to the index of the counter that is created using the previous 2 properties.

How to Add Some Amazing Styles to Blogger ordered lists

Simply select i of the styles below, together with so re-create together with glue the CSS code yesteryear going to Template > Customize > Advanced > Add CSS.

Some Blogger templates mightiness non let adding CSS inward that location. In that case, for adding the CSS manner you lot involve to access the Template's HTML - from your Blogger Dashboard, become to Template > Edit HTML together with glue the code simply inward a higher house the ]]></b:skin> tag (press the CTRL + F keys to respect it - you lot mightiness involve to click on the arrow to expand the code together with afterward that search it again)


Examples

Here are iii examples that I guide prepared for those of you lot 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 inward 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 component */
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 inward 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 component */
background:#f2f2f2; /* background color of each chemical component */
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 inward 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 component */
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 live on edited inward the CSS of these iii examples, together with added to a greater extent than or less comments highlighted in /* greenish */, so that you lot tin know what each affair does.

Compatibility:

This volition run inward all browsers including IE8 - inward the instance of Internet Explorer 7, the number' styles volition non live on seen equally it does non back upward the :before or :after pseudo-elements. However, I guide added a business inward the CSS that's specific for that browser together with volition convey upward the default numbering of the ordered list.

Hopefully this volition live on useful for you lot ;)