Don't Miss

How to Add Recent Comments Widget With Avatars to Blogger

By Zohaib Liaqat - 1 Comment
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;
<script type="text/javascript">
    // Recent Comments Settings
 numComments  = 5,
 showAvatar  = true,
 avatarSize  = 60,
 roundAvatar = true,
 characters  = 40,
 showMorelink = false,
 moreLinktext = "More »",
 defaultAvatar  = "",
 hideCredits = true;
<script type="text/javascript" src=""></script>
<script type="text/javascript" src=""></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 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.


1 comment to ''How to Add Recent Comments Widget With Avatars to Blogger"

  1. Attempt and pay off your advance as fast as could be expected under the circumstances. Paying in portions may be advantageous, yet you'll be paying tremendous expenses for the benefit. A decent approach to pay it down quick is to pay back more than you owe every month.
    Check Cashing San-diego