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;}
</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="/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-

  • 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

 

 http://4.bp.blogspot.com/-SRSVCXNxbAc/UrbxxXd06YI/AAAAAAAAFl4/332qncR9pD4/s1600/default-avatar.jpg

  • 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  Awesome Recent Comments Widget for Blogger

Related Post

How to get a high quality backlink from Wikipedia Getting backlink from Wikipedia is a proud moment for every SEO expert because Wikipedia is one of the oldest free websites which has information abou...
Most Commented Posts Widget for Blogger with Comme... One of the best widgets for your blogger is a Most Commented Widget for your Blogger. This lets the visitors to see the trending post and encourages...
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 ...
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...

2 Comments
  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