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:
- 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
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]
Replace it with this
- 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)
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:
- Now on you template find something like this:[Tip: Search for data:post.title and make sure you have enabled “Expand Widget Template”]
- 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>:
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
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!