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     = "",
hideCredits    = true;
<script type="text/javascript" src=""></script>
<script type="text/javascript" src=""></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 ("",) 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.