Author: Deepa Govind

Team blog is a great way to develop a knowledgebase. You have people from varied background and expertise contributing towards the content of the blog. I received a request from Kutchu , who manages a team blog and wanted to display the pictures of the team-members near their respective posts. I think its a great way to encourage the members of the team-blog. Below is a Screenshot of how the posts & pictures will appear in a test-team blog
SAVE AND BACK UP YOUR TEMPLATE BEFORE MAKING ANY CHANGES

Here are few things that you need to bear in mind before implementing this. For best results.. the photos may be of the following dimentions Width =60 px Height=60 px Upload the photos to some common file-sharing network like googlepages-geocities..etc ( this is just to prevent loosing the urls) Make a list in the notepad as to the names of the team members and urls of their photos Team_Member 1  : URL of Photo Team_Member 2  : URL of Photo Team_Member 3  : URL of Photo Team_Member 4  : URL of Photo Team_Member 5  : URL of Photo Team_Member 6  : URL of Photo and save this notepad ( again as a precaution)

STEP :1 Copy the following into a notepad and make appropriate changes
<script type=’text/javascript’>
var team = new Array();
team[‘Team_Memeber 1‘]=’URL of the Photo‘;
team[‘Team_Memeber 2‘]=’URL of the Photo‘;
team[‘Team_Memeber 3‘]=’URL of the Photo‘;
team[‘Team_Memeber 4‘]=’URL of the Photo ‘;
team[‘Team_Memeber 5‘]=’URL of the Photo‘;
team[‘Team_Memeber 6‘]=’URL of the Photo‘;

function PostAuthorPic (authorname)
{
var pic = team[authorname];
document.write(“<img src='” + pic + “‘/>”);
}
</script>

STEP:2:- After making the changes… include the above code snippet at the position above the</head> tag

STEP:3 locate the following code in the template and make changes shown in red
<table border=’0′ width=’100%’><tr><td>
<a expr:name=’data:post.id’/>
<b:if cond=’data:post.title’>
<h3 class=’post-title’>
<b:if cond=’data:post.link’>
<a expr:href=’data:post.link’><data:post.title/></a>
<b:else/>
<b:if cond=’data:post.url’>
<a expr:href=’data:post.url’><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>
</b:if></td>
<td width=’60px’>
<script type=’text/javascript’> PostAuthorPic(‘<data:post.author/>’); </script>
</td></tr></table>

<div class=’post-header-line-1’/>
<div class=’post-body’>
<p><data:post.body/></p>
STEP:-3 Save and view the blog in browser

If you happen to see border around the pictures & wish to remove it.. locate the following tag and change the border width to zero as shown below
post img
{ border:0px solid $bordercolor; }

If you are glad in using this hack.. and appreciate my effort.. please do link back to me..Your appreciation is my motivation

If you are the only person contributing to your blog,.. then it makes sense to see that the POSTED BY <your name> is a static as a simple piece of text and does not link to any webpage. However, if the blog is a team blog … then each post will have the post author’s name displayed at the bottom of the post.. like POSTED BY <Post_author>.

By default this is also a static text and does not link anywhere. Wouldn’t it be a lot more better that the profile of each author is linked not only at the contributors section , but also at the posts that he / she writes. If a certain post is liked by a reader.. he would want to know more about the author… So lets give the reader the opportunity to know-the-post-author at the click of a mouse.. without having to scroll though the long list of widgets in the sidebar in order to locate the contributor’s list…Want to know how ???

Assuming that you know the profile URLs of the people contributing to your blog
STEP :- 1 A closer look at the PROFILE-URL
Example:- This is my profile URL
Deepa :- http://www.blogger.com/profile/08368941819092880320 where 08368941819092880320 is my Profile ID or the pID.
Every profile url is in this format.. so before advancing further to implement this hack.. I recommend that you prepare a list of contributors to your blog and their respective pID as shown below ..donot forget to see the Picture for reference

Team_Member ( use the name in the profile ) pID ( use pID number) Team_Member 1 : pID Team_Member 2 : pID Team_Member 3 : pID Team_Member 4 : pID Team_Member 5 : pID Team_Member 6 : pID Save this notepad as a precaution

STEP:-2 Copy the following code in a (new ) Notepad… You will be editing this

<script type=’text/javascript’>
var team = new Array();
team[‘Team_Memeber 1 ‘]=’ pID number ‘;
team[‘Team_Memeber 2‘]=’pID number‘;
team[‘Team_Memeber 3‘]=’pID number‘;
team[‘Team_Memeber 4‘]=’pID number‘;
team[‘Team_Memeber 5‘]=’pID number‘;
team[‘Team_Memeber 6‘]=’pID number‘;
NOTE:- There must not be any space between the singlequote and the name / ID characters. Orelse, this hack will not work
function makeprofilelink (authorname)
{
var pid = team[authorname];
document.write(“<a href=’http://www.blogger.com/profile/” + pid + “‘>” + authorname + “</a>”);
}
</script>

Replace the Team_Memeber names and the pID number Profile Numers…. then copy paste the code into the template just above the </head> tag

STEP:-3 Locate the following code in the template

1. Locate the following code in your template
   <b:if cond=’data:top.showAuthor’>
   <data:top.authorLabel/>
   <data:post.author/>
   </b:if>
2. Replace the <data:post.author/> with
   <script type=’text/javascript’> makeprofilelink(‘<data:post.author/>’);
   </script>
3. Now, your final Template code at this position must resemble something like this
   <b:if cond=’data:top.showAuthor’>
   <data:top.authorLabel/>
   <script type=’text/javascript’> makeprofilelink(‘<data:post.author/>’);
   </script>
   </b:if>

STEP:-4
Save and view your blog.. Each post author is now automatically linked to his/her profile beneath every post.

If you are glad in using this hack.. and appreciate my effort.. please do link back to me..
Your appreciation is my motivation
The code for this at blogger help has bugs and does not work