If in the past tutorial i've talked about a simple Recent Comments widget, now i'll be sharing to you a stylish Recent comments widget with round avatars, which comes along with comment excerpts.You have the option to change default Anonymous Avatar Image as well.
How to add recent comments widget with avatars
Step 1. Go to Blogger Dashboard, then go to Design >> Page Elements and Add a Gadget.
In the popup window scroll down + choose HTML/Javascript and paste in the following code:
<style type="text/css">
ul.btf_recent_comments {
list-style: none;
margin: 0;
padding: 0;
}
.btf_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;
}
.btf_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;
}
.btf_recent_comments li img {
padding: 0px;
position: relative;
overflow: hidden;
display: block;
}
.btf_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 = 50,
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://commentsavatar.googlecode.com/files/btf_recent_comments_with_avatars.js"></script>
<script type="text/javascript" src="http://Your Blog URL/feeds/comments/default?alt=json&callback=btf_recent_comments&max-results=5"></script>
Settings:
- 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:
and
- To change the anonymous avatar, replace the following address with your own:
- To change the size of the avatar, replace 60 value in green with your own
After you've made the changes, click Save... and you're done!
- 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
After you've made the changes, click Save... and you're done!
