How To Install Recent Comments Widget In Blogger
To add this awesome widget you need to follow a few steps :
Step#1 : Add The Widget
- Go to Blogger
- Layout > Add widget > HTML/JavaScript
- Copy the below given code :
<style type="text/css" scoped>Step#2 : Customize The Widget
ul.allbloggertricks_recent{list-style:none;margin:0;padding:0;}
.allbloggertricks_recent li{background:none!important;display:block;clear:both;overflow:hidden;list-style:none;border:1px solid transparent;border-radius:9px;max-height:100px;-webkit-transition-duration:.5s;-moz-transition-duration:.5s;-o-transition-duration:.5s;transition-duration:.5s;-webkit-transition-property:0;-moz-transition-property:0;-o-transition-property:0;transition-property:transform;margin:0 0 6px!important;padding:3px!important}
.allbloggertricks_recent li:hover{border:1px solid #ddd;
-webkit-transform:rotate(6deg);-moz-transform:rotate(6deg);-o-transform:rotate(6deg) }
.allbloggertricks_recent a {text-decoration:none;}
.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;width:35px;height:35px}
.allbloggertricks_recent li span{margin-top:4px;color: #222;display: block;font-size: 12px;line-height: 1.4;}
</style>
<script type="text/javascript">
//<![CDATA[
var
numComments = 5,
showAvatar = true,
avatarSize = 35,
roundAvatar = true,
characters = 40,
defaultAvatar = "http://www.gravatar.com/avatar/?d=mm",
hideCredits = true;
maxfeeds=50,
adminBlog='Your Name';
//]]>
</script>
<script type="text/javascript" src="https://dl.dropboxusercontent.com/u/76401970/All%20Blogger%20Tricks/abt-recent-commentsv3.js"></script>
<script type="text/javascript" src="/feeds/comments/default?alt=json&callback=allbloggertricks_recent&&max-results=50">
</script>
After adding the code check the configuration of the widget.
numComments - Shows the maximum number of comments to show in the widget.
showAvatar - Change to false if you want to hide avatar in the widgets.
avatarSize - The size of the avatars in the widget measured in pixels.
roundAvatar - Change to false if you do not want the avatar to be round in shape.
characters - No. of characters to show in the comment.
defaultAvatar - The picture to be used when a comment has no avatar.
adminBlog - Replace Your Name with the admin's name so his comments can be hidden.
- Save the HTML/JavaScript widget and place it wherever you want the recent comments to appear on your blog.