Display post author, date, labels and comments with icons below post titles

This tutorial will show you how to add more information in the Blogger posts like author name, display the post date, post labels and comment count links. How does this work? The comment links will display the 'Be the first to comment!' text for posts with no comments and once we get a comment, it will show '1 comment so far'. On the left side, it will show the author name, a clock icon with date for posts published and finally, the post labels.

labels below blogger posts

How to Display Author, Date, Labels and Comment Bubbles in Blogger?

1. Login to your Blogger Dashboard > go to 'Template' and hit the 'Edit HTML' button:

2. Click anywhere inside the code area and press the CTRL + F keys to open the Blogger search box

3. Type or paste the below code in the search box and press Enter two times to find the second occurrence of it:
<div class='post-header-line-1'>
Note: If you can't find the line above, look for this one:
<div class='post-header'>
4. After that line, add the following:
<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>

How to customize:

To change the icons, replace the urls in blue with those of your images (see this tutorial: how to get the url of an image):

- first url is for the author's icon
- second one is the clock icon
- the third one is the icon for the labels
- the last one is for the comment bubble

Related: How to Add Comment Bubbles to Blogger posts titles

5. Click the 'Save template' button and you're done!


  1. Anonymous3/04/2012

    Great! Thanks :)

  2. Replies
    1. it's not workin for me. i need a code for author and label in every post and is visible in my homepage not in the blog post page.

  3. how to add comments only in right side of the header

    1. Hi Dayana,

      I'm afraid i don't understand your question. Can you be more specific?

    2. i think she meant having a comment counter on the right side.

  4. My template has 2 < div class='post-header-line-1'/ > codes, but not < div class='post-header-line-1' >.

  5. İ loooooooove it!..thank you!

  6. Hello I'm heaving trouble with this tutorial.

    The icons author, date/time, tags appear. Unfortunately the icon "be the first to comment" doensn't appear. Do you know what I'm doing wrong?

    This is my blog: http://orientalspiceandsomechocolat.blogspot.com

    1. Anonymous7/05/2013

      go to layout > edit blog post widget then check comments button ...

  7. Thanks buddy... cool sharing

  8. Coool... nice tutorial.. I have implemented it in my blog http://waytobliss.blogspot.in/ Thanks for sharing it..

  9. Hi! First off, thanks for sharing this cool enhancement! My blog is also having problems with the comments part showing up. It shows up only for a few seconds while the page is still loading then abruptly disappears, leaving just the author, date, and labels part (I deliberately omitted the labels part though). I have also previously implemented your comments bubble hack, and am wondering whether or not it is causing some sort of conflict. Any help would be appreciated!

  10. Great work! Thanks a lot! I'm using the comment part on my blog.
    I have some questions.
    - How can I make the button direct to the first comment, not to the bottom of comment field?
    - How can I make the button always show? When i open a blog post, it is not visible.
    Any help will be appreciated :)

  11. not work in my blog, when number of comment is 0, the script does't show anything

  12. Hey, I have a question. I don't want the date above there. Which part do I have to delete? Thanks for this tutorial! You helped me out a lot :)

    (and sorry for my lack of English, Im a Dutch girl)

  13. Anonymous1/31/2013

    I want this under the blog. And how do you hide the real ones in blogger?

  14. Hello admin.... i tried but no effect

  15. Nice post bro Thanks for sharing

  16. what about ''Date'' of post
    this is time of post

  17. Thanks But Comment Box Didnot appear

  18. How do you make the actual box under your post transparent? x

  19. How if use font icon??

  20. Anonymous7/20/2014

    Thanks but does not work with disqus. :(


Although every comment is appreciated, due to an overwhelming amount of questions, I can no longer provide personalized help. Keep in mind that comments are moderated and may take some time to appear. All spam comments will be deleted. Thanks for understanding!