Geeks World

Add Numbering To Blogger Popular Posts Widget

We can use programming code to design our hand built widgets and plugins so that they can be further downloaded and encoded easily by the users basically who is the practitioner under a specific blogging platform. All the same we can apply the advanced programming script named CSS3 to develop our widgets and plugins in such a way that they can be attracted and prompted to use by both newbies and professionals. I developed a normal CSS script and reformed it with CSS3 mode and now it can apply a style of numbering to my widget of which it holds and monetizes blogger official popular posts widget. If you wish to use this style on you self blogger blog the do following.

Add Auto Numbering To Blogger Popular Posts

1. Go to Blogger>Template Backup Your Template

2. Now click on Edit HTML

3. Search for the following code

<b:skin> or </b:skin>

4. Click on black arrow icon and it will be expanded

5. Now add any of the following CSS after <b:skin> or before </b:skin>

Style #1

/*--- CustomizeBlogging Popular Posts --- */
.popular-posts ul {
padding-left: 0px;
counter-reset: popcount;
}
.popular-posts a {
color: #777;
}
.popular-posts a:hover {
color: #111;
}
.popular-posts ul li:before {
list-style-type: none;
margin-right: 10px;
padding: 0.3em 0.6em;
counter-increment: popcount;
content: counter(popcount);
color: #FFF;
position: relative;
float: left;
font: italic bold 15px Tahoma;
margin-left:5px;
background: #56c55f;
border-radius: 25px 25px 25px 25px;
border: 2px solid #EEE;
box-shadow: 0 3px 2px rgba(0, 0, 0, 0.3);
margin-top:-2px;
}
.popular-posts ul li {
border: 1px solid #eaeaea;
background:#fff;background:-moz-linear-gradient(top,#fff 0%,#f2f2f2 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#fff),color-stop(100%,#f2f2f2));background:-webkit-linear-gradient(top,#fff 0%,#f2f2f2 100%);background:-o-linear-gradient(top,#fff 0%,#f2f2f2 100%);background:-ms-linear-gradient(top,#fff 0%,#f2f2f2 100%);background:linear-gradient(to bottom,#fff 0%,#f2f2f2 100%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#fff',endColorstr='#f2f2f2',GradientType=0 );
font: normal 12px verdana;
height: 30px;
-moz-transition: all 0.700s ease-out;
-o-transition: all 0.700s ease-out;
-webkit-transition: all 0.700s ease-out;
-ms-transition: all 0.700s ease-out;
transition: all 0.700s ease-out;
}
.popular-posts ul li:hover {
border: 1px dashed #bbbbbb;
-moz-transition: all 0.700s ease-out;
-o-transition: all 0.700s ease-out;
-webkit-transition: all 0.700s ease-out;
-ms-transition: all 0.700s ease-out;
transition: all 0.700s ease-out;
}
.popular-posts ul li a:hover {
text-decoration:none;
color: #000;
-moz-transition: all 0.700s ease-out;
-o-transition: all 0.700s ease-out;
-webkit-transition: all 0.700s ease-out;
-ms-transition: all 0.700s ease-out;
transition: all 0.700s ease-out;
}

Style #2

/*--- CustomizeBlogging Popular Posts --- */
.popular-posts ul {
padding-left: 0px;
counter-reset: popcount;
}
.popular-posts a {
color: #777;
}
.popular-posts a:hover {
color: #111;
}
.popular-posts ul li:before {
list-style-type: none;
margin-right: 10px;
padding: 0.3em 0.6em;
counter-increment: popcount;
content: counter(popcount);
color: #FFF;
position: relative;
float: left;
font: italic bold 15px Tahoma;
margin-left:5px;
background: #ee504d;
margin-top:-2px;
border: 2px solid #EEE;
box-shadow: 0 3px 2px rgba(0, 0, 0, 0.3);
}
.popular-posts ul li {
border: 1px solid #eaeaea;
background:#fff;background:-moz-linear-gradient(top,#fff 0%,#f2f2f2 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#fff),color-stop(100%,#f2f2f2));background:-webkit-linear-gradient(top,#fff 0%,#f2f2f2 100%);background:-o-linear-gradient(top,#fff 0%,#f2f2f2 100%);background:-ms-linear-gradient(top,#fff 0%,#f2f2f2 100%);background:linear-gradient(to bottom,#fff 0%,#f2f2f2 100%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#fff',endColorstr='#f2f2f2',GradientType=0 );
font: normal 12px verdana;
height: 30px;
-moz-transition: all 0.700s ease-out;
-o-transition: all 0.700s ease-out;
-webkit-transition: all 0.700s ease-out;
-ms-transition: all 0.700s ease-out;
transition: all 0.700s ease-out;
}
.popular-posts ul li:hover {
border: 1px dashed #bbbbbb;
-moz-transition: all 0.700s ease-out;
-o-transition: all 0.700s ease-out;
-webkit-transition: all 0.700s ease-out;
-ms-transition: all 0.700s ease-out;
transition: all 0.700s ease-out;
}
.popular-posts ul li a:hover {
text-decoration:none;
color: #000;
-moz-transition: all 0.700s ease-out;
-o-transition: all 0.700s ease-out;
-webkit-transition: all 0.700s ease-out;
-ms-transition: all 0.700s ease-out;
transition: all 0.700s ease-out;
}