How To Customize Numbered Lists Style in Blogger Posts

Ordered Lists Blogger Posts

Every blogger wants to keep posts unique in every way should be the aim of every blogger. So, today in this article we are going to share about 3 customized number list style (Ordered List Style). The number list (ol) is an important part of a good article and we can create numbered lists using the “Numbered List” tool.

Customize Numbered Lists Style in Blogger Posts

A numbered list is achieved through the HTML code of a “ordered list”. You don’t have to worry about adding the HTML, because the editor does it for you by using this tool. If you go to the HTML tab, you’ll see that the list you created appears something like 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>
<li>The content of the 5th. element</li>
etc…
</ol>

This tool will automatically number each element of the list taking an “order”, hence the name “ordered lists in HTML”. In each element a number is successively generated (from 1 onwards), though you can not see this in the HTML code.

How To Customize Number Lists Style in Blogger Posts

  1. Go to Blogger >> Template >> Edit HTML.
  2. Search for ]]></b:skin> tag and paste the code just above of this tag.

Here’s, we have prepared 3 styles to customize numbered list style in blogger. Select your choice and paste the code just above of ]]></b:skin> tag.

Customized Number List (Ordered List) Style1

.post3 ol{
counter-reset: li;
list-style: none;
*list-style: decimal;
font: 13px ‘trebuchet MS’, ‘lucida sans’; /* font size of each element */
padding: 0;
margin-bottom: 4em;
text-shadow: 0 1px 0 rgba(255,255,255,.5);
font-weight: bold;
}
.post3 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;
}
.post3 ol li:hover:before{
transform: rotate(360deg);
}
.post3 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: #111; /* text color of numbers */
background: #8ff; /* background color of numbers */
border: .2em solid #111; /* border 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;
}

  1. Yes! Now we can customized Ordered list style in blogger.
  2. Yes! Now we can customized Ordered list style in blogger.
  3. Yes! Now we can customized Ordered list style in blogger.

.post ol{
counter-reset: li;
list-style: none;
*list-style: decimal;
font: 13px ‘trebuchet MS’, ‘lucida sans’; /* font size of each element */
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: #111; /* text color of numbers */
background: #8ff; /* background color of numbers */
border: .2em solid #111; /* border 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;
}

Customized Number List (Ordered List) Style2

.post2 ol{
counter-reset:li;
list-style: none;
*list-style: decimal;
margin-left:0;
padding-left:0
}
.post2 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 solid #e2e3e2; /* bottom border of each element */
background:#f05f05; /* background color of each element */
text-indent:14px;
}
.post2 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:#111; /* color of the numbers */
text-align:left;
background:#f99; /* background color of the numbers */
text-indent:6px;
text-shadow: 1px 3px 2px #fff;
}
.post2 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 #f99; /* color of the triangle behind */
}

  1. Yes! Now we can customized Ordered list style in blogger.
  2. Yes! Now we can customized Ordered list style in blogger.
  3. Yes! Now we can customized Ordered list style in blogger.

.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 solid #e2e3e2; /* bottom border of each element */
background:#f05f05; /* background color of each element */
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:#111; /* color of the numbers */
text-align:left;
background:#f99; /* 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 #f99; /* color of the triangle behind */
}

Customized Number List (Ordered List) Style3

.post1 ol{
counter-reset: li;
list-style: none;
*list-style: decimal;
padding: 0;
margin-bottom: 4em;
font: 16px ‘trebuchet MS’, ‘lucida sans’; /* font size of each element */
text-shadow: 0 1px 0 rgba(255,255,255,.5);
}
.post1 ol li{
position: relative;
display: block;
padding: .4em .4em .4em .8em;
*padding: .4em;
margin: .5em 0 .5em 4.5em;
text-decoration: none;
}
.post1 ol li:before{
content: counter(li);
counter-increment: li;
position: absolute;
left: -37px;
top: 50%;
margin-top: -1em;
background: #f05; /* background color of the numbers */
height: 2em;
width: 2em;
line-height: 2em;
text-align: center;
font-weight: bold;
}
.post1 ol li:after{
position: absolute;
content: ”;
left: -5px;
margin-top: -.7em;
top: 50%;
width: 0;
height: 0;
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
border-left:8px solid #f05; /* background color of the right arrow*/
}

  1. Yes! Now we can customized Ordered list style in blogger.
  2. Yes! Now we can customized Ordered list style in blogger.
  3. Yes! Now we can customized Ordered list style in blogger.

.post ol{
counter-reset: li;
list-style: none;
*list-style: decimal;
padding: 0;
margin-bottom: 4em;
font: 16px ‘trebuchet MS’, ‘lucida sans’; /* font size of each element */
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: -37px;
top: 50%;
margin-top: -1em;
background: #f05; /* 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 solid transparent;
border-bottom: 8px solid transparent;
border-left:8px solid #f05; /* background color of the right arrow*/
}

Conclusion:

So above guide is about  “How To Customize Number Lists Style in Blogger Posts?” We hope, you’ll like above styles and you’ll easily add this style to blogger blog. If anyhow problem persist after following all steps then ask us via dropping a comment below. Do Share.
Thank You! Stay Blessed!

Paramjot Singh
 

Hey, How you all are? Myself Paramjot Singh, A young (Not Old :P) addicted Blogger from Lucknow, India who want to learn Aha to Shit of the Blogging. I’m blogging since 2 years, and here on My Blogger Guides, I’m sharing my little mind knowledge which I learned in these past two years. :)

Click Here to Leave a Comment Below 0 comments

Leave a Reply:

0 Shares
+1
Pin
Tweet
Stumble
Share
Share