June 5, 2011

How to Display Post Author, Date / Time and Labels Below Post Title in Blogger




When you publish a post on your blog, you may see information related to your post such as Author, Time, Labels etc. on your post footer. But if you wanna get rid of post footer or make use of jump breaks, readers may not be able to find that particular information on your homepage or blog. So you would like to show them off out of post footer. Else if you just wanna customize the way that post specific information has been displayed on your blog, you would seek a way to do that too. So how about showing those information along with your post title to be differentiate and stylish?

It's kind of a complex process 'cause you can't easily get off those information from post footer and display elsewhere without editing your template. However eventually, you can display essential information such as post author, date and time and labels under your post title though you keep post footer or not. Bloggers who may show only snippet of post on their homepage with no footer, will obviously love this. So let me help you to show off your post related information beneath your post title.


Before You Go:

You should not be disabled displaying post date header option. And here we use Date Header Format for Date and Timestamp Format for Time. So make sure you have selected correct values for particular options. You can make sure all of these options by following below steps.

i. Go to Blogger Dashboard.

ii. Click on your Blog Title.

ii. Navigate to Layout from left pane.


iii. Now Click Edit link correspond to Blog Posts element under Page Elements tab.

iv. Make sure the date option aka first option under Post Page Options heading is ticked and selected value for that option represents full date including year, month and date.

Note: Selected value will be displayed as the Date beneath your post title.


v. Now find the third option aka Timestamp format under Post Page Options and make sure the value selected for that option only shows Time, not a date.

Note: Selected value will be displayed as the Time beneath your post title.


vi. Save your page elements.

Note: After enabling Date Header Format option, it will show up date above list of posts for particular date. If you are aware of showing date header, read and follow Advanced Method in How to Remove Post Date Header in Blogger post, prior to start below steps.


Steps:

1. Go to Blogger Dashboard.

2. Click on your Blog Title.

3. Jump to Template tab.


Note: Before editing your template, you may want to save a copy of it. Read How to Back Up Your Template.

4. Click on Edit HTML button.


5. Now search for following line in your template,

<b:if cond='data:post.dateHeader'>

6. Identify which code snippet matches with yours from below. You may have either one code snippet in your template. Then select matching code snippet in your template.

Code Snippet 01

<b:if cond='data:post.dateHeader'>
<h2 class='date-header'><span><data:post.dateHeader/></span></h2>
</b:if>

OR

Code Snippet 02

<b:if cond='data:post.dateHeader'>
<h2 class='date-header'><data:post.dateHeader/></h2>
</b:if>

7. Now replace your whole code snippet with following.

Note: If you code snippet matches with Code Snippet 01 above, use the Code Snippet 01 code below to replace your snippet. Else if you have Code Snippet 02, the use Code Snippet 02 below.

Code Snippet 01

<b:if cond='data:post.dateHeader'>
<script>var DateScript = '<data:post.dateHeader/>';</script>
<h2 class='date-header'><span><data:post.dateHeader/></span></h2>
<b:else/>
<h2 class='date-header'>
</h2>
</b:if>


Code Snippet 02

<b:if cond='data:post.dateHeader'>
<script>var DateScript = '<data:post.dateHeader/>';</script>
<h2 class='date-header'><data:post.dateHeader/></h2>
<b:else/>
<h2 class='date-header'>
</h2>
</b:if>

8. Now search for <div class='post-header-line-1'/> and add following code right after that. I have implemented the code using a table to make it more organized.

<b:if cond='data:blog.pageType != "static_page"'>
<table style="font-size: 12px">
<tr valign='top'>
<td>
<img src='[Author Icon]' style='vertical-align:middle;padding-right:5px;'/>
</td>
<td>
<span class='post-author vcard'><b:if cond='data:post.authorProfileUrl'><span class='fn'><a expr:href='data:post.authorProfileUrl' rel='author' title='author profile'><data:post.author/></a></span><b:else/><span class='fn'><data:post.author/></span></b:if></span>
</td>
<td>
<img src='[Date/Time Icon]' style='vertical-align:middle;padding-left:10px;padding-right:5px;'/>
</td>
<td>
<script>document.write(DateScript);</script> at <data:post.timestamp/>
</td>
<td>
<img src='[Label Icon]' style='vertical-align:middle;padding-left:10px;padding-right:5px;'/>
</td>
<td>
<b:if cond='data:post.labels'><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>
</td>
</tr>
</table>
</b:if>

