New Published Post: How To Fix Adsense Not Showing After Redirecting Blogger To Custom Domain
Like Us:

How to Add Recent Comment Widget With Thumbnails

Having a problem on how to invite your readers to post creditable comments from your post? Posting a comment takes time for your readers to think of what will be their comment to be posted in your comment box area and sometimes they just leave and go for another blog to search for the answer of their questions. But when they leaved 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. Consequently, in the long run you as a blogger  could established  a regular 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.

How to Add Recent Comment Widget With Thumbnails

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

adding recent comment widget

Step 2. After clicking the Add Gadget, a pop-up window will appear. Scroll down and select
HTML/Javascript (click the plus sign)
adding recent comment widget

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

adding recent comment widget

<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;
<script type="text/javascript">
    // Recent Comments Settings
 numComments  = 5,
 showAvatar  = true,
 avatarSize  = 60,
 roundAvatar = true,
 characters  = 40,
 showMorelink = false,
 moreLinktext = "More »",
 defaultAvatar  = "",
 hideCredits = true;
<script type="text/javascript" src=" recent comments with avatars.js"></script>
<script type="text/javascript" src="http://name of your"></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!
Credits goes to helplogger with some modification from me.
About the Author:
tilt  hover effect
Hello folks! This is Viral Apps, the admin of this blog. No words could described my grateful appreciations to all newbie and professional bloggers around the world and most especially to Almighty God who gave me the wisdom...Read More
Follow him @ Twitter |Facebook

No comments :

Post A Comment!

Post A Comment!
We love to hear your feedbacks and suggestions. We will try our best to reply to your queries as soon as time allows. Please keep in mind that all comments are moderated manually by our editors team to minimize spamming, and all the links are nofollow.

1. To add HTML code in the box, please use our HTML editor generator.
2. Please do not spam. Those type of comments will be deleted upon our review.
3. We should appreciate an individual and suggestive discussion.

Best Regards,

Cerwenlloyd Gefjun

Related Posts Plugin for WordPress, Blogger...