Show Author Name, Date/Time, Comment Count Below Blogger Post Title

Hello Buddy! Today i am going to be unleashing a blogger widget which we see every now and then on premium blogger templates and we wonder how to add it to our custom template. Showing the name of the author, date post was published/Edited and the comment count below blogspot post titles help make your blog look professional.

Unique Features

Multi Author name

Date & Time working with blogger timestamp

Responsive and fully Customizable

Light weight - Does not affect the load speed of your blog

Makes use of FontAwesome

How to Show Author Name, Date/Time, Comment Count on Blogspot.

In other for you to be able to understand this tutorial, i have divided it into 5 steps. Note! Follow the steps, else it won't work for you. I have tried it on several blogs & for a quick demo, check below the post title of this post.

Show Author Name, Date/Time, Comment Count Below Blogger Post Title

Step 1 - Adding FontAwesome to Blogger

FontAwesone is a huge list of web icons, that help style blog contents. It loads fast and easy to customize.

Using CTRL + F search for <head>

<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css' rel='stylesheet'/>

Just below the <head> tag, copy and paste the above script. Note! With out this, the icons will not show, and if you already use fontawesome icons on your blog, do not add this script.

Step 2 - Styling Post Info for blogspot blogs

Search for ]]></b:skin> using CTRL + F

.post-info{background:transparent;margin-top:5px;margin-bottom:5px;color:#fff;font-size:12px;text-align:left;padding:0;box-shadow:none}
.post-info a{display:inline;background:transparent;color:#666;padding:4px 6px 4px 6px;transition:all .3s ease-out}
.post-info a:hover{color:#00BE98}
.author-info,.time-info,.comment-info,.label-info,.review-info{margin-right:8px!important;display:inline-block;color:#666;padding:10px}
.post-info .avatar-author{float:left;border:0;padding:0;width:38px;height:38px;box-shadow:none}
.timestamp-link abbr{border-bottom:none}

Copy and Paste the above CSS code just before/above ]]></b:skin>. You can customize it as you want.

Customization Tips

background: Change the color of the background

font-size: To increase the text size.

text-align; Decide the location. Whether left, center or right.

hover: text color when pointed with mouse.

Step 3 - Add Script Below Post Title in Blogger

We have successfully added FontAwesome sheet and have also styled the widget. Now lets add the actual script to make it show up. To show widgets below post title in blogger, we have to find the post header line of code.

<div class='post-info'>
<b:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/" + data:post.id + "?alt=json-in-script&amp;callback=av"'/>
</b:if>
<b:if cond='data:top.showAuthor'>
<b:if cond='data:post.authorProfileUrl'>




<a class='g-profile' expr:href='data:post.authorProfileUrl' rel='author' title='author profile'>
<data:post.author/>
</a>



<b:else/>



<data:post.author/>


</b:if>
</b:if>
<b:if cond='data:top.showTimestamp'>
<b:if cond='data:post.url'>

 <a class='timestamp-link' expr:href='data:post.url' rel='bookmark' title='permanent link'><abbr class='published updated timeago' expr:title='data:post.timestampISO8601'><data:post.timestamp/></abbr></a>

</b:if>
</b:if>
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:post.allowComments'>

 <a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'> <b:if cond='data:post.numComments == 0'> Add Comment </b:if> <b:if cond='data:post.numComments == 1'>1 Comment</b:if><b:if cond='data:post.numComments > 1'><data:post.numComments/> Comments</b:if>
</a>

</b:if>
</b:if>
</b:if>
<b:include data='post' name='postQuickEdit'/>
</div>

Copy and Paste the above script just below the second <div class='post-header'> in your template.

Step 4 - Remove formal code

In other to make the author name, date/time, comment count show only below post titles we have to remove some line of codes.
Simply use CTRL+ F to find , You will see lines of code similar to the one below.

<b:if cond='data:top.showAuthor'>
<data:top.authorLabel/>
<b:if cond='data:post.authorProfileUrl'>

<meta expr:content='data:post.authorProfileUrl' itemprop='url'/>
<a class='g-profile' expr:href='data:post.authorProfileUrl' rel='author' title='author profile'>
<data:post.author/>
</a>

<b:else/>

<data:post.author/>

</b:if>
</b:if>


<b:if cond='data:top.showTimestamp'>
<data:top.timestampLabel/>
<b:if cond='data:post.url'>
<meta expr:content='data:post.url.canonical' itemprop='url'/>
<a class='timestamp-link' expr:href='data:post.url' rel='bookmark' title='permanent link'><abbr class='published' expr:title='data:post.timestampISO8601' itemprop='datePublished'><data:post.timestamp/></abbr></a>
</b:if>
</b:if>

Delete all occurrence of this. Now save your template.

Step 5

Now go to your layout, and locate your blog widget. Activate "Posted by", "at" (time) and you all done.

Happy Coding!.

Proxibiet SEO