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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIl3_rihRySNsWhVvrT1I2vP3myHoGzkgX6vncnSxaJJYI3if1X80m5YR4PNZ9Vv7mC4I2h6odqz3wdfyAb22JbIeoM99wfqBKOprsCUjB316zRb76wuHyECklmKsW69khlRSwo3tIa31L/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/AVvXsEhm5AzLP9jX8lsHgcctXzYAKotSD57J5-ljJ0llwB8rLuPjSUwpLGYeD9vXrJQBmXSKdswUipUhfNa8xhXYjFp85zFXLMg72nNr2huKHThHwXrmYC-vlcW-ZpKGXpzsokGx6WNmlgUXaYzz/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/AVvXsEiImCZ5_2sYIysxAa30biD4rNUDPRM8uYfrLxmdXw1nFt-WniioUj5O1T3tDPSXItVqZDiyf3e7_m8KO0Nl0oND8Z1UH3hZvsePPzReN23FMNTdZ3MGskwOy_IbtQAcUqqRtPgB2177q47f/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/AVvXsEiETXIZ9_OOef4PzmMWnw2wErASOu5DV7NC5S0tYYgXigGlhJV6Usw3_d4p4dVTZZz9K0eDj8OfBDryEiG9LL7J0Qefxfnq2THdgsVTQILnWg78ltY4oMDI9G16YXi4D9_aknei7lTy82-F/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!
