Previously we have discussed about moving post date below post title for better SEO (search engine optimization) and good looks… So today I thought of sharing the way to add the author name on the same line to appear below the post title. This does not have any SEO effect on your blog, but if you have a team blog then it is a great way of showing your readers the author of the post! In wordpress we can show the name of the author just below the Title or above! but blogger has a limitation here! however this limitation can be done away with if you follow the steps mentioned below.
So lets see how we can implement this hack and show the post author same as in the image above. In this tutorial we shall discuss
- Showing the Post author below post title along with the date
- Showing only the author name above or below title and also link them to their blogger profile.
- Styling up the author name in the way you want using a little of CSS.
So here we go…
CASE 1: Showing Author name below Post title along with date & link to the Profile:
This is effective as it saves space and also highlights the author. The steps are pretty simple. Make sure you have moved the post title in the similar way mentioned here. If not then you need to find the wrapping div of the date you are using and proceed in that way! However we shall recommend to follow the exact steps mentioned in this post for the betterment of your template!
So, now that you have made the changes proceed like this:
Implementation of the JavaScript code to show the author name:
- Noting down the Blogger Profile Name and ID: Everyone have a specific Blogger name and Id.
- Simply go to the author’s blogger profile and note down the exact name in exact case.
- Also if you look at the Profile URL then it is something like this: http://www.blogger.com/profile/03512256744724769113
The bolded and underlined part is the Id of the profile. Note it down also!
We shall need these name and ids on our next step
- Go to Blogger Homepage > Layout > Edit HTML and click on “Expand Widget Template”.
- Now find out the closing </head> Tag on your template and add the following snippet of code before that
<script type='text/javascript'>var team = new Array();
team["author1"]="ID1";
team["author2"]="ID2";
function makeprofilelink (authorname) {var pid = team[authorname];document.write("<a href=\"http://www.blogger.com/profile/"+ pid + "\">" + authorname + "</a>");
}
</script>
Note that you need to replace the author1 & ID1 with the author name and his/her ID you have noted previously. Also if you have more than 2 author then add successive lines in the similar way!
- Now find out the following code on your template [Provided that you have modified it in the way stated here]
<div class='date-header'>
<data:post.dateHeader/>&nbsp;&nbsp;at&nbsp;<data:post.timestamp/>
</div>
Replace it with this
<div class='date-header'>
Posted&nbsp;by&nbsp;<span class='author-above'><script type='text/javascript'>
makeprofilelink("<data:post.author/>");
</script></span>&nbsp;|&nbsp;<data:post.dateHeader/>&nbsp;&nbsp;at&nbsp;<data:post.timestamp/>&nbsp;&nbsp;
</div>
- Now preview your template. You should see something like this!
If not make sure you didn’t make any mistake. Once done Save the template…
Styling up the author name using CSS:
Just add the following piece of code on your template before the closing ]]></b:skin> (Ctrl+F to search it)
span.author-above {
background: transparent url(http://i43.tinypic.com/2v2biiv.png) no-repeat scroll 0 center;
font-size: 13px;
min-height: 16px;
padding-left: 18px;
line-height: 17px;
}
Preview the template and you should be able to see something like this. 
Do change the CSS code in the same way mentioned here [background, margin, padding and so] to make the style you like! For your ease we have uploaded the small user icon at tinypic and have included the URL of the image there. Change it the way you want! Once you are satisfied hit the Save Template button.
CASE 2: Showing only author name below/above the post:
If you don’t want to show the author name along with the date then don’t worry! We have made a hack for that also. In fact on following this trick you don’t even to make changes as mention on the previous post. Just make these changes from beginning.
Implementation of the Code:
- Make sure you have implemented the JS[JavaScript] code as mentioned before.
- Now on you template find something like this:[Tip: Search for data:post.title and make sure you have enabled “Expand Widget Template”]
<b:if cond='data:post.title'>
<h3 class='post-title entry-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>
- Now copy this code snippet on your clipboard [Ctrl+C]
- If you want to add the author name above post title then add the snippet above the previous code so that it looks like this
- Similarly if you want to add below then copy the snippet below the code so that it looks like this:
So what ever may it be after the modification you should see something like this.
Now its time to style them up using CSS
Styling up the author background using CSS:
As usual just before the closing add the following snippet of code before the closing ]]></b:skin>:
div.post-author {
background: #e9f6f6;
padding: 3px 0 4px 10px;
margin: 10px 0 20px 0;
font-size: 11px;
}
span.author-span {
background: transparent url(http://i43.tinypic.com/2v2biiv.png) no-repeat scroll 0 center;
font-size: 13px;
min-height: 16px;
padding-left: 18px;
line-height: 17px;
}
Click on PREVIEW and you should be able to see something like this…
Simply click on the SAVE TEMPLATE button now and you are done customizing! Obviously you can edit/change/modify the code in the previous manner. Also you may want to add a border to highlight the author. For that use this code instead
div.post-author {
background: #e9f6f6;
border: 1px solid #000;
padding: 3px 0 4px 10px;
margin: 10px 0 20px 0;
font-size: 11px;
}
span.author-span {
background: transparent url(http://i43.tinypic.com/2v2biiv.png) no-repeat scroll 0 center;
font-size: 13px;
min-height: 16px;
padding-left: 18px;
line-height: 17px;
}
Do change the color to the one that suits you best.
Well that’s it! If you have enjoyed this post then do share it with your friends using the social bookmarking buttons below. Also if you have any doubt or know any better technique then feel free to share with us!
Great tip dude. I love to display below the post…Will ask my designer to change my TZI theme…. Thanks a lot again…
Thanks buddy! I think in wordpress you dont have to do all these programming to enable that! I think you just need to enable Post author name which can be done from somewhere in the theme options or blog settings [I haven tried that yet 🙂 ]
@Swashata
you are write..In wordpress it is easy with Post author plugin
Thanks for clarifying it Harsh! I hope to move to WP soon 🙂
Wow !! Thanks !!!
How can I use different styles of posts for different members of a blog?
Please Explain Me Sir !!!
Thanks !!
Obviously you can! Just make another array like this:
var cssclass = new Array();
cssclass["author1"]="class1";
//and similar arrays..
Now replace the document.write with this:
document.write("<a class=\\"" + cssclass[authorname] + "\\" href=\\"http://www.blogger.com/profile/" + pid + "\\">" + authorname + "</a>");
This should work for you! Now use CSS class selectors to give the styles you want!
heeeelp…works BUT it doesn't link to my profile….when i hover on author the link is "blogger.com/profile/undefined" my blogger profile is public…help…and where to change to make the writing black?
My recent post Autor nou
On your script u currently have
team["Lucian-Alex"]="00651513853333226866";
team["Pupacilla"]="01278976510084045261";
Change them to
team["Lucian-Alex"]="00651513853333226866";
team["Pupacilla"]="01278976510084045261";
and it should start working!
And to make the writing black, add this CSS before the closing b:skin
.date-header a {
color: black;
}
If you face any problem, feel free to ask me 🙂
thx…works ! the color i solved it myself..it was rhe color for links on whole blog…color which i kinda hated..
You are most welcome 🙂
Hi.. thanks once again. I am using this for my new blog which will be about blogspot tricks. I am planning to have a Blogspot Power Users section there which will have links to blogs that provide good tricks for blogspot. I am definitely going to add your blog there.
A couple of quick question:
1) Instead of linking to my blogger profile can't I link to some other website ?
2) Below the post title I want to have "Posted By XXX | Date & Time | No. of Comments". Below this line I want to display Label. With your help I am able to customize for "posted by" and "date-time". How to customize for comments and labels ?
Thanks once again.
My recent post [Hoax Mail] LPG Cylinder Expiry Date
Thanks! A tutorial explaining your query is coming very soon!
help me!
is it possible to switch these words: "Posted" "at" "by" to another, because my blog is not english….
thank you very much 🙂
Yes sure… You can change it here Posted&
thank you so much. one last question: I would like the date format like that: "2010. May 14. 20:12". Is it possible?
Thanks again, and your blog is great! ?????
Hi, I would like to know if changing my blogger’s display as well as the posts’ author name into a new name has a bad effect my search engines’ ranking?
Thanks you so much for your valuable help.
Pingback: Working Guidelines on how to Treat Rear Acne | Acne Best Treatments
super love love love love this post! I have been searching for this trick like, for ages. I’m so grateful to find this. Thanks for sharing. GBU