Stylish Recent Comment Widget for Blogger with Avatar ~ Blogger Sourab || Voice of Technology

Hello friends, i am Blogger Sourab, Hope all are well by grace of allah/god.
Today i gonna to show a tutorial, how to add a Stylish blogger recent comments widget.

Via this widget that Recent Comments on your blog will show in the way Stylish dissolve.

DEMO

It's very simply and easy. Auto match it with your blogger theme,

First go to Blogger Dashboard > Select Your Blog > Layout and "Click on" Add a Gadget then select HTML/JavaScript.
In the Title write widget name and In the Content paste the JavaScript.

 <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/AVvXsEiCUsZj2FNCSqQCjQMpyxFuOUmAZr0Cnm8e3EsO0fPF1wLA7cY6CiQmIl1fMgGgh3JnXRWuT0yWWWwkumspP5mn5mnd8-tvopCFjyK_tONfLsBUwJ5PV9cw8SJYmCfKGWS2jKwQ6Lcqhq9z/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://en-bloggersourab.blogspot.com/" rel="nofollow" >Widget by Blogger Sourab</a></div>

To understand the problem, in the post through comment said.

Full Credit: Muhammad Subel

Stylish Recent Comment Widget for Blogger with Avatar

Related Post