How To Add Recent Comment Widget With Thumbnails

Did you encounter a problem regarding the manner of inviting your readers to post creditable comments from your post? Where posting a comment takes time for the readers to think of what will be their comments to be posted in the comment box area. Because it takes time, they just simply search and go for another blog to find for the answers of their questions. But when they leave a short comment, it means that they are interested with the topic or they want to ask another thing which you did not include in your article.In the long run you as a blogger can build circle of readers in your blog. In order for you to that, we will put a widget in your sidebar that would invite them to leave their comments below your post because as they leave comments it will automatically be found in your Recent Comment widget in your sidebar. Let's do it friends.

---

How to Add Recent Comment Widget With Thumbnails

---

Step 1. Proceed to Blogger Dashboard, click Lay-out and hit Add Gadget, 

Step 2. After clicking the Add Gadget, a pop-up window will appear. Scroll down and select

HTML/Javascript (click the plus sign)

Step 3. Write a title of your widget and place the code below inside the empty box

<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://name of your blog.blogspot.com/feeds/comments/default?alt=json&callback=w2b_recent_comments&max-results=5"></script>

Short Customization:

1.To change the number of comments to appear in the widget, replace the value of 5 in numComments= 5 and max-results=5"
2. Change the  bold text in red name of your blog with your own blog's name
3. Change the thumbnail size (avatar) 60 with your own 

Step 4. Hit Save Template and enjoy.