How To Add Recent Comments Widget With Avatar For Blogger & Blogspot

15 February 2013

How To Add Recent Comments Widget With Avatar For Blogger & Blogspot

Namecheap.com - Cheap domain name registration, renewal and transfers - from only $3.98/Year

Hello!
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

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

Add this HTML/JavaScript code

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 ???

Please Share it! :)

0 comments:

Your feedback is always appreciated. We will try to reply to your queries as soon as time allows.

Note:
1. To add HTML CODE in comments then please use our HTML Encoder
2. You can always Test the tutorial on our HTML Editor
3. Please do not spam Spam comments will be deleted immediately upon our review.

Regards,
Imtiaz Ahmed

15 February 2013