Customize Blogger's Official Popular Posts Widget

1.  Go To Blogger > Design
2. Click on add a gadget and select the "Popular Posts" gadget from the list provided by blogger
3. Now make these settings 

• Set Most viewed to all time
• Uncheck image Thumbnail and snippet. We only need to display popular links so we don't need that bulky image and unnecessary intro text.
• You can display between 1 to 10 posts. So choose at least 7 posts.

       4.   Save your widget
       5.    Now go to Blogger > Design > Edit HTML
       6.   Backup your template
       7.   Search for this

]]></b:skin>

8.    Just above it paste the following CSS code,

/*--- MBT Popular Posts --- */
.popular-posts ul{padding-left:0px;}
.popular-posts ul li {background: #FFF url(http://1.bp.blogspot.com/_7wsQzULWIwo/ SmodosCuJCI/AAAAAAAABh4/ZSXbVW9Qpa8/s400/261.gif) no-repeat scroll 5px 10px;
list-style-type: none;
margin:0 0 5px 0px;
padding:5px 5px 5px 20px !important;
border: 1px solid #dddddd;
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;
}

Make these changes to customize the default look:

• To change the bullet image replace the image link in bolded black in the code above with your bullet URL.
• To change the border color in active mode edit #dddddd
• To change the border color on mouse hover edit  #6BB5FF

You can use our color Chart for changing the colors.
   9.    Finally save your widget and say bingo!

Visit your blogs to see it hanging just fine on your sidebar. Do let me know if you needed any further help in changing the font type or color. The widget will automatically apply to it default colors of your blog but in case you wish to change them to something different then feel free to let me know by posting your comments below.