Awesome and premium Popular posts widget with css hover effect for blogger

Gud evening my dear folks,Today i will be sharing and awesome blogger widget for popular post.Recently i have shared how add download buttonn but it's time for posts.

Nowadays,you should have a smart popular post widget with css effect.This popular post widget have number and css hover effect..
This widget increase ur blog pageviews..becoz people see how the blog looks like...So if u want to change ur simple blog into Smart blog,u must have this widget.......

Learn how to add this widget into ur blog........

IMPORTANT STEPS TO ADD THIS WIDGET

1. Go to ur blogger account...
2. Go to Template>Edit HTML
3. Now Search  ]]></b:skin> by pressing Ctrl+F
4. Now paste the below code above ]]></b:skin>

  .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;

}

5. Now Save ur Template....6.Once u Save ur Template,this will change ur old popular post into smart popular post.... 


Please Share this widget with your friends