TUTORIAL IT: Recent Comments Widget With Avatar For Blogger/Blogspot

Wednesday, November 11, 2015

How to Add Recent Comments Widget to Blogger

Goto your blogger dashboard
Navigate to 'layout'
Click on 'add a gadget'
From the popup options, select 'html/javascript'
Code and paste the code below in the text field.

<style type="text/css">
ul.md_recent_comments{list-style:none;margin:0;padding:0;}
.md_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;}
.md_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;}
.md_recent_comments li img{padding:0px;position:relative;overflow:hidden;display:block;}
.md_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    = true,
moreLinktext    = "More »",
defaultAvatar     = "http://www.gravatar.com/avatar/?d=mm",
hideCredits    = true;
//]]>
</script>
<script type="text/javascript" src="http://makingdifferent.github.com/blogger-widgets/md-recent-comments-gravatar.js"></script>
<script type="text/javascript" src="http://www.informationtutorial15.blogspot.com/feeds/comments/default?alt=json&callback=md_recent_comments&max-results=5"></script>

Replace the URL in blue with your URL.
Save the gadget.

Also Read: Facebook Popup Like Box With Timer For Blogger
Social Follow and Subscription Widget For Blogger
Floating Social Share Button For Blogger

NOTE: You can customize the recent comments blogger widget above by making the following optional changes

Setting the number of comments to be displayed. To do this change, numComments = 5,
Choosing either to display images or not. To do this, change showAvatar = true, to showAvatar = false,
Choosing a different avatar to be displayed when the commentator has no image. to do this change the image URL ("http://www.gravatar.com/avatar/?d=mm",) in the code.

Pages

Wednesday, November 11, 2015

Recent Comments Widget With Avatar For Blogger/Blogspot

How to Add Recent Comments Widget to Blogger