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  7 Best Free WordPress Ecommerce Plug-ins

Related Post

How to protect your account from Adsense Invalid c... As we all know that as per the Google AdSense policies, a publisher is fully responsible for the traffic on their ads. It means any activity which is ...
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 ...
Blogger vs WordPress : Which is better and Why? We are regularly asked by new users for what good reason they ought to utilize WordPress rather than free blogging administrations like Blogger vs Wor...
AdSense optimization tips straight from Google Are you using Google Adsense to monetize your blog?Then check these 5 tips to increase your Adsense optimization straight from Google. Top AdSens...

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