Add Recent Comments Widget with Avatars To Blogger

In one of my previous tutorials, I have shared a simple Recent Comments widget having the ability to display the latest comments published on the blog posts. However, the main disadvantage of it was that it didn't have the option of showing the users' avatars; so for those who'd like to see something more, here's a stylish Recent comments widget with round avatars and comment excerpts. Besides providing the option of displaying the commenters avatars, we'll be able to change the default image for the anonymous avatar, as well.

Isn't that great? Let's begin adding it!


How to add recent comments widget with avatars

Step 1. Go to Blogger Dashboard > select your blog > go to 'Layout' & click the 'Add a Gadget' link.

avatars, recent comments blogger, blogger widgets

Step 2. When the popup window appears, scroll down and choose the 'HTML/Javascript' gadget.


Step 3. Now, copy and paste the following code inside the empty box:
<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;}
</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://4.bp.blogspot.com/-SRSVCXNxbAc/UrbxxXd06YI/AAAAAAAAFl4/332qncR9pD4/s1600/default-avatar.jpg",
 hideCredits = true;
//]]>
</script>
<script type="text/javascript" src="http://helplogger.googlecode.com/svn/trunk/helplogger/[helplogger.blogspot.com]recent-comments.js"></script>
<script type="text/javascript" src="http://helplogger.blogspot.com/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="http://helplogger.blogspot.com/2012/03/add-recent-comments-widget-with-avatar.html" rel="nofollow" >Recent Comments Widget</a></div>
Note
- replace http://helplogger.blogspot.com/ with the name of your blog.
- by default, 5 comments will be displayed... to show more replace the "5" values in red
- to change the avatar for anonymous users, replace the following address with the url of your image:
http://4.bp.blogspot.com/-SRSVCXNxbAc/UrbxxXd06YI/AAAAAAAAFl4/332qncR9pD4/s1600/default-avatar.jpg
- to change the size of the avatar, replace 60 value in green.
- for square avatars, remove the line in red

Step 4. After you've made the changes, click Save... and we're done!

Once a reader sees the recent comments widget in the blog's sidebar, he comes to know that your blog is pretty active and that encourages him to post comments on your blog. This way, you can gather some active user base to comment on your blog posts.
Share this post:

    Random Posts

