Wednesday, June 6, 2012


Profile Gadget with avatars and post counts

This is especially for multi author blogs. In multi author blog the profile gadget is very simple looking. It only contains author names in <ul>/<li> list. There is "avatar" but that is the default blogger logo.

My multi author blog profile gadget looks like this:

It works on single author blogs, too, and one could customize it to look about the same as the default single author blog profile gadget, but I'll leave that for you as an exercise. :)

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

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 liking.

This was "thrown together" very quickly, but it works ok so I decided to publish it. Hope you like it.
[Hide comments] - [Show comments]
Click on a single comment to hide/show its text


Mr Admin said... [reply]

nice idea MS-potilas

MS-potilas said... [reply]

@Mr Admin
Thanks, and thank you for the idea, as it actually came from you when you suggested to make the post count code. So as you know, this was a "by-product" of the author info box hack you suggested. Afterwards I realized that this was more informative than the default profile gadget in a multi author blog, so I finished it, made also the singular/pluralis for word post/posts, and published it. :)

Mr Admin said... [reply]

@MS-potilas I hope from god bless you and give strength to be the leader in this domain

Rishabh said... [reply]

Thanks, I was looking for this!

One thing though - it looks awkward with a line through it, can I remove that? Please take a look (it's on the right):

MS-potilas said... [reply]

Hi, the divided background comes from your template style, it is defined as widget background.

Go to Template Designer (Design|Template|Customize) and select Advanced|Add CSS. Add the following line:

#HTML2 {background:white;}

Your profile gadget has id "HTML2" and this CSS definition targets that. In another blog it could be another id. You can preview the result in template designer. If it looks OK, click Apply to Blog.

Rishabh said... [reply]


Thank you so much, that worked perfectly!

Sudhir Dudeja said... [reply]

wow working perfectly soo simple as compare to your author widget

I wasn't able to install your author box .I want to include your script in my custom author box what should i do can you help me where should i modify this script so in author box it appear only as "author name" has written "posts"

Mac Mohan said... [reply]

Hi Admin,
the code is working partly right. I am not able to get the hyperlink to the profile of additional authors other than the main author. The other authors come as plaintext. can you please tell the reason / updated code.
my blog

MS-potilas said... [reply]

@Mac Mohan
Hi, there is some problem with the blog feed, for Izmail and Macmohan users there is no "uri" field in the xml source. Mac Mohan has that "uri" field, as every author should. I don't know how that can happen.

To overcome this problem, I made a special version of this gadget, which allows to set profile urls for users by using configuration. The hacked code is here: Hope you get it working.

Izmail said... [reply]

Hi Thanks for getting back immediately, i guess it has to do with not sharing the profile to be public. Once I shared the profiles, the link came up. anyway thanks for providing me an updated code.

Vishwas Navada said... [reply]

its great widget... perfectly working..

check my blog.

G. F. Barbato said... [reply]

Hi! I've been using your script for a couple of years in my genetics class blog ( Of course, as the semesters go on, the author list is becoming unwieldy. Is there a way to limit the output to a particular date interval?

MS-potilas said... [reply]

@G. F. Barbato


and thanks for using my gadget. I experimented a little bit with the script, and here's a way to limit counting of the authors for example to the last 365 days.

After line 66, which reads var authorUri = ""; add this code:

var datePart = entry.published.$t.match(/\d+/g);
var postDate = new Date(datePart[0],datePart[1]-1,datePart[2],datePart[3],datePart[4],datePart[5]);
var nowDate = new Date();
var diffDays = (nowDate-postDate) / (1000*60*60*24);
if (diffDays > 365) continue;

And now it ignores all posts that are 365 days old (and their authors). You can adjust the value to your needs.

Hope this helps :)

G. F. Barbato said... [reply]

I waited til finals were over and grades submitted before tinkering! Your suggested code worked beautifully.
Thanks so much for your help.
If you ever need a geneticist... :)

G. F. Barbato said... [reply]


I don't know if you're still working on the blog; but an interesting thing happened this weekend. The author blog counts started going a bit wonky on Wed (11/25/2015) -- skipping some authors and ignoring certain posts in the count. I can't find a rhyme or reason for this -- perhaps something to do with the large number of posts or authors (~70) in the blog.

I've poked at the code a bit, to no avail. If anyone has any ideas, all input gratefully appreciated! Thanks in advance, and cheers!~

MS-potilas said... [reply]

@G. F. Barbato

for some reason, the feed from your blog does not return 500 entries, but only 150 entries, and so the script analyzes only those and don't load subsequent entries. I don't know what could cause this.

But you could try this:

There is the number 500 in the script four (4) times. Change all these four 500s to 100s (simply change the digit 5 to 1). Test. I'll keep my fingers crossed. :)

G. F. Barbato said... [reply]


How about that!? That seems to have done the job.
Clearly, I didn't understand that part of the script -- I thought it was reading too few entries, so I INCREASED the number (in increments of 100, from 500 to 1000)...

Ah well... what do you expect from a geneticist? LOL!

Thanks again! Your scripts have been a huge help to me and my use of the blog in my classes.

Post a Comment

Related Posts Plugin for WordPress, Blogger...
See the hack
for this dynamic
views icon: