Add Recent Comments Widget With Avatar For Blogger & Blogspot

                     
This is the tutorial for adding Recent Comment with Avatar Widget to your blogger or blogspot blogs. This is a simple method, adding some html codes to your blog layout. This is a popular widget which increases your visitors comments. This widget looks like above image.

First Go to your blogger Dashboard

1. Go to your Blogger Dashboard >> Layout >> Add a Gadget >> HTML/JavaScript. 

Add this HTML/JavaScript code

1. Add this Code to HTML/JavaScript Box and Name Recent Comments.
   
   

   <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  = 60,
    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://helplogger.googlecode.com/svn/trunk/w2b recent comments with avatars.js"></script>
   <script type="text/javascript" src="http://your-blog.blogspot.com/feeds/comments/default?alt=json&callback=w2b_recent_comments&max-results=5"></script>

• Change http://your-blog.blogspot.com with your blog address.
• Replace the value 5 for numComments = 5, and max-results=5  with the number of comments that you want.
• Change your Anonymous avatar by changing http://www.gravatar.com/avatar/?d=mm.

You have complete all! Success or Not ???

10:08

1 comment

Read more »