70 comments:

  1. Doesn't work on my blog :(

    ReplyDelete
    Replies
    1. NVM I feel stupid, I use disqus comment, do you know how to set it up for disqus. Thanks :)

      Delete
    2. Hi John,

      You can get Disqus Recent Comments Widget by logging into your Disqus account, then go to Tools tab and from there you can copy the code for your widget.

      Delete
  2. wow. my blog: http://www.blog-ph.com/ is more cute now :) thank you helplogger

    ReplyDelete
  3. Awesome Work I Like It

    ReplyDelete
  4. Anonymous8/08/2012

    got it! it works. thanks helpblogger!

    ReplyDelete
  5. Great! It works perfectly on my blog. :)
    Thank you...

    ReplyDelete
  6. Anonymous9/22/2012

    nice hack

    ReplyDelete
  7. i can't seem to get thsi to work..
    your other one works ..

    ReplyDelete
  8. it's work but why admin also in the widget ??

    ReplyDelete
  9. Berkunjung sob,ditunggu
    kunjungan baliknya

    ReplyDelete
  10. It's a great help. Thanks U dude ...

    ReplyDelete
  11. its works.. thanks! -from Malaysia

    ReplyDelete
  12. wow!!! amazing. thanks ya

    ReplyDelete
  13. Design? Page elements?
    I see these menu items nowhere on the menu.

    And when I change the favicon in "layout" (on lefthand side of page) it has no effect. I cannot replace my old icon.

    ReplyDelete
  14. I used and change to avatar..change no of comment..but can't work

    ReplyDelete
  15. Why the avatar didnt comuout....

    ReplyDelete
  16. thanks sir its work nice widget

    ReplyDelete
  17. OMG OMG OMG thanks you so much this box looks really good on my blog <33 thanks !!! :D

    ReplyDelete
  18. Nice...that's working......Wohh..

    ReplyDelete
  19. how to exclude the blog author comment?

    ReplyDelete
  20. How do you get this type of commenting system? like the one with the pictures etc

    ReplyDelete
  21. How can you make cooler anoymous pictures? On my site it just shows that thing with no picture

    ReplyDelete
  22. Its work nice widget.I appreciate your post.Thanks so much and let keep on sharing your stuffs.

    ReplyDelete
  23. not working for me... idont see the output after i copied and changed the details as written. :(

    ReplyDelete
  24. Thanks for your code, my blog now http://facebooktopic.blogspot.com/ is more interactive and beautiful. Thanks you so much and keep the good work in helping newcomers in blogging world.

    ReplyDelete
  25. This is fabulous! Thank you for posting this tutorial. (:

    ReplyDelete
  26. Is working and is fabulous!! Thank you so, so much!!!!

    ReplyDelete
  27. Nice...
    It works on my blog...
    thanks

    ReplyDelete
  28. cool... works well on my blog
    http://blog3kaki.blogspot.com/

    ReplyDelete

  29. Thanks for the great article..

    ReplyDelete
  30. Thanks for sharing.

    ReplyDelete
  31. it works my friend... thank you so much, from Philippines..

    ReplyDelete
  32. Anonymous6/10/2013

    avatar-image-container

    ReplyDelete
  33. A very useful article! Thanks.

    ReplyDelete
  34. Thank you, it works on my blog. I use standard theme instead of Dynamics.

    ReplyDelete
  35. Thanks for yout tips, it's cute! It works on my blog but it's not the most recent comment, any idea why?

    ReplyDelete
  36. I have tried but still can't appears,,, maybe some problem on my template.
    Visit back on my blog please,,, to every one :)
    http://juragancipir.blogspot.com
    thx

    ReplyDelete
  37. Thanks for sharing... :D

    ReplyDelete
  38. I've just add this code above and it works correctly..

    Thank you for sharing

    ReplyDelete
  39. Cool, thank you :)
    http://ayungavis.blogspot.com

    ReplyDelete
  40. great tip !! keep the good work !

    ReplyDelete
  41. Works beautifully - THANK YOU!

    ReplyDelete
  42. It may be that I am unfamiliar with C&P codes, but I tried to use the first tutorial and after I (Did change with original blog address) Saved and went and checked it was wrong. What I saw after clicking "Recent Comments" was a link to the tutorial. I think maybe I used to much of the code. I would like to use the code here with the Rose, but I think I need it to be broken down to what I should exactly Copy & Paste. I would appreciate any help. Thank you! May you have a Blessed 2014.

    ReplyDelete
  43. tq bro, it's awesome. have it attached in my blog

    ReplyDelete
  44. This is really awesome! My old widget was broken and I used your advice. Works perfectly, thank you so much! Andreas

    ReplyDelete
  45. Thanks, Its working on my blog

    ReplyDelete
  46. Works fine in my blog except for the round part, which puzzles me.

    ReplyDelete
    Replies
    1. Hi Lyrans,

      You have the option to remove the roundness of the avatars, just delete the line in red from above (I've updated my post). Thanks for visiting!

      Delete
  47. Many thanks for this great widget which works well.
    However I have changed to google+ comments system on my blog http://lastingrose.blogspot.co.uk
    Is there an rss feed for these comments or a way to extract and show in the widget?

    ReplyDelete
  48. Thanks so killer! Thank you!!

    ReplyDelete
  49. It worked perfectly -- I love the round icons and the choice of replacing the boring anonymous icon with my own image..thank you so much!!

    ReplyDelete
  50. i like this blog,so owesome....!!!

    ReplyDelete
  51. wow, very easy to do,,

    Thanks

    ReplyDelete
  52. It looks like I can't customize this widget. I actually changed the number of comments to 6 and set the number of shown characters to 110, but it definitely doesn't show these changes.

    ReplyDelete
    Replies
    1. Also it doesn't show the default avatar I set, even though it leads precisely to the link of the image I want to have as the default avatar for the widget.

      Delete
  53. Hi,
    It doesn't work for me, after the modifications, I juste can read the following information on my blog :
    "get this recent comments widget".
    By the way, thank you for this great tutorial, I hope I'll find a widget.

    Greetings from France.

    ReplyDelete

Although every comment is appreciated, due to time limitations I might not be able to respond to everyone. Keep in mind that comments are moderated and may take some time to appear. All spam comments will be deleted. Thanks for understanding!