Customizing Numbered Lists Inwards Posts + Iii Examples

From the Compose tab of a Blogger post, nosotros tin ambit notice practise 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 accept to worry nearly adding the HTML, because the editor does it for you lot past times using this tool. If you lot larn to the HTML tab, you'll come across 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 advert "ordered lists inwards HTML". In each chemical component a seat out is successively generated (from 1 onwards), though you lot tin ambit notice non come across this inwards the HTML code.

Using ordered lists inwards posts

Creating numbered lists is rattling suitable for giving whatsoever 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 ambit notice last used inwards whatsoever type of weblog that necessitate to seat out something.

By default, when using this tool, the numbered elements volition expect 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 ambit notice customize the elements on the listing amongst CSS. To gain this, nosotros volition rely on this interesting tutorial from 456 Berea ST, that explains a technique inwards which using around fundamental properties of CSS, nosotros could customize both the numbers of each chemical component inwards the list, also the content of each element.
The fob basically involves canceling the default numbering amongst "list-style: none", together with and so purpose 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 past times 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 agency you lot necessitate to access the Template's HTML - from your Blogger Dashboard, larn to Template > Edit HTML together with glue the code but inwards a higher house the ]]></b:skin> tag (press the CTRL + F keys to notice it - you lot mightiness necessitate to click on the arrow to expand the code together with afterward that search it again)


Examples

Here are iii examples that I accept 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 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 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 venture #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 venture #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 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 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 venture transparent;
border-bottom: 8px venture transparent;
border-left:8px venture #bada55; /* background color of the correct arrow*/
}

Note: In blue are highlighted the values that tin ambit notice last edited inwards the CSS of these iii examples, together with added around comments highlighted in /* light-green */, so that you lot tin ambit notice know what each affair does.

Compatibility:

This volition operate inwards all browsers including IE8 - inwards the illustration 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 delineate of piece of occupation inwards the CSS that's specific for that browser together with volition convey upward the default numbering of the ordered list.

Hopefully this volition last useful for you lot ;)

Share this post