Stylish recent comment widget with thumbnail

The Recent Comments Widget for Blogger displays recent blog comments on your sidebar.You can use this widget to display the recent comments of any blogger blog. In this widget we can show the Avatar of Commenter using. As you seen my Recent Comments Widget, this looks exactly same to my Recent Comments Widget.This widget is highly customizable. So that you can easily customize your recent comments widget.You can also set the default avatar image and much more things that you can easily customize.


SEE THE DEMO:






How To Add Recent Comments Widget for Blogger With Avatar To Blogger?

1, Go to Blogger Dashboard > Layout.
2. Click on Add a Gadget > HTML/JavaScript.
3. Paste below code and save it.

<style type="text/css">    ul.latest_recent_comments{list-style:none;margin:0;padding:0;}    .latest_recent_comments li{background:none !important;margin:0 0 6px !important;padding:0 0 6px 0 !important;display:block;clear:both;overflow:hidden;list-style:none;}    .latest_recent_comments li .avatarImage{padding:3px;background:#fefefe;-webkit-box-shadow:0 1px 1px #ccc;-moz-box-shadow:0 1px 1px #ccc;box-shadow:0 1px 1px #ccc;float:left;margin:0 6px 0 0;position:relative;overflow:hidden;}    .avatarRound{-webkit-border-radius:100px;-moz-border-radius:100px;border-radius:100px;}    .latest_recent_comments li img{padding:0px;position:relative;overflow:hidden;display:block;}    .latest_recent_comments li span{margin-top:4px;color: #666;display: block;font-size: 12px;font-style: italic;line-height: 1.4;}
.latest_recent_comments span{display:none;}</style><script type="text/javascript">//<![CDATA[    // Recent Comments Settings    var    numComments     = 8,    showAvatar     = true,    avatarSize     = 60,    roundAvatar    = true,    characters     = 30,    showMorelink    = true,    moreLinktext    = "More &#65533;",    defaultAvatar     = "http://www.gravatar.com/avatar/?d=mm",    hideCredits    = true;//]]></script><script src="http://yourjavascript.com/43012082112/truebloggertricks.txt.js"></script><script src="http://truebloggertricks.blogspot.com/feeds/comments/default?alt=json&amp;callback=latest_recent_comments&amp;max-results=5" type="text/javascript"></script>

4. Now change truebloggertricks.blogspot.com with your own blog URL.


Customizations (Optional)

• To change number of comments find this numComments = 5,
• If you don't want to show avatar then find this code showAvatar = true
• To change avatar size find this code avatarSize = 40
• If you don't want to show rounded avatars then find this code roundAvatar = true
• To set maximum number of characters find this code characters = 40
• To show more link find this code and change value to true showMorelink = false
• If you enable show more link value then you can change the text which shows more link.Find this code moreLinktext = "More »"
• To change default avatar image find this code defaultAvatar = "http://www.gravatar.com/avatar/?d=mm

5. Now save you widget.

Now you should have a working Recent Comments Widget for Blogger With Avatar on your blog.
I hope you all will like this gadget. Do not forgot to share this widget with your friends.