How to Display Author Vcard (Posted By | Date | Time | Label) below post Title

This tutorial is for new blog designer that require to add Author Vcard or post information below post title. There are many blogger who try to find this trick that how we can display author vcard or post information below post title. But this trick is really difficult for newbie. This trick will display the post information such as posted by, Posting time and Label or category of the post. Author vcard help to display when the post has published. And in case of multiple author blog who has made the post we can easily understand by watching Author vcard. Sometimes we can many good and stylish blog templates but author vcard is not attractive or some time it stay in post footer. So by using this trick we can display author vcard below post title and then simply you can remove the author vcard from post footer from blog home page.

So to display author vcard just follow the below simple steps.

Step 1 Log in to your Blogger Account and Go to your Blogger Dashboard

Step 2 Click on  Now click on -> Template -> Edit HTML-> Unfold code  ►

Step 3 Now Find code block like below by Pressing   Ctrl + F

Code Block 1

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

OR

Code Block 2

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

Step 4 Now Replace the above matched code by below code

Code Block 1

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

Or

Code Block 2

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

Step 5. Now again find <div class='post-header-line-1'/> code by Pressing   Ctrl + F

Step 6. And Copy and paste the below code after <div class='post-header-line-1'/>

<b:if cond='data:blog.pageType != "static_page"'>
<table style="font-size: 12px">
<tr valign='top'>
<td>
<img src='Author Icon Image' 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 Image' 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 Image' 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>

Customization

• Replace Author Icon Image | Date/Time Icon Image | Label Icon Image with your own images.

Hope this article will help you to add Author Vcard that will beautify your blog. If you face any problem feel free to leave a comment below I will response you as soon as possible.