how to customize popular posts in stylish widget for blogger

Hi.. friends today im going to show u how to customize popular posts in stylish widget.

STEPS

• goto html> proceed &
• Find ( ctrl + f )   ]]></b:skin>
• 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;}

note: set the configure popular posts. show display up to 5 posts. And uncheck the image thumbnail/snippet