Color Indication Information

   - Font Size

You can change text size of author name, date/time and labels here if you prefer. Just specify your value here in pixels.

   - URL of the Icon

You can specify URL of 16 x 16 pixels icons to show leading icons for information you displayed. For example, use an icon represent an author for Author Icon. If you need no icons, just remove whole image tag completely.

i.e: <img src='[Author Icon]' style='vertical-align:middle;padding-right:5px;'/>

   - Post Author

This is tag which displays author of the post. If you need to append a text for that such as 'Post by', add your text before or after the tag.

i.e: Before: Post By <data:post.author/>      After: <data:post.author/> posted this.

   - Published Date of Post

This tag displays date published of the corresponding post. It uses script to get post date. You can add more text to make it more informative by adding text as explained in Post Author.

   - Published Time of Post

This tag displays published time of the corresponding post. You can add more text to make it more informative by adding text as explained in Post Author. I have added at text before that.

   - Labels/Categories Related to your Post

This is code snippet which pops up labels you specified when you publish your post. You can add more text to make it more informative by adding text as explained in Post Author.

   - Text in between Labels

This is text in between multiple labels. I have specified just only a space. but you can specify a punctuation mark like comma (,) here.


Enjoy :-)




Awesome! Thanks for coming by and taking your time to read this post :) I hope you have learnt something today. Now you can share it with your friends and I'd love to hear from you too.






Related Posts and Categories


Category, , , ,





Comments

* Make sure your comment is genuine and comply with our commenting guidelines.

* Review your email and reply notification settings to receive replies via email.


Anna said...

Great article, finally I got the result I always wanted! Just one more question... how can I edit the fonts? I would like to center it and have it smaller. Any advice?

Mayura De Silva said...

Thanks dear :) You can replace <table> tag with the line below,

<table align="center" style="font-size: 10px">

And specify font size as you prefer. I've specified 10px here.

Cheers...

Alien said...

I would like to display the labels for each of my posts on to the left of the post in the sidebar. Something like this: http://journal.uggedal.com/
Any suggestions?

Mayura De Silva said...

Hi mate,

If you've already labelled your posts, you can show them off using Labels widget as displayed on your referenced website. You can find Labels widget at Blogger gadget list.

Hope it helps :)

Cheers...

sumcara said...

How to show only one date in home page please... I got all of them showing in under each titile.

Mayura De Silva said...

If you just wanna show date, use following code snippet mate :)

<b:if cond='data:blog.pageType != "static_page"'>
<table style="font-size: 12px">
<tr valign='top'>
<td>
<img src='[Date/Time Icon]' style='vertical-align:middle;padding-left:10px;padding-right:5px;'/>
</td>
<td>
<script>document.write(DateScript);</script> at <data:post.timestamp/>
</td>
</tr>
</table>
</b:if>

Cheers...

Kanika Chawala said...

Useful informantion

Mayura De Silva said...

Hi Kanika,


Thanks for commenting dear :)


Cheers...

tammy said...

Ugh I've tried 7 different tutorials on this..have to say I like yours best but they all leave the original date and then add a new one under the title..how do I get the original one to disappear?

Mayura De Silva said...

Hi Tammy,

Glad to hear you have implemented it well with the help of this post mate :)

Ah... Uo can find how to remove existing date header here ~ How to Remove Post Date Header in Blogger.



Cheers...

Kelly Kortright said...

Hi- I have searched for and I don't have it. What do I do now?? Thank for your help!

Mayura De Silva said...

Hi Kelly,

The quotes in the line of code should be single quotes and did you enabled the option Expand Widget Templates? :) Else, the line won't visible.



Cheers...

Suzanne said...

Thank you for the tutorial! Just one question..


Can I somehow edit the font family of the date and align it more to the right of my blog? Can I do this by adding CSS or some other way?


Thank you so much


Suzanne

Mayura De Silva said...

Hi Suzanne,


Are you referring to the date added by the code snippet mentioned in this post or is it default date header above post title on your blog? :)


Cheers...

Osama Zia said...

great... Works very well

Mayura De Silva said...

Hi Osama,


The best icon size would be 16x16 :)


Cheers...

Mirjam said...

