HOW TO ADD RECENT COMMENTATOR WIDGET WITH AVATAR TO BLOGGER BLOG

HOW TO ADD RECENT COMMENTATOR WIDGET WITH AVATAR TO BLOGGER BLOG


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/AVvXsEg1sIYXQhDhavgOj-RhtsSAysy7zToexrFCMAi8sFyoyqqS8F-17_k2R2CafCWXKjM11NhDOMF0ZdvPWyGE9i9m0MOfwcY_nD3nm-6kVVjB3cLhoT46FM9mVBL_KlevVJbTGMwAsvfGh8Ar/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.

Comments

Popular posts from this blog

HOW TO ADD ANNOUNCEMENT STICKY NOTIFICATION BAR TO BLOGGER

Hacking அறிந்தும் அறியாமலும் – பாகம் 2