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.
|
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
hi deepa
thnx for de response…it was of gr8 help to me…hv a few more doubts…see in this case basically we need to know the URL of the team member so as to pass the same as an array to the blog. Cant blogger pick up the profile image directly from the member’s profile?
I know what u method u hv suggested will work surely, but is there a way in which u can do it directly. I am asking this cause, say in case the member changes his pic in the profile den in the later case it will be directly taken from the profile, hence would be more efficient you know. I know i am asking for too much now 😛
Cheer
Kutchu
Kutchu..
u can get the profile-pic by visintg the person’s profile and right-clik the ppicture – properties – to get the url..
then again i would suggest that u r team mebrs use the 60 x 60 pics for best results…a synchronisd look for all..
otherwise..team members will be seen at variying dimentions
hope this helps
Deepa,
this comment has nothing to do with this post.
I recently added vodpod videos in my blog. Every time I have to go to my main vodpod page as it doesn’t work from my main blog. Do u think ther is a script error somewhere.
Priya..
I shall get back to you as early as possible on this issue
Deepa,
Thanks for this very helpful tip.
I have been struggling to find an answer to a related, but distinct question: can the Blogger template be modified to allow a reader to sort posts by author in a team blog ? the only technique I’ve find so far is to add the author to the label, but I don’t find it very satisfactory.
Any clue on this problem ?
Overzelus
Welcome..you have a valid point here..I shall get back to you..as soon as i can..till then u may have to use labels
hurm…i’m a newbie..so,its possible to have a team-blog..long way…
my blog
http://how-to-solve.blogspot.com
Nuaim
Welcome to my space
We all started as newbie.. so don’t worry..till you feel comfortable starting a team blog..do feel free to browse through and implement the blog-uplifting features posted here. Use the labels to locate more appropriate post. Hope you enjoy your time here.
Hi Deepa,
I was really excited to find this post, as I thought it would be the solution to my problem. However, I can’t follow the second part of your instructions because the code that you say to modify does not exist in my template.
I’ve gotten as far as adding the script to the head section, but I don’t know how to do the rest.
I’m using one of the rounders themes – can you help?
Thanks!
Elizebeth
hi..welcome
///I can’t follow the second part of your instructions///
Step 2 saya.. u have to paste the modified notepad (from step1) above the </head> tag… use Ctrl+F to locate the </head> tag
Step3:- locate <a expr:name=’data:post.id’/> using Ctrl+F and proceed.
hope this helps
hi thanks for such a nice hack …..
but i have one question. instead of showing the pic in front of the title, can we wrap it up in the text?
an example is :: en.blog.orkut.com
eagerly waiting for ur reply
@Ben
Welcome
thanks for the compliment
.. I am not sure if i understand you.. Do u want to show the “name of the post author”… beside each post title ?
.. or is it some other peice of text thats different for each author .. ?
Please clarify..
If you could share u r url.. it would be helpful
Thank you
actually this is the case:
i run a team blog at orkutaddons.blogspot.com … recently i used ur “show post author homepage” hack… which greatly impressed me…
see the post on en.blog.orkut.com , which is titled “I’m feeling serendipitous!” …. it has the author’s photo wrapped around “posted by” and the post text ….. how to achieve that?
Thanks for the hack!
I am getting an error message:
The element type “td” must be terminated by the matching end-tag “”.
Any ideas??
Hi Pinkbook, welcome here.
There is a </td> tag.. i forgot to highlight in red.. may be thats why you got confused.. i am so sorry
its this one immedialty next to /b:if shown in blue
</td>
<td width=’60px’>
Hope this helps
thanks for that fix deepa!
I have one other problem… I am loving the post author picture function, but I am wanting to use BOTH the post author picture, AND the “linking post author to respective profile” feature.
How do I modify the javascript so I can use both? Right now it only lets me do one or the other.
@Pink book
This test blog has both the author pic and the link-to-profile in posted by area.
Take care that the TEAM MEMBER name is enclosed within single quotes. (donot have space between quote and team member name)
Take care that the url is enclosed within single quotes… remeber not to leave any space between quote and url
hope this helps
Hi deepa….. 🙁
This is really a master piece hack i was searching for a long time…i have a team blog.
Help me pls…i followed all the instructions that u gave in this post…but still m not able to get the pics of my team members on their respective posts…what to do?
Guru,
Can you please upload your template (XML and text file) to some common filesharing site and give me the url.
(or add me to your team and give admin rights)
I will have to take a closer look to see why it is not working for you
Hi deepa,
Have invited you … do accept it and i will then grant the admin privilege… thanks for your help… 🙂
hi deepa, this is exactly what iw as looking for however in my template there is nothing in the template code that matches your step 3….can you still help?
Hi anon,
May be you are using the classic version of blogger template. Coz as far as i know, all new templates have some varation of the above code.
hi deepa, it’s anonymous again….can i send you my blogger code via email so you can take a look? where can i find your contact info? i coudlnt’ find your email address….
Deepa – You have some really great ideas here and I used the 5-star rating modification for my blog… as a novice I was surprised by the ease of implementing the code – Thank you!
@ktown
sorry for the dealyed response..been busy 😉
Hope the prob is solved.. or else ..u can invite me to u r team blog and grant admin previlages.. if its ok with u all.
else u can upload the xml to common fileshare and give me link.
Thanks for the appreciation.
Glad to see you here, boise