Display Author, Date, Labels And Comments Count With Icons Below Post Title

Today I will show you how can you display author name, date, labels and comment count links with icons below post title in your blog. This is a wonderful hack. And by this hack, your blog will look professional. It shows ' Be first to comment' on the articles without comments and ' 1 Comment So Far' on the article with 1 comment. One the left side it will show author's name, date, labels. So, let's start implementing it into our blog.

Display Author, Date, Labels, And Comments Count Below Post Title

1. Head up to your Blogger Dashboard and go to Theme and click on Edit HTML.

2. Now click anywhere inside the code area and press Ctrl + F keys to open the search box.



3. Type or paste the code given below in search box and press enter.

<div class='post-header-line-1'&gt

Note:- You will find it two times, you have to stop at second one.


Note:- If you can find the code given above, try to search this:

<div class='post-header'>

4. When you find the above code, just below it paste the code given below:

<div style="margin: 10px 0;"><span style='background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhef9C5kg6XA82r2C6Ms8YquJvqZKfEwUD8RyrlIMV65hjVdecheNJ9LvoLn4R6jzhQIKU_rzv_UpblKqPuTjyfFxf2Io6JpAKsDJzpSZfzJm9TkXKaeCWKSivNAJTNv5z1SefzbMki5wSc/s1600/author.png) no-repeat scroll top left;padding-left:20px;font-size:11px;'><data:post.author/></span> | <span style='background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7T_aadeogD866iec7lZtAwPP7IIASqcjRtE0dSEl4tLgSHesoLjUB4jvbYwyGclUNJNXxXEIuiqEwloMejKyMJNCmaxvVB8g-uYhoj4UY917SbnEt5jXT10nHIUh7S0_vP1efC4257X_9/s1600/clock.png) no-repeat scroll top left;padding-left:20px;font-size:11px;'><data:post.timestamp/></span> | <span style='background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSUWKCTa0aqcq2BTq6oOU5ZPOfoBIB_4W3rexptEoXHWIF64-CItUVlipSP3SRKvknCk5oDkcNHrQ8dtvWVSXBI5lSBsO7nS-k4_LqPELPa-UBdMtkDm7Yhu9pYaq7cqSLO3E4kZdrp-0g/s1600/tag.png) no-repeat scroll top left;background-position:0px -1px;padding-left:23px;font-size:11px;'><b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'><a expr:href='data:label.url + &quot;?max-results=7&quot;' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'>|</b:if></b:loop></b:if></span><span class='post-comment-link' style='float:right;'><b:if cond='data:blog.pageType != &quot;item&quot;'><b:if cond='data:post.allowComments'><a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick' style='background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqoybFBexFuG6Yh2XW5E_WCKIrbKU1i3desZElzxjE3Y7_Y97Y8rX3dj7dBOY3JHJt0x-tmbKw4Rko33y0LPz3kStCF7jCQyYPkNuvY1DXeTu9mYc6O7H581wHwDKS_YdUaEXWBZyVPhyphenhyphenc/s1600/comment.png) no-repeat;padding-left:20px;font-size:11px;'><b:if cond='data:post.numComments == 0'>Be the first to comment!<b:else/> <b:if cond='data:post.numComments == 1'><data:post.numComments/> Comment so far<b:else/><data:post.numComments/> Comments so far</b:if></b:if></a></b:if></b:if></span></div>

Customization:-

To change icons replace the URLs with your own image URL:

• Red URL is for author icon

• Green URL is for clock icon

• Orange URL is for the labels icon
• Yellow URL is for the comments icon

5. Click "Save Template" and you're done.

Over To You

So, this was a guide about displaying author, date, labels and comments icon below the post title. I hope you have understood the guide successfully. If any doubt or problem, then comment below. Happy Blogging:-)