|
|
Hi guys! This the next tip in my series about making your blog more attractive. If you had missed the earlier versions, then click on the following links to read about them - Tip 1, Tip 2, Tip 3. This post basically deals with adding the text "Posted by" followed by the author name. If you wish to display the labels below the author name, well we have got the code that as well. Still confused? Check out the screen shot below!!!
The main advantage of adding tags/labels below your post title is that it will provide better navigation on your blog and your labels will get indexed by major search engines like Google. Interested to add this stuff on your blog??? Well, just follow these steps.
1. Login to your dashboard. Navigate to "Layout>>Edit HTML" from your dashboard. Make a back up of your template before you make any changes in the template.
2. Expand your template. To do so, make sure you have a tick mark enabled to the left of this text "".
3. Once expanded, just search for the following piece of code. Use "CTRL+F" to fasten your search results.
<div class='post-header-line-1'>
4. Paste the following piece of code just below the line mentioned in step 3.
<b:if cond='data:blog.pageType == "static_page"'>
<b:else/><span class='post-author vcard' style='no-repeat;'>
<b:if cond='data:top.showAuthor'>
<data:top.authorLabel/>
<span class='fn'><data:post.author/></span>
</b:if>
</span>
</b:if>
<br/>
<span class='post-labels'>
<b:if cond='data:post.labels'>
Tags :
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'> | </b:if>
</b:loop>
</b:if>
</span>
<b:else/><span class='post-author vcard' style='no-repeat;'>
<b:if cond='data:top.showAuthor'>
<data:top.authorLabel/>
<span class='fn'><data:post.author/></span>
</b:if>
</span>
</b:if>
<br/>
<span class='post-labels'>
<b:if cond='data:post.labels'>
Tags :
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'> | </b:if>
</b:loop>
</b:if>
</span>
5. That's it!!! Save your template!!!
Go check out your homepage or post page, I'm sure you should find the author name followed by the labels you tagged with your post. I hope you enjoyed this post. See you soon with another interesting and attractive tip on my next post. We love to hear from you, so please keep your comments coming!!!
Click here to subscribe to FREE email updates from "Everything About Blogging", so that you do not miss out anything that can be valuable to you and your blog!
The footer section look cool. Write a post to explain how to create this
REPLY@Anonymous: Yeah! I will publish the code for the footer later on my blog. It's pretty complex to explain the installation for the footer I'm using!!
REPLYHey Mukund,,, your footer looks awesome.... can you please publish a post on adding this footer!!!!!!!!!!
REPLY@armaan: Thanks armaan!! The coding for the footer is pretty complex! So, I'm not sure if I can publish a post for the same. Thanks for the comment!
REPLYAwesome work man... great series....
REPLYcan you please also share your footer customization code... Your footer looks gr8...
And how did you added those categories in bottom???
@Dhamil: Thanks for the comment man! I hope you enjoy the upcoming posts in the series as well! Yeah! The coding for the footer is too complex. So, it's pretty difficult to publish an article for the same!!!
REPLYi just love this post..
REPLYyou all "Make Your Blog More Attractive" tips are truly nice..
but how you created footer like Thesis theme
pls do share it over here..
thanks for sharing..
@prashant: Thanks for the comment prashanth. It's not too complex as you think. But, I can't publish a post on it because narrating how to install the footer is a big process. I hope some day I will have time to post about this footer.
REPLY^^^ Atleast just share, how did you added those categories section in the footer. I already have a three footer section. I have been trying to add the category section in the footer and dying hard to add those... You can make a post in series, say the category section, then the three footer section and lastly the attributes section....... Hope you will listen to your fans... ;)
REPLY@Rajeev: The last line is pretty tricky! I will for sure post about this footer! I'm planning to sell this footer for $2. I mean the footer customization as a service. That's the only reason I'm delaying the post.
REPLY@All. You can get the footer layout just by viewing its source code. Search for the CSS and add sections as required. That simple...
REPLYI have added a similar layout on my blog and I'm soon gonna make a post on this...
@Paul Collins: Well, that's right! How ever, the credit goes to me for finding the exact CSS to apply on blogger. By the way, I'm already half way with the post. Will post about this trick on my blog soon.
REPLY@Mukund For your concern, i'm not using you blog source code. I'm using the source code of a custom thesis wordpress theme and making two versions of the footer tweaks. One for fluid and other one for fixed. I'm almost finished with my post and will be posting it soon this week...
REPLYThanks for the tip paul!!!
REPLY@Paul Collins: Glad to know that you are developing one on your own. I published the article on my blog. May be you are little late!!!
REPLY@Anonymous: I would be happy if you leave your name and site URL when you comment. Any way, you can find the article about the thesis footer on my blog now!
REPLY@Anonymouscheck out this site,,,,,,,
REPLYtricksterpc.blogspot.com
hi,check out this site,,its really coooool
REPLYtricksterpc.blogspot.com
Use the tab below to comment. No spam please!!!
POST YOUR COMMENT