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

Comments: 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. 

Speak Your Mind

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 Code ConverterHide Code Converter Show EmoticonHide Emoticon

If you Got questions? Ask ’em below! While we’re here, you might like to leave a comment and let me know if you have any stories or questions.

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 *