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

In this tutorial I will show you how to add more info on your Blogger posts like blog author's name, a time stamp for published posts, labels and comment count links. Firstly, let's see how the comments link behave - when there are no comments on your posts, there would be a link that says 'Be the First to comment!' and if your post gets one comment, it will appear as '1 comment so far'. On the left side, we'll see the blog author's name, a clock showing when posts have been published and finally, the post labels.

If you want to make your blog more eye-catching by adding these details with some cute small icons along with the Blogger Author's Name, Post Date, Labels and Comments... then follow these steps below.

Screenshot:

How to Add Author, Date, Labels and Comment Bubbles to Blogger

Step 1. From your Blogger Dashboard, select your blog > go to Template > Edit HTML

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

Step 3. Type or paste the below code inside the search box in order to find it:

<div class='post-header-line-1'>

If you can't find the code above, look for this one:

    <div class='post-header'>

Step 4. After this code add the following HTML:

<div style="margin: 5px 0; border-bottom: 1px solid #F2F2F2;padding: 5px;"><font style='background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjE7V7K9-9gp9aNKXfqfaoR2Rc4NlzCCsigiKt24mXIICGJSmkcuqnmcwO00bD5BQyhXEJM4jD7Biyoa3clWQGzEsdNxM808fFpB4gZuunSukszX5rkmd0FtxAche7OXOOCpgmdiHaNzv5A/s1600/author.png) no-repeat scroll top left;padding-left:25px;font-size:11px;'><data:post.author/></font> | <font style='background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpe8moLwhkHMemij3RDrOSrk9G2JMPFL1HvKdIZ6u27v3czsUr6VmoS_h4oyAoTBg2Xl6IgX7_lE4L1nyQawv3c0f4lPNXYVctZJPcrGUqOkCuIwH_Vo9yP5SfsiaaDmh14ksrV50BJJNP/s1600/clock.png) no-repeat scroll top left;padding-left:25px;font-size:11px;'><data:post.timestamp/></font> | <font style='background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQ3Rr_E5OvPfLq1dtu2ao7NUHRbIOmvHD1jK81r2TsJURnCJGvr9ChLNgfB9Z3qMcBrPtj7xv6ybJipKVomj-x1OSHk_IHljYAfk_OosvVY-DYiey83uy2eWuZeeEzSAdnmq4JknrpORoU/s1600/tag.png) no-repeat scroll top left;padding-left:25px;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=8&quot;' rel='tag'><data:label.name/></a>
<b:if cond='data:label.isLast != &quot;true&quot;'>|</b:if>
</b:loop>
</b:if></font>
    <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/AVvXsEgQgD3qsdUMjGStdOB8bEWDbaTJwLMJQRUqbQ0v813KgwsAP_lkW2wJJK7DmOdyk_W8fmtZ0LdHQZcMx66nKIcJvs_oSC-lB4YA27d4xUBStQ-K2YGndlt7nxsiTy8e1LgyWv0gKzs474U3/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 icons, just replace the URL addresses in blue from above with your images URLs:

1. First one is the icon for the Author
2. 2nd one is the Clock icon
3. The 3rd one is the icon near the Labels
4. And the last one is for the comment bubble
Step 5. Save template... and you're done!

You might want to know how to add a comment bubble to your Blogger posts titles?