Add Recent Comments Widget For Blogger Sidebar With Image

How To Add Recent Comments Widget For Blogger Sidebar With Image

Recent Comments Widget with Avatar for Blogger/Blogspot

 Recent Comments widget with Avatar for Blogger Blogs. Recently Blogger updated the Comments API for   In this widget we can show the Avatar of Commenter using the updated the Comments API. as you seen my Recent Comments Widget, this is looks exactly same to my Recent Comments Widget.
In this Widget i included the Comment Excerpts and Avatar Image. you can choose default Anonymous Avatar Image also.

Take A look :- 

 How To Install The Recent Comments Widget with Avatar For Blogger

Step 1. Go to your Blogger Dashboard >> Layout >> Add a Gadget

Step 2. From the pop-up window, scroll down and choose the HTML/JavaScript option:

  Step 3. Now copy and paste the below code in the HTML/JavaScript box:

 <style type="text/css">
    ul.w2b_recent_comments{list-style:none;margin:0;padding:0;}
    .w2b_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;}
    .w2b_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;}
    .w2b_recent_comments li img{padding:0px;position:relative;overflow:hidden;display:block;}
    .w2b_recent_comments li span{margin-top:4px;color: #666;display: block;font-size: 12px;font-style: italic;line-height: 1.4;}
</style>
<script type="text/javascript">
//<![CDATA[
    // Recent Comments Settings
    var
    numComments     = 5,
    showAvatar     = true,
    avatarSize     = 60,
    roundAvatar    = true,
    characters     = 40,
    showMorelink    = false,
    moreLinktext    = "More »",
    defaultAvatar     = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhg58fuNfhsDmvmnbgCPQD134-GkXLIR2HTO9c_8YnA2oS2SgqCKiaUcI4cy9AfUOluC0gT9PCcmcfa6mA5_tiZI0oIrsDYXuzQfWVFJkAedbMjcG6X7V2ECrA5Kx1mhyqlqLxYz9-QpKk/s1600/avatar-constituent-default+%281%29.gif",
    hideCredits    = true;
//]]>
</script>
<script type="text/javascript" src="http://s2free.googlecode.com/files/s2free-recent-comments-gravatar.js"></script>
<script type="text/javascript" src="http://s2free.blogspot.com/feeds/comments/default?alt=json&callback=w2b_recent_comments&max-results=5"></script>

Step 4. Replace your-blog-name with your blog url.

Step 5. Click Save and you're done.


Hope you'll enjoy it!