January 3, 2010

Each author has their profile image on blogger.

Back in August, I was setting up a blog for the local YMCA. They really were taking a proactive approach to getting their events and information out to the general public. They decided to have each of their directors and managers post updated information on regular basis.

With mulitple authors, though, came the desire to have their profile images or avatars appear next to their individual contributions. If you're familiar with Blogger or Blogspot, you know that having multiple author's images display is not a default setting. So I went searching for the wisdom of others. I found the perfect solution over at QuiteRandom.com. This fella is brilliant and truly saved the day for me.

I'll repeat some of what he mentioned in his post, but I'll also add some of the things I had to figure out on my own. Here goes...

FOR ONE AUTHOR.

Click Layout > Click Edit HTML > Click Expand Widget Templates >
Find the following line of code...<a expr:name='data:post.id'/>

...and add the following directly after it...
<b:if cond='data:post.author == "Author1_Username"'>
<span class="author"><img src="Image1_URL"/></span>
</b:if>

You will need to change the "Author1_Username" and the "Image1_URL" in the above code for every author you have. To find them for each author, you will first need to navigate to each author's profile. Once you find a profile, the "Author1_Username" is on the right...copy it. Mine is just..."Brack".

The "Image1_URL" can be found by right clicking on the image to the left. Click Copy Shortcut. Highlight "Image1_URL" and replace it by right clicking and pasting. Here is what mine would look like..."http://4.bp.blogspot.com/_8z2RRpErOAo/Sz98qxhLegI/AAAAAAAAAD8/1TeF7In4DBM/S220-h/brack.jpg". They are case-sensitive, so be careful. Most importantly don't forget to click Save Templates.

For more than one author add...
<b:if cond='data:post.author == "Author1_Username"'>
<span class="author"><img src="Image1_URL"/></span>
</b:if>
...for each author. Replace the two parts with the appropriate info.

The fella over at QuiteRandom.com also has some info about styling that might be worth a read.

Best of luck and if you have troubles, email me.

2 comments :

  1. thanks for your post :)


    my blog www.giddy-zone.blogspot.com

    ReplyDelete
  2. Yeah Thkx that code is simple

    ReplyDelete