Popular Post CSS Style Gadget with and without image

Two Different Style Popular Post Widget

First Widget: WithOut Image

Check This One: Another Popular Post Widget With CSS And aHove Effect with image

1. Go to Blogger Dashboard > Layout > Add Gadget and choose Popular Post Widget.
2. Now set this setting as shown below.
Note: choose Number of post to show upto 10 but dont make it below 6.

Now follow Following steps to add CSS Code.
1. After Adding Popular Post widget to your blog. Go to Blogger Dashboard and choose Template.
2. Now Backup your Template to be safe if you mess something up.
3. After Template been selected click on Edit HTML and search for below code.

]]></b:skin>

4. Now capt and paste following code just above the code you search in Step 3.

CODE FOR 1ST WIDGET:

/*--- allin1-web.blogspot.com Popular Posts Begin--- */
.popular-posts ul{padding-left:0px;}
.popular-posts ul li {
list-style-type: none;
margin:0 0 5px 0px;
padding:5px 5px 5px 20px !important;
border: 1px solid # 6BB5FF ;
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;}.popular-posts ul li:hover {
border:1px solid # 009900;
}
.popular-posts ul li a:hover {
text-decoration:none;
}
/*--- allin1-web.blogspot.com Popular Posts End--- */

5. Now save this template and you are done.
------------------------------------------------
Second Widget: This widget is with image

For Another Style Popular Post Widget, Copy and paste Following CSS Code above ]]></b:skin>.
Note: Keep Check to show Show Image and Show no. Of post 7

CODE FOR 2ND WIDGET:

/*--- allin1-web.blogspot.com Popular Posts widget Begin--- */
.popular-posts ul
{
padding-left:0px;
padding-top:10px;
}
.popular-posts ul li
{
margin:10px 0;
border: 1px solid #000;
border-radius: 100px;
}
.popular-posts .item-thumbnail img {
border-radius: 50px;
-moz-border-radius: 50px;
-ms-border-radius: 50px;
-o-border-radius: 50px;
-webkit-border-radius: 50px;
box-shadow: 0 3px 3px rgba(0,0,0,1);
-moz-box-shadow: 0 3px 3px rgba(0,0,0,1);
-webkit-box-shadow: 0 3px 3px rgba(0,0,0,1);
-ms-box-shadow: 0 3px 3px rgba(0,0,0,1);
-o-box-shadow: 0 3px 3px rgba(0,0,0,1);
border: 4px solid #e6e6e6;
}
.popular-posts .item-thumbnail img:hover {
transform:rotate(10deg);
-moz-transform:rotate(10deg);
/*--- allin1-web.blogspot.com Popular Posts widget End--- */

Now click save template,