Add Recent Comments Widget with Avatar in Blogger
Updated on July 10, 2016
In previous article i have shared with you recent comments widget for blogger, that is simple by style without having images and logos for default and anonymous commented users. Mostly readers did not like this gadget as it has not avatars feature for the users. So in this post i am going to share with you a stylish recent comments widget having rounded avatars for the commentators. It helps to inspire your blog readers, also helps to increase user knowledge experience of your website. Readers can also see all latest comments on your blog and by this way they can easily find and ask or reply that comment to other users. In other words this is the best way to boost the value of a webmaster's site with ease.
This beautiful Gadget has many professional qualities and features and you can completely customize it according to your desire. So that it could suite and fit to your website. In this way to can grow excellency of your site.
Add Recent Comments Widget with Avatar in Blogger
1. Login to your Blogger Dashboard >> Layout >> Now click on "Add a Gadget"link
<style type="text/css">
ul.latest_recent_comments{list-style:none;margin:0;padding:0;}
.latest_recent_comments li{background:none !important;margin:0 0 6px !important;padding:0 0 6px 0 !important;display:block;clear:both;overflow:hidden;list-style:none;}
.latest_recent_comments 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;}.latest_recent_comments li img{padding:0px;position:relative;overflow:hidden;display:block;}
.latest_recent_comments li span{margin-top:4px;color: #666;display: block;font-size: 12px;font-style: italic;line-height: 1.4;}
.latest_recent_comments span{display:none;}
</style>
<script type="text/javascript">
//<![CDATA[
// Recent Comments Settings
var
numComments = 6,
showAvatar = true,
avatarSize = 45,
roundAvatar = true,
characters = 30,
showMorelink = true,
moreLinktext = "More",
defaultAvatar = "http://goo.gl/onjdiO",
hideCredits = true;
//]]></script>
<script type="text/javascript">
//<![CDATA[
eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('6 E=E||5,7=7||1D,w=w||1z,k=k||"m://1x.P.g/1s/?d=1d",C=C||" 1c &1b;",u=(q u===\'r\')?h:u,y=(q y===\'r\')?U:y,j=(q j===\'r\')?h:j,I=(q I===\'r\')?U:j;1a 11(H){6 8;8=\'<N A="11">\';G(6 i=0;i<E;i++){6 o,z,2,n;3(i==H.10.b.p)18;8+="<M>";6 b=H.10.b[i];G(6 l=0;l<b.B.p;l++){3(b.B[l].17==\'16\'){o=b.B[l].F}}G(6 a=0;a<b.D.p;a++){z=b.D[a].15.$t;2=b.D[a].1n$14.X}3(2.f("/Z/")!=-1){2=2.v("/Z/","/s"+7+"-c/")}e 3(2.f("/T/")!=-1){2=2.v("/T/","/s"+7+"-c/")}e 3(2.f("/Q-c/")!=-1&&2.f("m:")!=0){2="m:"+2.v("/Q-c/","/s"+7+"-c/")}e 3(2.f("K.g/x/19-Y.J")!=-1){2="m://1.12.V.g/-1e/1f/1g/1h-1i/s"+7+"/1j.S"}e 3(2.f("K.g/x/1k-Y.J")!=-1){2="m://4.12.V.g/-1l/1m/13/1o/s"+7+"/1p.S"}e 3(2.f("K.g/x/1q.J")!=-1){3(k.f("P.g")!=-1){2=k+"&s="+7}e{2=k}}e{2=2}3(u==h){3(j==h){n="1r"}e{n=""}8+="<R A=\\"1t "+n+"\\"><x A=\\""+n+"\\" X=\\""+2+"\\" 1u=\\""+z+"\\" 1v=\\""+7+"\\" 1w=\\""+7+"\\"/></R>"}8+="<a F=\\""+o+"\\">"+z+"</a>";6 O=b.1y.$t;6 9=O.v(/(<([^>]+)>)/1A,"");3(9!=""&&9.p>w){9=9.1B(0,w);9+="&1C;";3(y==h){9+="<a F=\\""+o+"\\">"+C+"</a>"}}e{9=9}8+="<W>"+9+"</W>";8+="</M>"}8+=\'</N>\';6 L="";3(I==h){L="1E:1F;"}8+="";1G.1H(8)}',62,106,'||authorAvatar|if|||var|avatarSize|commentsHtml|commBody||entry|||else|indexOf|com|true||roundAvatar|defaultAvatar||http|avatarClass|commentlink|length|typeof|undefined|||showAvatar|replace|characters|img|showMorelink|authorName|class|link|moreLinktext|author|numComments|href|for|md|hideCredits|gif|blogblog|hideCSS|li|ul|commHTML|gravatar|s512|div|png|s220|false|blogspot|span|src|rounded|s1600|feed|latest_recent_comments|bp|AAAAAAAACsg|image|name|alternate|rel|break|b16|function|raquo|More|mm|NAMZejK41So|T0evV0_SSUI|AAAAAAAACso|ol6|PKkZipA|md_blogger_logo|openid16|k0U7v1WpNRs|T0euKMHQi_I|gd|DNqzinhvxt4|md_openid_logo|blank|avatarRound|avatar|avatarImage|alt|width|height|www|content|40|ig|substring|hellip|60|display|none|document|write'.split('|'),0,{}))
//]]></script><script src="http://www.your-website.com/feeds/comments/default?alt=json&callback=latest_recent_comments&max-results=5" type="text/javascript"></script>
4. Replace http://www.your-website.com with URL address of your site
How to Modify this Gadget
- To show less or more displayed comments, please change "6" with you desire value
- For changing Avatars size for default or anonymous users then simply replace the below url link with your image link http://goo.gl/onjdiO
- If you want to change the Avatars size then kindly replace "45" with other value of you choice
- If you do not like square Avatars size then simply delete above whole pink colored line
(source: bloggercell.com)