 |
Display Post author, Date, Labels and Comments With Icons Below Post Titles
|
In this article you will learn How to Display Post author, Date, Labels and Comments With Icons Below Post Titles? and How to Customize?
How to Display Post author, Date, Labels and Comments With Icons Below Post Titles?
- Login Blogger Account
- Go to Template > Edit HTML
- Search for the below code
<div class='post-header-line-1'>
Note: If you didn't find the above code then search for the below code.
<div class='post-header'>
- Add the code given below after the line you searched.
<div style="margin: 10px 0;"><span style='background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8ukYj7VOelOiLp6J86GSVxUZ4Tt2mVlDJbfB2ZerjPxfg8AxTfjdbsQqAit4j268_6J5jvwg1bI1M7wO0TWuExrZpaYfK2l6VoMiDbLv2N7JXzQmxM_5e7sYt8ZQtgO-U5HHRX56x0hSO/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/AVvXsEhjQLdZ_JhdR8qjQIpXbpxdkHEhhs_FQ1e1mLyEM0nszBR_JZ5tpOosehLgGsEkuOrdqdLb8GUgP72eQb6UYvrNaQQvDEbfCRU5ZR25m5KnO7TyXbHmM5VFg9UaPk4Za9yjHp9kmAApB_97/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/AVvXsEgZFyUK0gYxAayrZWWCVNfJWiKpJBjgg6oXfzDMtc8BlwNt3YvBIWNfszKC8zk5wnvvPmS8j2EfvG_MyxBRNAySygjZNOK6rSo9TAB187LBagTHln_bGEAAmK0Ttlc5OWtUFDkRG819MxbJ/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 + "?max-results=7"' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>|</b:if></b:loop></b:if></span><span class='post-comment-link' style='float:right;'><b:if cond='data:blog.pageType != "item"'><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/AVvXsEgnnVScUp8ofD6vHcgSs2XqMpDUsaFpy30maiey5ufxIskeU1OJt_-GnkOUSfl9JvYItXTuTJXV9x1pwOpIupnlrRrBBcof-CTYF5URtWV4ubJz3RD6so-VSiRm6Tlb_t8DRcg_15pOu0I7/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>
How to Customize?
If you want to change the images then you can change the image urls in red.
- 1st URL is for Author Icon
- 2nd URL is for Clock I
- 3rd URL is for Labels Icon
- 4th URL is for Comments Icon
