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

In this article, I will show you How to Display Author, Date, Labels And Comments Count With Icons Below Post Title in your Blogspot blogger blog. In most of the blogs perhaps you’ve seen that on the blogs post page below post title there is author, date, labels and comments count with icons. This looks very professional and today I will give you the step-by-step tutorial to access this feature in your blog. So let’s start to implement this in the blog.

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

  • Step 1: Go to Blogger Dashboard.
  • Step 2: Navigate Theme > Edit HTML.

  • Step 3: Click anywhere inside the blogger template and press [CTRL+F] a search box will open, paste the code inside the search box

<div class=’post-header-line-1′>

[Note: This code may be present more than 2/3 times in most of the template you have to choose the exact one. Unless this code will not work. Mostly 2nd or 3rd code is the exact one.]
If this code is not present in your template search for the code

<div class=’post-header’>

 

  • Step 4: After this line(below), add the code given below: 

 

<div style=”margin: 10px 0;”><span style=’background:transparent url(https://4.bp.blogspot.com/-c1B11ScMq2g/UrceOVSjbxI/AAAAAAAAFnI/AfLfIudanZs/s1600/author.png) no-repeat scroll top left;padding-left:20px;font-size:11px;’><data:post.author/></span> | <span style=’background:transparent url(https://3.bp.blogspot.com/-8zBVC26ojQE/UrcfeqmWuXI/AAAAAAAAFng/f_xOYkEhdVA/s1600/clock.png) no-repeat scroll top left;padding-left:20px;font-size:11px;’><data:post.timestamp/></span> | <span style=’background:transparent url(https://2.bp.blogspot.com/-Zz2yZeaJG6U/UrcfOYO6_JI/AAAAAAAAFnY/1WHah9jzmhE/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://4.bp.blogspot.com/-rC0rrfpsbhE/UrcdZ37f_uI/AAAAAAAAFnA/ZIiB7SJgx0I/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>

  • Step 5: Click “Save Template” you are done.

 

 How To Customize Author, Date, Labels And Comments Count With Icons Below Post Title

To customize(change) the icons replace the coloured links with your desired icons(links).
  • Red Colored link is author icon.
  • The green colour link is the clock icon.
  • Blue coloured link is Label/Tag icon.
  • The purple coloured link is comment icon.

Wrapping Up

Now readers of your blog will be able to see Author, Date, Labels And Comments Count With Icons Below Post TitleIf this post really helped you to transform your blog design then share this article to help other. Let me know how this tutorial helped to transform your blog appearance. For any issues relating implementation of the code widgets drop a comment below we are ready to help you.

Related Post

Leave a Reply

Your email address will not be published. Required fields are marked *