Most Commented Posts Widget for Blogger with Comment bubbles!

Add Most Commented Widget to Blogger

1. Go to Blogger > Layout
2. Click "Add a Gadget"
3. Choose HTML/JavaScript widget
4. Paste the Following code inside it:

<style>

/* ######### Most Commented Widget by MBT ##########*/
.commentbubble {
background: #292D30;
width: 49px;
float: left;
margin: 2px 20px 35px 0px;
font-weight: bold;
font-size: 1.3em;
text-align: right;
font-family: georgia,Helvetica;
padding: 0px 0px 5px 0px;
text-align: right;
color: #FFF;
text-shadow: 4px 1px #202022;
position: relative;
top: 5px;

}
.commentbubble:after {
content: ' ';
position: absolute;
width: 0;
height: 0;
right: 0px;
top: 100%;
border-width: 5px 8px;
border-style: solid;
border-color: #292D30 #292D30 rgba(0, 0, 0, 0) rgba(0, 0, 0, 0);
top: 34px;
right: 6px;
}

</style>

<script type="text/javascript">
function getYpipePP(feed) {
document.write('<ul style="list-style:none; ">');
var i;
for (i = 0; i < feed.count ; i++)
{
var href = "'" + feed.value.items[i].link + "'";
var pTitle = feed.value.items[i].title;
var pComment = + feed.value.items[i].commentcount;
var pList = '<li style="clear:both; padding:10px 0px 30px 0px!important;border-bottom: 1px dashed #dedede; line-height:2em; "> <div class="commentbubble">' +pComment +  "&#160;&#160;</div>" +  "<a href="+ href + '" target="_blank">' + pTitle ;
document.write(pList);
//to remove comment count delete this line
document.write('</a></li>');
}
document.write('</ul>');
}
</script>
<script src="http://pipes.yahoo.com/pipes/pipe.run?
 YourBlogUrl=http://www.mybloggertricks.com
&ShowHowMany=6
&_id=390e906036f48772b2ed4b5d837af4cd
&_callback=getYpipePP
&_render=json"
type="text/javascript"></script>

Make these small changes:

• Replace with your Blog URL  http://www.mybloggertricks.com  
• Replace this 6 with how many post titles you wish to display in the list.
• To change the background color of the comment bubbles, Simply replace the yellow highlighted hexadecimal color codes ( #292D30 ) with your custom color.
• To change the Text color of the Comment count Replace #FFF.
• Replace #dedede if you wish to change the border color that appears below each post title. If you don't want to show a border below each list item then simply delete this line:  border-bottom: 1px dashed #dedede; 

  5. Save and you are all done!

Visit your blog and see a beautiful list of Populat Posts with Fancy comment bubbles! :)