How to Add Recent Comments Widget With Avatars to Blogger

In my previous posts I've shared Expandable Recent Comments Widget For Blogger and Recent Comments Widget For Blogger but today in this tutorial I'm going to a new Stylish Recent Comments Widget With Avatars. This widget shows comments with round avatars and you can also change the default avatar image. Follow the steps below to Add Recent Comments Widget With Avatars to Your Blog :

Add Recent Comments Widget With Avatars to Your Blog

Step 1. Go to Blogger Dashboard >> Layout >> Add a Gadget
Step 2. Select HTML/JavaScript Gadget from the list of Gadgets
Step 3. Paste the following HTML Code in the widget box

<style type="text/css">
ul.bgt_recent_comments {
    list-style: none;
    margin: 0;
    padding: 0;
}

.bgt_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;
}

.bgt_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;
}

.bgt_recent_comments li img {
    padding: 0px;
    position: relative;
    overflow: hidden;
    display: block;
}

.bgt_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 = true;
//]]>
</script>
<script type="text/javascript" src="http://yourjavascript.com/53371516181/bgt-recent-comments-with-avatars.js"></script>
<script type="text/javascript" src="http://blogolect.blogspot.com/feeds/comments/default?alt=json&callback=bgt_recent_comments&max-results=5"></script>

• Replace blogolect with your blog name
• Replace  numComments  = 5, and &max-results=5 with the number of comments you want to show
• To change Default avatar image replace http://www.gravatar.com/avatar/?d=mm with your image URL

Step 4. Click on Save Button
And you're Done :)

---> Do you like this article? Share it with your friends/followers and subscribe to this blog now, for you to stay updated with our latest posts.

Share This:

Tags:

Widgets

• Prevoius
• Next