page contents

Add Recent Comment Widget with Avatars to Blogger

Last updated on June 16th, 2017 at 12:03 am

In a previous article, I have learned how to add Recent Comments Widget for Blogger.Now in this article, we are moving a step forward that is by adding avatar style to your comments tab. Most readers like this gadget as this makes our blog more stylish and attractive. So in this post, I am going to share with you a stylish recent comments widget having rounded avatars for the commentators. It helps to inspire your blog readers, also helps to increase user knowledge experience of your website. Readers can also see all latest comments on your blog and by this way, they can easily find and ask or reply that comment to other users. In other words, this is the best way to boost the value of a webmaster’s site with ease.

I know you will be very thrilled to know the steps, hence let’s move to the tutorial.

How To Add Recent Comments Widget With Avatar??

  • Sign In to Blogger Dashboard
  • SelectLayout -> Click on Add a Gadget
  • TakeHTML/Javascript from the list
  • Give the Title and Copy the below code to it and Save


 <style type="text/css">
ul.helploggercomments{list-style: none;margin: 0;padding: 0;}
.helploggercomments li {background: none !important;margin: 0 0 6px !important;padding: 0 0 6px 0 !important;display: block;clear: both;overflow: hidden;list-style: none;word-break:break-all;}
.helploggercomments 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;}
.helploggercomments li img {padding: 0px;position: relative;overflow: hidden;display: block;}
.helploggercomments 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="[]recent-comments.js"></script>
<script type="text/javascript" src="/feeds/comments/default?alt=json&callback=helploggercomments&max-results=5"></script><div style="font-size: 10px; float: right; margin-top: -15px">Get this <a href="" rel="nofollow" >Recent Comments Widget</a></div>


  • By default, 5 comments will be displayed, hence to show more replace the “ 5 “ values

in red

  • To change the avatar for anonymous users, replace the following address with url of your image

  • Replace the 60 value in green to change the size of the avatar
  • Remove the red line to change the appearance to a square.

Click save after making the changes…..are we are done.

READ  How to Increase Your Adsense CTR - Tips by AdSense Team

Related Post

5 Easy Ways to Improve the SEO of a blog A blogger needs to know in any event the base on SEO. For it, you don't should be a SEO master however you have to know the base so that your posts ...
6 Stylish Recent Post Widget for Blogger For any bloggers, who pride themselves on always being up-to-date with new content, a recent post widget for Blogger will be an important tool. If we ...
How to add a custom domain in Blogger Our web today is a glorious spot. It's undeniably turned into a learning center for strollers around the world. Furthermore, you know what the best ...
13 things to do for Google AdSense Approval within... So, you want to make some money from your website using Google AdSense Approval? Who does not dream about making some money from online? It is a...

  1. Reply
    Mohinder August 19, 2017 at 4:37 am

    Hey kistharah ,, nice article.I just Want to know is it work for WordPress also? And please take a look at your email subscription field, it’s not working properly, it’s showing the message “The feed does not have subscriptions by email enabled”.

    • Reply
      Sreejith August 19, 2017 at 4:44 am

      Hi Mohinder,

      Thank you for letting me know the subscription problem.I will surely look into it.

      You have many plugins available in WordPress which work similar to Comment Avatar widget in Blogger.

Leave a reply