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

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

2
data:blog.title
Author Vcard

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. 
How to Display Author Vcard (Posted By | Date | Time | Label) below post Title
4 Stars stars - "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 be...

Post a Comment

Awesome.. I like your this post so much ;) thanks for sharing bro.. Keep sharing awesome things between us..


Regards
Zeeshan Ahmed

thanks Zeeshan for your comment. I am glad to hear that.

Facebook Group Community Disqus Channel Code ConverterHide Code Converter Show EmoticonHide Emoticon

Got questions? Ask ’em below! While we’re here, you might like to give any feedback about this Post, Your comment inspire us to continuous Improvement of This Blog and Contents. Your words are your own, so be nice and helpful if you can. Please, only use your REAL NAME, not your business name or keywords. Using business name or keywords instead of your real name will lead to the comment being deleted. Anonymous commenting is not allowed either. Limit the amount of links submitted in your comment. We accept clean XHTML in comments, but don't overdo it please.

Make sure you tick the Notify Me box below the comment form to be notified of follow up comments and replies. Thank you for commenting

Contact Form

Name

Email *

Message *