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

This tutorial will show you how to add more information in 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.

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 HTML line below 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 this line, add the following:

<div style="margin: 10px 0;"><span style='background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHHH913ClWsDp54awJmiQWq3CsG8LxYv4JGH4DIFmEueYyzw5CZ4-oxADE7QnIqTRImwRHRLQyAfCVt4Me0hBMcrNCCXP-eHawn5E-fsTRcLThLK89WArIMa6uHIlpiHYM4V1zOZjbnMoR/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/AVvXsEgWw_Y0dfUfLDjsvIZv8BNlRMpJn3qbeOh7L5qTlf9CxLNocmAeVtlnOXEaVSJ0PZYgwj1MjVvyGe6Mq4eVcBt5gMhZylgxDbJsEKxEUa9MnA1iS7hIteoVG0jUTqj-b13RmdZmHX5AWB1e/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/AVvXsEjoepyFT1EGXkUiENBxqvCgEnEHBOsKonZDlcf5Dam9nrz4yCTJ4T8hYhXKo2rRnSBGQcoPQTa4NO_BHmz9wIx-f-HsJhFqdEVy74l968-KQR1ZlBATlf8-S9-R3Bh-skkmg1K1IgRmsOY1/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhv_tSXx7ePhgsPSZJMAIZYQMmu8xR6qxxyMJBjz8QVfDSmly53Se6RND9ScUQEMp4oysS6RoskEg1iJw60cJPSCRSQ-FjDbP1e-HitXfgh-V1oijIGFjze6ccOfnFkYxwaNi_y7AQBdRam/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!

Share this post