Recent Comments Widget With Avatar For Blogger/Blogspot

Below are guidelines on how to add recent comments widget with avatar for blogger/blogspot to your blog. This blogger widget displays a list of recent commentators on your blog with their images in your blog's sidebar, a way of encouraging other readers to drop comments on your blog.

Also Read:   Sliding Recent Posts Widget For Blogger
                    Related Posts Widget For Blogger/Blogspot with jQuery
                    Scrolling Popular Post Gadget For Blogger

How to Add Recent Comments Widget to Blogger

  • Goto your blogger dashboard
  • Navigate to 'layout'
  • Click on 'add a gadget'
  • From the popup options, select 'html/javascript'
  • Code and paste the code below in the text field.

<style type="text/css">
.md_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;}
.md_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;}
.md_recent_comments li img{padding:0px;position:relative;overflow:hidden;display:block;}
.md_recent_comments li span{margin-top:4px;color: #666;display: block;font-size: 12px;font-style: italic;line-height: 1.4;}
<script type="text/javascript">
// Recent Comments Settings
numComments     = 5,
showAvatar     = true,
avatarSize     = 60,
roundAvatar    = true,
characters     = 40,
showMorelink    = true,
moreLinktext    = "More »",
defaultAvatar     = "http://www.gravatar.com/avatar/?d=mm",
hideCredits    = true;
<script type="text/javascript" src="http://makingdifferent.github.com/blogger-widgets/md-recent-comments-gravatar.js"></script>
<script type="text/javascript" src="http://www.techlass.com/feeds/comments/default?alt=json&callback=md_recent_comments&max-results=5"></script>

  • Replace the URL in blue with your URL.
  • Save the gadget.
Also Read: Facebook Popup Like Box With Timer For Blogger
                   Social Follow and Subscription Widget For Blogger
                   Floating Social Share Button For Blogger

NOTE: You can customize the recent comments blogger widget above by  making the following optional changes
  • Setting the number of comments to be displayed.  To do this change, numComments = 5,
  • Choosing either to display images or not. To do this, change showAvatar = true, to showAvatar = false,
  • Choosing a different avatar to be displayed when the commentator has no image. to do this change the image URL ("http://www.gravatar.com/avatar/?d=mm",) in the code.


Tech blogger, SEO expert, cryptocurrency enthusiast, and freelancer are the terms that describe me. I'll rather write a thousand words than speak hundred words, and that describes my passion as a content creator.