Add Recent Comments Widget Amongst Avatars To Blogger

In 1 of the previous tutorials nosotros shared a elementary Recent Comments widget that displays the latest comments published on the spider web log posts. However, the primary downside was that the widget didn't accept the selection to present the users' avatars. So, for those who'd similar to meet something more, here's a fashionable Recent comments widget alongside circular avatars as well as comment excerpts. Besides providing the selection of displaying the commenters avatars, we'll hold upwardly able to modify the default icon for the anonymous avatar equally well.

So, let's laid about adding this cool recent comments widget inward our Blogger blog...

How to add together recent comments widget alongside avatars

Step 1. Go to Blogger Dashboard as well as select your spider web log > become to 'Layout' as well as click the 'Add a Gadget' link:


Step 2. When the pop-up window appears, scroll downwardly as well as select the 'HTML/JavaScript' gadget:


Step 3. Copy as well as glue the code for the recent comments widget within the empty box:

<style type="text/css">
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 bridge {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  = " /search?q=recent-comments-widget-for-blogger">recent comments widget alongside avatars for Blogger inward the sidebar, he thinks that your spider web log is pretty active as well as that encourages him to postal service comments on your blog. This way, you lot tin assemble to a greater extent than or less active user base of operations to comment on your spider web log posts.

Share this post