Home » Blogger Tutorials, Tricks and Hacks » Blogger Comments Tricks » Recent Comments Widget With Avatar

Welcome to our AllBlogTools.com v.3 new version, We are still in beta, please contact us to report an error.

|| View All Tutorials ||

Recent Comments Widget With Avatar

Recent Comments Widget With Avatar

1 Star2 Stars3 Stars4 Stars5 Stars

Report Error

932 views

Having a Recent Comments widget on your Blogger blog is a great way to give you and your site visitors an idea of how much activity and interaction your site gets from its readers. But wouldn’t it be nicer if you could also put the commenter’s avatar together with it to make the commenter more identifiable?

Well, here’s a nice simple widget that will give you just that: a Recent Comments widget with an avatar.

  1. Head over to the ‘Design’ page of your Blogger dashboard then go to ‘Layout
  2. Click on an ‘Add a Gadget’ placeholder
  3. Select ‘HTML/JavaScript’ on the gadget list
  4. Copy and paste the code below:
<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>

 

5. Now before you hit on that ‘Save’ button, be sure to change “yourblogname.blogspot” with your own blog’s URL.

Here are some of the widgets attributes you can switch on and off and alter to make it appear according to your preferences:

  • To change number of comments find this numComments = 5
  • If you don’t want to show avatar then find this code showAvatar = true and change value to ‘false’
  • To change avatar size, find this code avatarSize = 40
  • If you don’t want to show rounded avatars then find this code roundAvatar = true and change value to ‘false’
  • To set maximum number of characters, find this code characters = 40
  • To show more link find this code showMorelink = false and change value to ‘true’
  • 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”

6. Hit ‘Save

Credit to VenturealizeR for the tutorial.

Liked It ? Please Share

Comments

7 Responses | Post A Comment | Subscribe To Comments RSS Feed

  1. iqlima says:

    thank you, its work! :)

  2. Techplorium says:

    Thankz sooo much!

  3. kristy says:

    yeep !!! it’s work perfectly!!! thkz man!

  4. Thanks for sharing this trick. Its work in my template.

  5. Bension says:

    Thankz soooooooooooo much!

  6. No name says:

    Thankyou very much

  7. Your given code is very hard to copy and use please try to improve the way to given Blogger Recent Comments Widget code. wish you all the best.

Comments will be closed off on this post 365 days (1 year) after it is published. Apologies to this, but it's all about avoiding a growing comment spam problem. See our most recent posts where you can comment here