UrduBloggingHub | Informatvie Blog About SEO & Blogging: How To Add Recent Commentator Widget With Avatar To Blogger Blog

Recent Commentator  Widget with Avatars is another awesome style Comments widget,which shows the latest comments of the visitors along with round Avatars.It also shows a lil bit summary of the commenter.This Widget will show a beautiful Profile Picture or Avatar along with name and Comments.This Widget is usually placed at the footer of the blog,however you can place it in sidebar or any where in your blog.and this widget look like as;

Adding This Widget To Your Blog:

Follow below guideline to insert this awesome widget to your blog!

• →Go to Blogger Dashboard→Your Blog
• →Layout→Add a Gadget→HTML/Javascript
• Copy & Paste the below whole piece of code inside it.

HTML Code:

<style type="text/css">
ul.mscomments{list-style: none;margin: 0;padding: 0;}
.mscomments li {background: none !important;margin: 0 0 15px !important;border-bottom: 2px solid #E1E4E5;padding: 0 0 6px 0 !important;display: block;clear: both;overflow: hidden;list-style: none;word-break:break-all;}
.mscomments 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;}
.mscomments li img {padding: 0px;position: relative;overflow: hidden;display: block;}
.mscomments 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/AVvXsEj2ATzA7Y4ZBD-M2IvPx4Y0j3gl-FssLnnkmdIHOy5fNQE2ZRDJFs7gE0iPo7YUGDYOv9EQJJYTV_0ExX_h3yQck9tsEVznGlbI-Xh5XY6Hf_IwImXqqLNaQ2x9xgimaOKkHCUG_8qapLS5/s1600/default-avatar.jpg",
 hideCredits = true;
//]]>
</script>
<script type="text/javascript" src="https://ms-design.googlecode.com/svn/ms-recent-comment-widgets.js"></script>
<script type="text/javascript" src="/feeds/comments/default?alt=json&callback=mscomments&max-results=5"></script><div style="font-size: 10px; float: right; margin-top: -15px"><a href="http://urdublogginghub.blogspot.com" rel="nofollow" >Widget by UBH Blog</a></div>

Customize This Widget:

1. Remove no 5 with your own choice to show maximum comments.
2. Change 60 to your own choice,if you wanna change avatar size.

• Need Help:

We hope this tutorial helps you further decorate your blogs like never before and create beautiful widgets that may engage your readers even more. Let us know if you need any help via comment section below or make a tweet to @MrAbdullahMalik. Peace and blessings buddies. :)