In one of my previous tutorials, I already shared to you the recent comments widgets for Blogger that can show the latest published comments from your posts. However, the main disadvantage of that widget is the simplicity of the design and I didn't have an option for displaying the users avatars or logo.The avatars are their profile picture in Google plus that will show when they drop a comment in one of your posts. So for those bloggers who want to add avatars, here's the stylish recent comments widget having round avatars and comment excerpts. The widget has an extra option for your creativity, you can now change the default image of the anonymous avatars, how nice is it?
As I always said that every widget that has a link to your articles will give you a chance for more page views. Don't worry this widget is SEO friendly and it can improve your SEO because of the internal backlinks. So you don't have a reason now why you should not use this gadget in your sidebar. Follow carefully my instructions below on how you can add this beautiful recent comment in your own blog.
Related Pots: Add Simple random Posts Widget To Blogger | Floating Social Media button Widget or Blogger | Simple Recent Posts Widget for Blogger | Ads Code Parser - Parse Any Ads code
Steps on How to Add Recent Comments Widget with Avatars
Step 1: Log in to your Blogger Dashboard > Go to LAYOUT and click the ADD A GADGET.
Step 2: In the pop-up window select the HTML/JavaScript option.
Step 3: Select then Copy the code below and Paste it inside the CONTENT big box. In the Title box type "Recent Comments" or whatever the title you want.
<style type="text/css">
ul.whowantstuffscomments{list-style: none;margin: 0;padding: 0;}
.whowantstuffscomments 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;}
.whowantstuffscomments 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;}
.whowantstuffscomments li img {padding: 0px;position: relative;overflow: hidden;display: block;}
.whowantstuffscomments 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://eea15f262f21e893b19e080c6fa6af37ca391d55.googledrive.com/host/0ByaqxhW3zoi_RWk1UW8xanNFYjA",
hideCredits = true;
//]]>
</script>
<script type="text/javascript" src="https://36e1445ac4b65e272cdb61ffba2e5373c3c503cb.googledrive.com/host/0ByaqxhW3zoi_aXlrb29NVlYwODg">
</script>
<script type="text/javascript" src="/feeds/comments/default?alt=json&callback=whowantstuffscomments&max-results=5">
</script><div style="font-size: 10px; float: right; margin-top: -15px">Get this <a href="http://whowantstuffs.blogspot.com/2015/11/add-recent-comments-widget-with-avatars-blogger.html" rel="nofollow" >Recent Comments Widget</a></div>
Widget Customization
- If you want more comments replace the "5" from [numComments = 5, and &max-results=5] Remember that there are two value that you need to replace.
- font-size: 12px;font-style: italic; >> 12 is the comment font size, remove the "font-style: italic;" line if you don't want the comment snippets to be italic.
- If you want to change the size of the avatar, Replace the "60" from [avatarSize = 60,]
- If you want to have an Square avatars remove the line that has a red color OR you can also change the "true" to "false" from [roundAvatar = true,]
- To add more character in comment snippets change the "40," from [characters = 40,]
- To change the avatars of anonymous users, replace the code with color blue below with the URL of your own image. https://eea15f262f21e893b19e080c6fa6af37ca391d55.googledrive.com/host/0ByaqxhW3zoi_RWk1UW8xanNFYjA. Example: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXkYFeJIfWyehyaxNf3w7mcjI2OyY-mH0bdvjWkw1BzyqNozAXlYTxwEnBRWednbz-yflZ9AdLHCTAUaK5X3sPjPvRicJinNH-yy7tIxTrx74VYTcLJmX51zSIaC3NoRU_12kjzEQMtTxm/s1600/Add-Recent-Comments-Widget-with-Avatars-To-Blogger.jpg
Also Read: How To Add Scroll Bars on Blogger Blockquote | Add Elegant Page Loading Effect to Blogger | How To change the Favicon on Blogger | Create Rollover Image effect in Blogger | All In One SEO Pack for Blogger
Final Words!
Once the widgets finally installed in your blog's sidebar your reader will notice that the other visitors are active in commenting at your articles and that will encourage him/her to post a comment in your blog. That's the benefits of using the recent comment widget in blogger. If you face any problem while adding the widget, you can ask me at the comment section and I will do my best to help you. That's all guys thank you so much!