stylish popular post gadget

How To Add Stylish Popular Post Widget in ur Blog

Step 1:

Go to Your Blogger Dashboard:

Select Layout

Click on the Add a gadget and Choose the gadget named Popular posts gadget

Click all proper Option below as show in fig.below if you need to show posts with thumbnail if you don’t

Wanna show the thumbnail then don’t select it

If you select snippet the summary will be shown.
Select digits from the option(maximum is 10) how many posts you wanna show.
Next step:
Go to blogger template:
Click on edit html
Search for ]]></b:skin> and post the following code before it.

.popular-posts ul{padding-left:0px;}
.popular-posts ul li {background: #FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgweZum26leHNtVbJb-E973BLgFXvm8h_G-bDvDP1KfHXZNh8DtKMFrnOLZ53ch4Ok6PhBYU77M_4YZLIJXWnubz-2jC7b5kjTCD39RNh9ZlpyI5YlR71GOlPSaL-RwBtDGuXcwuKf_-xk/s1600/1.gif)  no-repeat scroll 5px 10px;
list-style-type: none;
margin:0 0 5px 0px;
padding:5px 5px 5px 20px !important;
border: 1px solid #ddd;
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
}
.popular-posts ul
li:hover {
border:1px solid #6BB5FF;
}
.popular-posts ul
li a:hover {
text-decoration:none;
}
.popular-posts .item-thumbnail img {
webkit-border-radius: 100px;
-moz-border-radius: 100px;
border-radius: 100px;
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
}

You are done.. finally click on save...
Nyc...you have done..Enjoy..