Blogger blog numbers listing

Customize the Blogger number list feature in Blogger blog post article. Adding new style with the help of CSS coding can give these numbers listening feature a new look. Your visitors get attracted towards the point that you have shown in numbers list feature. Basically this post article will help to those Blogger blog who teach or give some information about different topic with details. Adding number will help your readers to teach point step by step and also your reader will fascinate while reading the blog post article.

We are going to teach you these Blogger hack to learn how to customize your Blogger blog numbers listing feature in post article.

The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.

The above showing is the example of the numbers listening & below is the CSS customize style.

Add CSS code to Blogger Blog:

Go to your Blogger account and open the template tabs right of your Blogger dashboard.
Click on the edit HTML and open it. The new window appears with your template codes.
Now press Ctrl + F the new light box will appears and put this ]]></b:skin> code in the box and just above this code ]]></b:skin> past the below code.

Style 1:

The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.

.post-outer ol{
counter-reset:li;
margin-left:0;
padding-left:0
}
.post ol li{
position:relative;
margin:0 0 20px 2em !important;
padding:4px 8px !important;
list-style:none;
*list-style: decimal;
}
.post ol li:before{
content:counter(li);
counter-increment:li;
position:absolute;
top:-8px;
left:-39px;
font-family:'Oswald', serif;
font-size:40px; /* font size*/
width:34px;
margin:0 0 10px 0;
padding:4px !important;
color:#727272; /* font color */
text-align:center;
}

Style 2:

The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.

.post-outer ol{
counter-reset:li;
margin-left:0;
padding-left:0
}
.post ol li{ /* the style of each element */
position:relative;
margin:0 0 20px 2em !important;
padding:4px 8px !important;
list-style:none;
*list-style: decimal;
border:1px solid #e2e3e2; /* border color */
background:#f2f2f2; /* background color */
text-indent:10px;
}
.post ol li:before{ /* the numbers' style */
content:counter(li);
counter-increment:li;
position:absolute;
top:-5px;
left:-5px;
font-family:'Oswald', serif;
font-size:14px;
width:12px;
margin:0 0 10px 0;
padding:4px !important;
color:#727272; /* text color */
text-align:left;
background:#e2e2e2; /* background color */
text-indent:2px
}
.post ol li:after{
content:"";
position:absolute;
top:-5px;
left:14px;
width: 0px;
height: 0px;
border-style: solid;
border-width: 5px 0 0 5px;
border-color: transparent transparent transparent #aeaeae; /* triangle color */
}

Style 3:

The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.

.post ol{
counter-reset:li;
margin-left:0;
padding-left:0
}
.post ol li{
position:relative;
margin:0 0 13px 2em !important;
padding:4px 8px !important;
list-style:none;
*list-style:decimal;
}
.post ol li:before{
content:counter(li);
counter-increment:li;
position:absolute;
top:0;
left:-2em;
width:27px;
margin-right:8px;
padding:3px 1px 4px 0 !important;
color:#fff; /* text color */
font-size:16px;
background:url(Image URL) no-repeat left top;
font-weight:bold;
text-align:center
}

In third style add your own image with replace of Image URL.

We hope you get all the points to clear your head and learn the simple technique of simple CSS code. Customize will definitely effect your Blogger traffic we wish that for you.

About Post Author:

This post is fruit of pen-clipping of Mohammad Hamza, poineer of ProFeedLinks. He likes to shear about his thought and experience with others.

Tab 1 Top Area

Game Reviews

Friday, 27 September 2013