Recent Comments Widget with Avatar for Blogger • Just Naira

In one of my recent posts on this blog, I shared how Top Commentator Widget with Avatar can be added to blogger blogs.

Recent-Comments-Widget-For-Blogger-Blogspot

But today, I want to share another tutorial on how to add the Recent Comments Widget with Avatar to Blogger/Blogspot Blogs. This widget will show a snippet of the recent comments posted on your blog alongside with the title of the post. It is also a good widget that encourages readers to drop comments on your blog. Before installing this widget on your blog, you can easily customize how you want it to appear on your blog such as the numbers of comments you want to display, size of the comment, whether or not to display the post name and the comment-date.

A demo of this widget is on the right side of this blog ==========>

How to Install Recent Comments Widget on Your Blogger Blog

Go to your Blog Dashboard >> Layout >> Add a Gadget >> HTML/JavaScript.
Copy and paste the code below into the HTML/JavaScript box.

<style type="text/css">
    ul.justnaira_recent_comments{list-style:none;margin:0;padding:0;}
    .justnaira_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;}
    .justnaira_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;}
    .justnaira_recent_comments li img{padding:0px;position:relative;overflow:hidden;display:block;}
    .justnaira_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     = "http://www.gravatar.com/avatar/?d=mm",
    hideCredits    = false;
//]]>
</script>
<script type="text/javascript" src="https://justnaira.github.io/blogger-tricks/justnaira-recent-comments-gravatar.js"></script>
<script type="text/javascript" src="http://www.justnaira.com/feeds/comments/default?alt=json&callback=justnaira_recent_comments&max-results=5"></script>

Customization of Recent Comments Widget

1. numComments= 5, and max-results=5 ==> Change the 5 to the number of recent comments you want to show on your blog
2. characters = 40, ==> Change the 40 to the number of comment excerpt characters you want to show.
3. You must change the www.justnaira.com in the code to your blog address.

For questions and queries, use the comment box below.