In one of my previous tutorials, I have shared a simple Recent Comments widget
having the ability to display the lastest comments published on the
blog posts, however the main disadvantage of it was that it didn't have
the option of showing the users' avatars, so for those who need
something more, I would recommend adding this stylish Recent comments
widget with round avatars and comment excerpts. Besides having the
option of displaying the avatars of commenters, we can also change the
default image for the anonymous avatar.
So let's begin adding it...
Step 1. Go to Blogger Dashboard, select your blog and go to Layout, then click the Add a Gadget link.
Step 2. When the popup window appears, scroll down and choose HTML/Javascript
Step 3. Copy and paste the following code inside the empty box:
- replace http://ngeblogbarengbareng.blogspot.com/ with the name of your blog.
- by default, there will be displayed a number 5 comments - replace the "5" values in red in order to show more comments
- to change the anonymous avatar, replace the following address with the url of your image:
Step 4. After you've made the changes, click Save... and we're done!
Once a reader finds a recent comments widget in your blog's sidebar, he comes to know that you blog is pretty active and that encourages him to post comments on your blog. In this way you can gather some active user base to comment on your blog posts.
So let's begin adding it...
How to add recent comments widget with avatars
Step 1. Go to Blogger Dashboard, select your blog and go to Layout, then click the Add a Gadget link.
Step 2. When the popup window appears, scroll down and choose HTML/Javascript
Step 3. Copy and paste the following code inside the empty box:
<style type="text/css">Note
ul.helploggercomments{list-style: none;margin: 0;padding: 0;}
.helploggercomments li {background: none !important;margin: 0 0 6px !important;padding: 0 0 6px 0 !important;display: block;clear: both;overflow: hidden;list-style: none;word-break:break-all;}
.helploggercomments 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;}
.helploggercomments li img {padding: 0px;position: relative;overflow: hidden;display: block;}
.helploggercomments 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 = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuO5T-k7rxn1I8ChH2uM4sD4NAOzUVKEmcSdLe9YYmjOlmf9YOKcUpQxzRxWoTZeqBA-C_LwcG92ZXAw2X9hk57U0-TCd39ai-k_N8su8XlTK0ohCuQheaIXwoSDopBsDeDmP2rEAMctgs/s1600/default-avatar.jpg",
hideCredits = true;
//]]>
</script>
<script type="text/javascript" src="http://helplogger.googlecode.com/svn/trunk/helplogger/[helplogger.blogspot.com]recent-comments.js"></script>
<script type="text/javascript" src="http://ngeblogbarengbareng.blogspot.com/feeds/comments/default?alt=json&callback=helploggercomments&max-results=5"></script>
- replace http://ngeblogbarengbareng.blogspot.com/ with the name of your blog.
- by default, there will be displayed a number 5 comments - replace the "5" values in red in order to show more comments
- to change the anonymous avatar, replace the following address with the url of your image:
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuO5T-k7rxn1I8ChH2uM4sD4NAOzUVKEmcSdLe9YYmjOlmf9YOKcUpQxzRxWoTZeqBA-C_LwcG92ZXAw2X9hk57U0-TCd39ai-k_N8su8XlTK0ohCuQheaIXwoSDopBsDeDmP2rEAMctgs/s1600/default-avatar.jpg- to change the size of the avatar, replace 60 value in green.
Step 4. After you've made the changes, click Save... and we're done!
Once a reader finds a recent comments widget in your blog's sidebar, he comes to know that you blog is pretty active and that encourages him to post comments on your blog. In this way you can gather some active user base to comment on your blog posts.
