How to Add Recent Comments Widget with Avatars

Whenever readers/visitors find any difficulty or posts suggestions or criticize about blog articles simply comments on blog. Webmaster should note all these comments by replying simple and attractive methods.
To flavor this Recent Comments widget you’ve to modify by using RN Hckr tutorials to look Comments widget with stylish and attractive. This widget is bloggercentral for all webmasters in converting readers/visitors views into comments.
Whenever readers/visitors comments on blog their profile image will be displayed, if readers/visitors avatars not available then default Anonymous image apprars. RN Hckr presents simple way of CSS code for “Recent Comments Widget with Avatars” webmasters don’t need to work hard for adding this widget their blogs. Let’s begin the tutorial how 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.

Install Over Extansion for more update Notification

RN Hckr