Sunday, 17 June 2012

Recent Comments Widget For Blogger



Recent Comments Widget With Avatar For Blogger
The Recent Comments Widget for Blogger displays recent blog comments on your sidebar.You can use this widget to display the recent comments of any blogger blog. In this widget we can show the Avatar of Commenter using. As you seen my Recent Comments Widget, this looks exactly same to my Recent Comments Widget.This widget is highly customizable. So that you can easily customize your recent comments widget.You can also set the default avatar image and much more things that you can easily customize.

How To Add Recent Comments Widget for Blogger With Avatar To Blogger?

1, Go to Blogger Dashboard Layout.
2. Click on Add a Gadget > HTML/JavaScript.
3. Paste below code and save it.

<style type="text/css">
ul
.w2b_recent_comments {
list
-style: none;
margin
: 0;
padding
: 0;
}

.w2b_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;
}

.w2b_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;
}

.w2b_recent_comments li img {
padding
: 0px;
position
: relative;
overflow
: hidden;
display
: block;
}

.w2b_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
= 40,
roundAvatar
= true,
characters
= 40,
showMorelink
= false,
moreLinktext
= "More »",
defaultAvatar
= "http://www.gravatar.com/avatar/?d=mm",
hideCredits
= true;
//]]>
</script>
<p style="display:none;">Recent Comments Widget for Blogger With Avatar For Blogger by <a href="http://beautifulbloggerwidgets.blogspot.com/">Beautiful Blogger Widgets</a></p>
<script type="text/javascript" src="http://bloggerblogwidgets.googlecode.com/svn/trunk/w2b-recent-comments-w-gravatar.js"></script>
<script type="text/javascript" src="http://yourblogname.blogspot.com/feeds/comments/default?alt=json&callback=w2b_recent_comments&max-results=5"></script>

4. Now change yourblogname.blogspot.com with your own blog URL.

Please Sign-In to Blogger before creating the Gadget.


Customizations (Optional)

  • To change number of comments find this numComments = 5,
  • If you don't want to show avatar then find this code showAvatar = true
  • To change avatar size find this code avatarSize = 40
  • If you don't want to show rounded avatars then find this code roundAvatar = true
  • To set maximum number of characters find this code characters = 40
  • To show more link find this code and change value to true showMorelink = false
  • If you enable show more link value then you can change the text which shows more link.Find this code moreLinktext = "More »"
  • To change default avatar image find this code defaultAvatar = "http://www.gravatar.com/avatar/?d=mm

5. Now save you widget.

Now you should have a working Recent Comments Widget for Blogger With Avatar on your blog.
I hope you all will like this gadget. Do not forgot to share this widget with your friends.

No comments:

Post a Comment

Looking For Your Favorite E-Books, Softwares, Movies etc. Let Us Know, All You Need To Do Is Comment & Subscribe Our Blog And Get it soon