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 :-)