Stylish Popular Post Widget for Blogger

Popular post widget for blogge

Hello every one today i have an intresting hack for you which is work in blogger and with it you can customized you popular post widget

now i,m going to tell you that how to do this.
first of all follow my steps.........

Steps:

1. Goto blogger.com > dashboard > layout > add widget scrool down and add popular post widget.
2. 
3. then goto html> proceed &
4. Find ( ctrl + f )   ]]></b:skin>
5. and paste below CSS CODE just above   ]]></b:skin> .

.sidebar .PopularPosts .widget-content ul li{

height: 100%;

line-height: 22px;

float: left;

clear: left;

list-style-type: none;

overflow: hidden;

color: gray;

}

.sidebar .PopularPosts .widget-content ul{margin:0;padding:5px 0;list-style-type:none;}

.sidebar .PopularPosts .widget-content ul li{position:relative;margin:5px 0;border:0;padding:10px;opacity:0.8;

-webkit-transition:all 0.4s;

-moz-transition:all 0.4s;

-ms-transition:all 0.4s;

-o-transition:all 0.4s;}

.sidebar .PopularPosts .widget-content ul li:hover {border-radius:30px 0px 0px 0px;margin-left:10px;opacity:1.0}

.sidebar .PopularPosts .widget-content ul li:first-child {background:#ff4c54;width:90%}

.sidebar .PopularPosts .widget-content ul li:first-child:after{content:"1"}

.sidebar .PopularPosts .widget-content ul li:first-child + li{background:#ff764c;width:80%}

.sidebar .PopularPosts .widget-content ul li:first-child + li:after{content:"2"}

.sidebar .PopularPosts .widget-content ul li:first-child + li + li{background:#ffde4c;width:70%}

.sidebar .PopularPosts .widget-content ul li:first-child + li + li:after{content:"3"}

.sidebar .PopularPosts .widget-content ul li:first-child + li + li + li{background:#c7f25f;width:60%}

.sidebar .PopularPosts .widget-content ul li:first-child + li + li + li:after{content:"4"}

.sidebar .PopularPosts .widget-content ul li:first-child + li + li + li + li{background:#33c9f7;width:40%;padding-right:20px;}

.sidebar .PopularPosts .widget-content ul li:first-child + li + li + li + li:after{content:"5"}

.sidebar .PopularPosts .widget-content ul li:first-child + li + li + li + li +li{background:#7ee3c7;width:30%}

.sidebar .PopularPosts .widget-content ul li:first-child + li + li + li + li + li:after{content:"6"}

.sidebar .PopularPosts .widget-content ul li:first-child + li + li + li + li + li +li{background:#f6993d;width:20%}

.sidebar .PopularPosts .widget-content ul li:first-child + li + li + li + li + li + li:after{content:"7"}

.sidebar .PopularPosts .widget-content ul li:first-child:after,

.sidebar .PopularPosts .widget-content ul li:first-child + li:after,

.sidebar .PopularPosts .widget-content ul li:first-child + li + li:after,

.sidebar .PopularPosts .widget-content ul li:first-child + li + li + li:after,

.sidebar .PopularPosts .widget-content ul li:first-child + li + li + li + li:after,

.sidebar .PopularPosts .widget-content ul li:first-child + li + li + li + li + li:after,

.sidebar .PopularPosts .widget-content ul li:first-child + li + li + li + li + li + li:after{position:absolute;top:15px;right:-5px;border-radius:9%;background:#353535;width:30px;height:40px;line-height:1em;text-align:center;font-size:22px;color:#fff;}

.sidebar .PopularPosts .widget-content ul li .item-thumbnail{float:left;border:0;margin-right:10px;background:transparent;padding:0;width:30px;height:90px}

.sidebar .PopularPosts .widget-content ul li a{font-size:12px;font-weight:bold;color:white;text-decoration:none;text-shadow:0px 0px 6px white;

-webkit-transition:all 0.4s;

-moz-transition:all 0.4s;

-ms-transition:all 0.4s;

-o-transition:all 0.4s;

}

.sidebar .PopularPosts .widget-content ul li a:hover{color:black;text-decoration:none;text-shadow:1px 1px 1px white;}

Enjoy ..........

This is very long css code but it works pretty