stylish popular post widget for blogger

Popular post widget for blogger

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

Css code

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

This is very long css code but it works pretty well and with this your blog look very beutifull
Code source : Stramaxon

Author : xxx

Share this

Related Posts