-->

Add Recent Comments Widget with Avatar in Blogger

In previous article i have shared with you recent comments widget for blogger, that is simple by style without having images and logos for default and anonymous commented users. Mostly readers did not like this gadget as it has not avatars feature for the users. 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.

Add Recent Comments Gadget with Avatar

This beautiful Gadget has many professional qualities and features and you can completely customize it according to your desire. So that it could suite and fit to your website. In this way to can grow excellency of your site.
[post_ad]

Add Recent Comments Widget with Avatar in Blogger

1. Login to your Blogger Dashboard >> Layout >> Now click on "Add a Gadget"link

add a gadget from blogger layout

2. Now a pop-up window box will appear, Here kindly scroll down and kindly select HTML/JavaScript gadget

html javascript blogger gadgets widgets

3. Copy the below set of code and paste it into HTML/JavaScript box

<style type="text/css">
ul.latest_recent_comments{list-style:none;margin:0;padding:0;}
 .latest_recent_comments li{background:none !important;margin:0 0 6px !important;padding:0 0 6px 0 !important;display:block;clear:both;overflow:hidden;list-style:none;}
 .latest_recent_comments 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;}
.latest_recent_comments li img{padding:0px;position:relative;overflow:hidden;display:block;}
.latest_recent_comments li span{margin-top:4px;color: #666;display: block;font-size: 12px;font-style: italic;line-height: 1.4;}
.latest_recent_comments span{display:none;}
</style>
<script type="text/javascript">
//<![CDATA[
// Recent Comments Settings
var
numComments     = 6,
showAvatar     = true,
avatarSize     = 60,
roundAvatar    = true,
characters     = 30,
showMorelink    = true,
moreLinktext    = "More",
defaultAvatar     = "http://goo.gl/onjdiO",
hideCredits    = true;
//]]></script>
<script src="https://bloggercellcom.googlecode.com/svn/trunk/javascript/recent-comments-avatar.js"></script><script src="http://www.bloggercell.com/feeds/comments/default?alt=json&amp;callback=latest_recent_comments&amp;max-results=5" type="text/javascript"></script></script><div style="font-size: 10px; float: right; margin-top: -15px"> Grab this <a href="http://www.bloggercell.com/2015/01/add-recent-comments-widget-with-avatar.html">Recent Comments Gadget</a></div>

4. Replace www.bloggercell.com with URL address of your site

How to Modify this Gadget
- To show less or more displayed comments, please change "6" with you desire value
- For changing Avatars size for default or anonymous users then simply replace the below url link with your image link

http://goo.gl/onjdiO

- If you want to change the Avatars size then kindly replace "60" with other value of you choice
- If you do not like square Avatars size then simply delete above whole pink colored line

5. Click on "Save" button to save your settings.

Final Words

After doing all above steps you have successfully added Recent Comments Widget with Avatar in Blogger. Now your blog has professional commenting system on sidebar in you website. If you have any question about it then kindly ask me, i am here to solve your problem.
ViewCloseComments