How to Add Recent Comments Widget with Avatars

Whenever readers/visitors notice any problem or posts suggestions or criticize regarding blog articles merely comments on blog. Webmaster ought to note of these comments by replying straightforward and engaging ways.

To flavor this Recent Comments appliance you’ve to switch by victimisation RN Hckr tutorials to appear Comments appliance with fashionable and engaging.

Whenever readers/visitors comments on journal their profile image are displayed, if readers/visitors avatars not on the market then default Anonymous image apprars. RN Hckr presents straightforward method of CSS code for “Recent Comments appliance with Avatars” webmasters don’t have to be compelled to putting your all into for adding this appliance their blogs. Let’s begin the tutorial the way to add.

Live Demo

Add Recent Comments Widget with Avatar for Blogger

Sign into your blogger account
Click on “Design (Layout in the new blogger interface) Pageelements link tab
Click on “Add a Gadget” link tab
Select “HTML/Javascript” widget
Now, copy the below
code and paste in it

<style type="text/css">ul.btf_recent_comments { list-style: none; margin: 0; padding: 0; } .btf_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; } .btf_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; } .btf_recent_comments li img { padding: 0px; position: relative; overflow: hidden; display: block; } .btf_recent_comments 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 = 50, roundAvatar = true, characters = 40, showMorelink = false, moreLinktext = "More »", defaultAvatar = "http://www.gravatar.com/avatar/?d=mm", hideCredits = true; //]]></script> <script type="text/javascript" src="http://rnhckr.googlecode.com/files/rnhckr%20recent%20comments%20with%20avatars.js"></script> <script type="text/javascript" src="http://rnhckr.blogspot.in/feeds/comments/default?alt=json&callback=btf_recent_comments&max-results=5"></script> <div style='text-align: right;font-size: x-small;'><a href='http://rnhckr.blogspot.in/2012/11/how-to-add-recent-comments-widget-with.html' target='_blank'><span style="color: #eee83;">Get this Widget</span></a></div></b:if>

Customization

• If you need to change Avatar image size then replace “50” with your value 
• Replace “rnhckr.blogspot.in” with your blog name
• Replace “5” value with your choice value comments want to appear as highlighted I red
• If you need to change Anonymous avatar image then replacehttp://www.gravatar.com/avatar/?d=mm with your image Url

After all replacements now, “Save Your Widget” and Template.