Hello! I did everything as explained but it didn't work :( Nothing happens, everything is the same, what could be the problem? Thank you for your work!

Mayura De Silva said...

Hi Mirjam,


You need to replace matching code snippet as there could be multiple findings if you just search for one keyword mate :)

Else it won't work as it should though. BTW if you are using Dynamic Views, it won't work out.

Cheers...

Mirjam said...

Hello, I replaced all the matching code snippets as descriped, I also checked it one more time but I found nothing wrong. My blog is modegaarde.blogspot.com, maybe this helps? I'm not using Dynamic Views, I'm using this template: http://btemplates.com/2012/blogger-template-extreme-surfing/

Mayura De Silva said...

Hi Mirjam,

Oops... You have been using a custom template :)

I just through the template and found some differences between original template and the one uses in your blog.

Is in installed by someone else or you make any changes to your blog template dear? :)

Anyway try pasting code snippet just above line and see if it works :)

Cheers...

Crissy said...

Do you know how to display the post title ABOVE the date? I've tried several old tutorials and instead it just removes the date. I haven't found a recent one that works.

Mayura De Silva said...

Hi Crissy,


Did you try the code snippet given in this post? :)

It adds date and time beneath the post title and you can safely remove if you need to go back to old style with date header above post title.


Cheers...

Crissy said...

I did but it didn't work. I found a code that finally did. :)

Mayura De Silva said...

Hi Dear,


Sorry for being late to reply.


Can you tell me, which code snippet you have found when you searching? Is it 01 or 02?


Cheers...

cutegirl said...

Sorry late, can you install the template that i give link up there in your new blog and help me ? then give me the code? I try what u taught in the tutorial but not success. I really don't know. I really need to show the date, :'(

Mayura De Silva said...

Find the line of code with h3 class='post-title entry-title' in your template and add the code snippet in post just after that line :)


Cheers...

hagomuk said...

when i searched






, i found three and when i find for post-footer-line-1 i found two.

where should i add your code ?

Mayura De Silva said...

Hi Hagomuk,


Well, replace that code snippet with the Code Snippet 02 as indicated in steps mate :) Then you can follow rest of steps as it is.


Cheers...

SilentMonkey said...

Hi Mayura,


Can you help me implement the same in my site gizchai.com pleeeassse :)

Mayura De Silva said...

Hi Mohit,

You gotta follow the steps mentioned in this post mate :) If you got stuck in the middle, let me know here and I will help you sort it out.

Cheers...

SilentMonkey said...

Hey Mayura I did but it does not work :( Can you have a look at the code??

Mayura De Silva said...

I've reviewed it but I couldn't find the code Mohit. What code snippet you have inserted ~ Code Snippet 01 or 02?

SilentMonkey said...

Snippet one.. in three places actually.. it shows as

Mayura De Silva said...

Did you add the code snippet in step 7? It's the code to display all the details.

SilentMonkey said...

I did :( nothing.. can i send you the code so you could review? Im sorry for wasting your time but am no expert in this and i badly need it...

Mayura De Silva said...

Yeah, send me your code snippet through Support section by creating a new thread Mohit :)

I'll take a look at your code and respond there.

Cheers...

SilentMonkey said...

Posted :) looking forward for your reply man.. thank you!!

SilentMonkey said...

WOW, WOW, WOWWWWW thank you sooooo muchhh man :) you are a genius.. thank you so much for your time and awesomeeeeee adviceee :)

Mayura De Silva said...

You're most welcome Mohit :)

Cheers...

Indian Mystique said...

Hi Mayura, After your answer I tried the following tutorial (the second part). But I'm getting an error (I also can't copy the codes from your page, but that's probably because you disabled it).

Mayura De Silva said...

Hi Kiran,


Oops... I've just try selecting code snippets with different background color, but they are selectable though.

Ah... May be you are referring to the one mentioned in the step 5. I thought it would be easy to type in. BTW I'll modify it :)

Sorry about the inconvenience and Thanks for letting me know :)

Cheers...

Khay said...

I don't get it. I've done all the instruction but it just doesn't work for me. ;((

Mayura De Silva said...

Which code snippet (01 or 02) you found in your template, Khay?

Yassir LM said...

his great thank you very much :)

Mayura De Silva said...

You're welcome and glad you found it helpful, Yasir :)