Thursday, May 11, 2017

Add Recent Comment Widget with Avatars to Blogger


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.

2 comments:

  1. 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".

    ReplyDelete
  2. 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.

    ReplyDelete