Numbers on Popular Post widget

Widgets play vital roll to attract more visitors and widgets are the only source to increase your template beauty. For this purpose we have given you one CSS code to customize even more your popular post widget for your Blogger template.

Code contains numbering style on it. In your every popular post you will see numbers and top popular post get the first numbers and so on.

Add numbering on popular post is not too much good to gain visitor but you can use it to increase your template life style. We are sure your visitors will love it, try this CSS code by add code in your template and make your visitors surprise.

Add Code of Numbering on Popular Post Widget:

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.

.popular-posts ul li a {

    background: none repeat scroll 0 0 #222222;
    color: #FFFFFF;
    display: block;
    margin: 10px 0;
    padding: 25px 15px 30px;
    position: relative;
    text-decoration: none;
    transition: all 0.3s ease-out 0s;
width: 85%;
}
.popular-posts ul li a:before {
    background: none repeat scroll 0 0 #2DB3E9;
    color: #FFFFFF;
    font-weight: 700;
    height: 2em;
    line-height: 2em;
    margin-left: 88%;
    padding: 4px;
    position: absolute;
    text-align: center;
    width: 2em;
    transition: all 0.2s ease-in-out 0s;
   -moz-transition: all 0.3s ease-in-out 0s;
}
.popular-posts ul li a:hover {
    opacity: 0.8;
}
.popular-posts ul li a:hover:before {
    border-left-color: #CCCCCC;
    left: -1px;
     -webkit-transition: all 0.2s ease-out;
    -moz-transition: all 0.2s ease-out;
    -ms-transition: all 0.2s ease-out;
    -o-transition: all 0.2s ease-out;
}
.popular-posts ul li:first-child + li + li + li + li + li + li + li + li + li a:before {
    content: "10";
}
.popular-posts ul li:first-child + li + li + li + li + li + li + li + li a:before {
    content: "9";
}
.popular-posts ul li:first-child + li + li + li + li + li + li + li a:before {
    content: "8";
}
.popular-posts ul li:first-child + li + li + li + li + li + li a:before {
    content: "7";
}
.popular-posts ul li:first-child + li + li + li + li + li a:before {
    content: "6";
}
.popular-posts ul li:first-child + li + li + li + li a:before {
    content: "5";
}
.popular-posts ul li:first-child + li + li + li a:before {
    content: "4";
}
.popular-posts ul li:first-child + li + li a:before {
    content: "3";
}
.popular-posts ul li:first-child + li a:before {
    content: "2";
}
.popular-posts ul li:first-child a:before {
    content: "1";
}
.item-snippet {
    display: none;
}
.PopularPosts .item-thumbnail {
    display: none;
}

Now save your template you are done. Before visiting your blog must refresh it.

About Post Author:

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

Read more about Mohammad Hamza Frough »

Tab 1 Top Area

Game Reviews

Thursday, 19 September 2013