How to add comment widget to your blog

By: Mobile BUzz on 11:28

How to add recent comment widget to your blog:

Hi friends! Ok How about your blog now? Hope it is going fine. Now today I'm going to teach you about an essential widget that you should have in your blog. This is about how to add recent comments widget to your blog. This feature is not supplied by blogger and we should add it manually by using a code. This is not hard and you can do it easily. After adding this widget you can see a list of recent comments on your blog and new visitors will also like to add a new comment. Let's go,

1. Got to your blogger dashboard and select your blog

2. Go to Layout

3. Click on Add a gadget

4. Choose html/javascript by clicking '+' symbol

5. Now paste the below code in 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  = 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://www.bloginnk.blogspot.com/feeds/comments/default?alt=json&callback=w2b_recent_comments&max-results=5"></script>

6. Change www.bloginnk.blogspot.com with your blog URL

7. Click save

8. You are done!

Don,t Forget post a comments below. If you want more stuffs like this, please visit us by simply clicking a bookmark button on your browser.