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.

Do you like this post? Please link back to this article by copying one of the codes below.

URL Of Post:

HTML Link Code:

BB (forum) link code:


Post a Comment

Please share your views on this topic with Grace Joseph by leaving a comment.