Add Recent Comments Widget with Avatars To Blogger

In the past tutorial, I've shared a simple Recent Comments widget, now you have the option to add a stylish Recent comments widget with round avatars, which comes along with comment excerpts. You also have the option to change default Anonymous Avatar Image.

How to add recent comments widget with avatars

Step 1. Go to Blogger Dashboard, then go to Layout and click on Add a Gadget link.

Step 2. In the popup window scroll down + choose HTML/Javascript

Step 3. Paste in the following code in 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://your-blog.blogspot.com/feeds/comments/default?alt=json&callback=w2b_recent_comments&max-results=5"></script>

Note

Replace your-blog with the name of your blog.
Replace the "5" values in red, with the number of comments you want to appear... from:

• numComments  = 5 

and

• &max-results=5 

To change the anonymous avatar, replace the following address with your own:

• http://www.gravatar.com/avatar/?d=mm 

To change the size of the avatar, replace 60 value in green with your own

Step 4. After you've made the changes, click Save... and you're done!

The credit goes to Hrish @ way2blogging.org

Add Random Posts Widget to Blogger

The Random Posts Widget will show random posts you have added to your blog. The main advantages of this widget is that it is loading pretty fast and shows thumbnails of your posts too, along with the comments link.

How to add Random Posts Widget to Blogger

Step 1. Log in to Blogger Dashboard, and select Template > Edit HTML (click on Proceed button if needed)

Step 2. Select "Expand Widget Templates"

Step 3. Find (CTRL + F) the following tag:

]]></b:skin>

Step 4. Just above it, paste the code below :

#random-posts img{float:left;margin-right:10px;border:1px solid #999;background:#FFF;width:36px;height:36px;padding:3px}

Step 5. Save Template.

Step 6. Go to Layout, click on Add a Gadget 

Step 7. Add a new HTML/JavaScript Gadget

Step 8. Paste the following code in the empy HTML box:

<ul id='random-posts'>
<script type='text/javaScript'>
var rdp_numposts=5;
var rdp_snippet_length=150;
var rdp_info='yes';
var rdp_comment='Comments';
var rdp_disable='Comments Disabled';
var rdp_current=[];var rdp_total_posts=0;var rdp_current=new Array(rdp_numposts);function totalposts(json){rdp_total_posts=json.feed.openSearch$totalResults.$t}document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&max-results=0&callback=totalposts\"><\/script>');function getvalue(){for(var i=0;i<rdp_numposts;i++){var found=false;var rndValue=get_random();for(var j=0;j<rdp_current.length;j++){if(rdp_current[j]==rndValue){found=true;break}};if(found){i--}else{rdp_current[i]=rndValue}}};function get_random(){var ranNum=1+Math.round(Math.random()*(rdp_total_posts-1));return ranNum};
</script>
<script type='text/javaScript'>
function random_posts(json){for(var i=0;i<rdp_numposts;i++){var entry=json.feed.entry[i];var rdp_posttitle=entry.title.$t;if('content'in entry){var rdp_get_snippet=entry.content.$t}else{if('summary'in entry){var rdp_get_snippet=entry.summary.$t}else{var rdp_get_snippet="";}};rdp_get_snippet=rdp_get_snippet.replace(/<[^>]*>/g,"");if(rdp_get_snippet.length<rdp_snippet_length){var rdp_snippet=rdp_get_snippet}else{rdp_get_snippet=rdp_get_snippet.substring(0,rdp_snippet_length);var space=rdp_get_snippet.lastIndexOf(" ");rdp_snippet=rdp_get_snippet.substring(0,space)+"&#133;";};for(var j=0;j<entry.link.length;j++){if('thr$total'in entry){var rdp_commentsNum=entry.thr$total.$t+' '+rdp_comment}else{rdp_commentsNum=rdp_disable};if(entry.link[j].rel=='alternate'){var rdp_posturl=entry.link[j].href;var rdp_postdate=entry.published.$t;if('media$thumbnail'in entry){var rdp_thumb=entry.media$thumbnail.url}else{rdp_thumb="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0JbdARo1FBwiAcR3-ACp_SDSM5MU21w2mA6ivvtH-Gd6hjHRoafhtG2vt3xpS-QddDDzpoZ6tvG95Jla4no-ELeoNCfvQdJpnryesm8WUKNxLe0V6RggBPmlRkI-KN6vhbUK0JPvrNks/s1600/default.jpg"}}};document.write('<li>');document.write('<img alt="'+rdp_posttitle+'" src="'+rdp_thumb+'"/>');document.write('<div><a href="'+rdp_posturl+'" rel="nofollow" title="'+rdp_snippet+'">'+rdp_posttitle+'</a></div>');if(rdp_info=='yes'){document.write('<span>'+rdp_postdate.substring(8,10)+'/'+rdp_postdate.substring(5,7)+'/'+rdp_postdate.substring(0,4)+' - '+rdp_commentsNum)+'</span>'}document.write('<div style="clear:both"></div></li>')}};getvalue();for(var i=0;i<rdp_numposts;i++){document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&start-index='+rdp_current[i]+'&max-results=1&callback=random_posts\"><\/script>')};
</script>
</ul>

Note: Replace no. 5 with the number of posts you want to be show.

Step 9. Press Save and Enjoy!