Make Your Blog More Attractive - Tip 4

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!!!
Author-Name-Post-Labels
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.
Make-Your-Blog-More-Attractive
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>
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!!!

Enjoyed the article?
Subscribe to this Blog via Email:

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!

    Other Recommended Posts

  • Blogger Tutorials
Anonymous

The footer section look cool. Write a post to explain how to create this

REPLY
Mukund said on February 23, 2011 at 9:37 PM :

@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!!

REPLY
armaan said on March 1, 2011 at 8:27 PM :

Hey Mukund,,, your footer looks awesome.... can you please publish a post on adding this footer!!!!!!!!!!

REPLY
Mukund said on March 1, 2011 at 9:37 PM :

@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!

REPLY
Dhamil said on March 2, 2011 at 12:54 PM :

Awesome work man... great series....

can you please also share your footer customization code... Your footer looks gr8...
And how did you added those categories in bottom???

REPLY
Mukund said on March 2, 2011 at 7:19 PM :

@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!!!

REPLY
prashant said on March 3, 2011 at 8:41 PM :

i just love this post..

you 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..

REPLY
Mukund said on March 3, 2011 at 10:04 PM :

@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
Rajeev

^^^ 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
Mukund said on March 7, 2011 at 12:41 AM :

@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
Paul Collins

@All. You can get the footer layout just by viewing its source code. Search for the CSS and add sections as required. That simple...
I have added a similar layout on my blog and I'm soon gonna make a post on this...

REPLY
Mukund said on March 16, 2011 at 11:02 PM :

@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
Paul Collins

@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...

REPLY
Anonymous

Thanks for the tip paul!!!

REPLY
Mukund said on March 18, 2011 at 9:06 PM :

@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
Mukund said on March 18, 2011 at 9:08 PM :

@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
Unknown said on September 3, 2012 at 11:57 PM :

@Anonymouscheck out this site,,,,,,,

tricksterpc.blogspot.com

REPLY
Unknown said on September 3, 2012 at 11:58 PM :

hi,check out this site,,its really coooool


tricksterpc.blogspot.com

REPLY

Use the tab below to comment. No spam please!!!

[netinsert=0.0.1.11.14.1]