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 BlogTariff 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. BlogTariff 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.

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://blogtariff.googlecode.com/files/btf_recent_comments_with_avatars.js"></script>
< script type="text/javascript" src="http://Your Blog URL/feeds/comments/default?alt=json&callback=btf_recent_comments&max-results=5"></script>

Customization

• If you need to change Avatar image size then replace “50” with your value as in Pink
• Replace “Your Blog URL” 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 replace http://www.gravatar.com/avatar/?d=mm with your image Url

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

 http://www.blogtariff.com/2012/08/how-to-add-recent-comments-widget-with.html

ရိုးရိုး လုပ္နည္းေလးပါ.....

Recent Comments Widget For Blogger

The Recent Comments Widget for Blogger displays recent blog comments on your sidebar, showing a snippet of comment along with the title of the post to which the comment was made. If you want to encourage your readers in leaving comments on your blog, this is a widget you shouldn't miss.

How To Install The Recent Comments Widget For Blogger

Step 1. Go to your Blogger Dashboard >> Design >> Page Elements >> Add a Gadget >> HTML/JavaScript.

Step 2. Copy and paste in the HTML/JavaScript box the following code:

<script style=text/javascript src="http://helplogger.googlecode.com/svn/trunk/recent comments widget.js"></script><script style=text/javascript >var a_rc=5;var m_rc=false;var n_rc=true;var o_rc=100;</script><script src=http://your-blog-name.blogspot.com/feeds/comments/default?alt=json-in-script&callback=showrecentcomments ></script><span id=rcw-cr><a href=http://helplogger.blogspot.com/2012/03/recent-comments-widget-for-blogger.html>Recent Comments Widget</a></span><style type=text/css> .rcw-comments a {text-transform: capitalize;} .rcw-comments {border-bottom: 1px dotted; padding-top: 7px!important; padding-bottom: 7px!important;} #rcw-cr {font-family: Arial,Tahoma;font-size:9px;padding-top:7px;display:block;} </style>

Step 3. Replace your-blog-name with your blog url.

Step 4. Click Save and you're done.

Enjoy!

http://helplogger.blogspot.no/2012/03/recent-comments-widget-for-blogger.html