Aug 8, 2016

How To Customize Numbered Lists Style in Blogger Posts

data:blog.title
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


  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


  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


  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!

No comments:

Post a Comment

We’re eager to see your comment. If you have any query related to the topic then drop a comment below. We will help you out of sure. However, Please Keep in mind that all comments are moderated manually by our human reviewers. According to our comment policy all link are nofollow so keep in mind that never use links in comments, we consider link comments as a spam.