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-comment-count-with-icons-below-post-title

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.

display-author-date-labels-comment-count-with-icons-below-post-title


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://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>


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:-)

Berlangganan update artikel terbaru via email:

0 Response to "Display Author, Date, Labels And Comments Count With Icons Below Post Title"

Post a Comment

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel