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">
ul.md_recent_comments{list-style:none;margin:0;padding:0;}
.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;}
.avatarRound{-webkit-border-radius:100px;-moz-border-radius:100px;border-radius:100px;}
.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;}
</style>
<script type="text/javascript">
//<![CDATA[
// Recent Comments Settings
var
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>
<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.



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:

Comments

Post a Comment

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