Helf India

How to Add recent Comment Widget with Avatar in Blogger?

Today in this post “How to Add recent Comment Widget with Avatar in Blogger”, I am going to tell you, how we can add a recent comments widget with an avatar into a Blogger Blog, step by step.

Widget in Blogger is a great way to make your blog look professional, that is why I want you all to change the look/design of your website/blog.

How to Add recent Comment Widget with Avatar in Blogger

You also can use the best widget of your choice in your blog and make your blog look attractive and professional.

Before knowing how we can add a recent comments widget with avatar into a Blogger Blog.

Let us know:

Why to add recent comment widget in blogger?


Adding widget is a great way to make your blog look professional, and if there is no comment box, with no proper design, it seems like useless.

So, adding a recent comment widget into a blogger blog is really worth.

How to Add Recent Comment Widget in Blogger?


We can add recent comment widget into our blog easily, simply you need to follow our step by step guide mentioned bellow:

Step 1:

Go to your Blogger dashboard.

  1. Click on Layout.
  2. Now Click on Add a Gadget.

How to Add recent Comment Widget with avatar in Blogger 2
Step 2:

Now a new popup window will open.

  1. Click on HTML / Javascrip.

How to change recent Comment Widget in Blogger

Step 3:

Now copy this code

<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  = "https://4.bp.blogspot.com/-SRSVCXNxbAc/UrbxxXd06YI/AAAAAAAAFl4/332qncR9pD4/s1600/default-avatar.jpg",
 hideCredits = true;
<script type="text/javascript" src="https://helplogger.googlecode.com/svn/trunk/helplogger/[helplogger.blogspot.com]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="https://www.helfindia.com/how-to-add-recent-comment-widget-with-avatar-in-blogger-step-by-step/" rel="nofollow" >Recent Comments Widget</a></div>


  • numComments = 5, how much comment to show.
  • avatarSize = 60, how big to show the photo.
  • characters = 40, showing how many words.

step 4:

Write Recent Comments in Title.

How to show avatar in blogger blog

  1. Paste the code here.
  2. Click on save.
  3. Now click on Save Template.

Now the widget of recent comments (with avatar) has been added to your blog, now check once, if you facing any problem, do let me know in the comment, I will be happy to assist you.

You can also ask me anything related to blogger.

Also, Read Our Other Posts:

I hope now you can add recent comment widget to your blog with the help of this post “Add recent Comment Widget with Avatar in Blogger – Step By Step”, if so, then do share this post on social media. Somehow, for someone on social media, it will be helpful.




2 thoughts on “How to Add recent Comment Widget with Avatar in Blogger?”

  1. I blog frequently and I genuinely appreciate your content.
    This great article has really peaked my interest.
    I am going to book mark your site and keep checking
    for new details about once a week. I subscribed to your RSS
    feed as well.

    My webpage … Live22 Mega888

Leave a Comment

Your email address will not be published. Required fields are marked *