Auto Multi Author Profile Info widget for Blogger

I like blogger because it is possible to edit and tweak simply to add new widgets and other useful stuffs. You have the freedom to do anything and make whatever changes you like to have.

Now I have a nice and very useful widget for blogger/blogspot users who blog with multi authors. It shows all of your blog authors Avatar and Post count automatically plus it gives a link to google+ profile, with out any touch in coding or anywhere. This widget are really very useful to new bloggers who don't want to play with codes. And it always give you updated informations. This is especially for multi author blogs. It works on single author blogs too, and you could customize it as you need, but I'll leave that for you as an exercise.

*No need any DEMO it will work with any Blogger Template, but if it don't work let me know :)*

Install this widget in Blogger

Installation is simple. Add HTML/Javascript gadget into your blog, and paste the following code and save-

<style type="text/css">
.author-line{background-color:#eee;border:2px solid #ddd;border-radius:10px;font-size:11px;padding:10px;margin:2px 0}.author-avatar{border-radius:100px;box-shadow:0 0 15px #fff;vertical-align:middle}
</style>
<script type="text/javascript">
function replaceAuthorVars(e,t,n){if(!t||!t.author)return e;var r=t.author;var i="";if(r.uri&&r.uri.$t!="")i=r.uri.$t;var s=urlNoAvatar;if(r.gd$image&&r.gd$image.src)s=r.gd$image.src;if(s=="http://img2.blogblog.com/img/b16-rounded.gif"&&urlNoAvatar!="")s=urlNoAvatar;var o="s"+sizeAvatar;s=s.replace(/\/s\d\d+-c\//,"/"+o+"-c/");if(cropAvatar)o+="-c";s=s.replace(/\/s\d\d+(-c){0,1}\//,"/"+o+"/");var u=r.name.$t;var a='<img class="author-avatar" height="'+sizeAvatar+'" width="'+sizeAvatar+'" title="'+u+'" src="'+s+'" />';if(i!="")a='<a href="'+i+'">'+a+"</a>";if(maxUserNameLength>3&&u.length>maxUserNameLength)u=u.substr(0,maxUserNameLength-3)+"...";var f=u;if(i!="")f='<a class="profile-name-link" href="'+i+'">'+f+"</a>";e=e.replace("[user]",f);e=e.replace("[image]",a);e=e.replace("[#]",n);e=e.replace("[count]",t.count);if(t.count!=1)e=e.replace("[post]","posts");else e=e.replace("[post]","post");return e}function showAuthors(e){for(var t=0;t<e.feed.entry.length;t++){var n=e.feed.entry[t];var r="";if(n.author[0].uri&&n.author[0].uri.$t!="")r=n.author[0].uri.$t;var i=n.author[0].name.$t;if(blauthors[i])blauthors[i].count++;else{var s=new Object;s.author=n.author[0];s.count=1;blauthors[i]=s}}if(e.feed.entry.length==500){blndxbase+=500;document.write('<script type="text/javascript" src="http://'+window.location.hostname+"/feeds/posts/default?redirect=false&max-results=500&start-index="+blndxbase+'&alt=json-in-script&callback=showAuthors"></'+"script>");return}var o=[];for(var u in blauthors)o.push([u,blauthors[u]]);o.sort(function(e,t){if(t[1].count-e[1].count)return t[1].count-e[1].count;return e[1].author.name.$t.toLowerCase()<t[1].author.name.$t.toLowerCase()?-1:1});document.write("<di"+'v class="blog-author">');for(var t=0;t<o.length;t++){var a=o[t][1];document.write("<di"+'v class="author-line">');document.write(replaceAuthorVars(txtAuthorLine,a,t+1));document.write("</d"+"iv>")}document.write("</d"+"iv>")}var maxUserNameLength=42;var txtAuthorLine="[image] [user] has written [count] [post]";var sizeAvatar=48;var cropAvatar=true;var urlNoAvatar="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4Yd3_iL5NrWKdjwEt2bizhEWIhADMXqf9AUZFjCAS9pgwFM6hOFEzXibD3rasuxY97ALg8a36A_R8k6nYZgkmyNxdJBiQAawyyPR17SuPb6ohi1aYVXOpnmVWIc4RdVQ2ziuYhFkiy-Y/"+sizeAvatar+"/avatar_blue_m_96.png";var blauthors={};var blndxbase=1;document.write('<script type="text/javascript" src="http://'+window.location.hostname+'/feeds/posts/default?redirect=false&max-results=500&alt=json-in-script&callback=showAuthors"></'+"script>")
</script>

You can configure some things in the script: maximum user name length, author line template, avatar size, and is avatar cropped or streched. As always, you can also modify the CSS to your taste. And Let me know your Feedback :)

This widget script made by MS-potilas of http://yabtb.blogspot.com, I just modified and reshared this script.