![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSNGBwzzQNNjCsOjMi9xy2LBI4JFigT3GUIg4-xTzy8P6JQ0i0PvUT51LyHkeAP0SURx_mMfwYdVde5gt7Lyw4jgMN2Y65JWYItisuaLf602i-HLwUaZ70TFQ_OSb1CduYdvRu_Wxn7b0a/s1600/blog-icon.png)
![display author, date, labels, comments below blogger post titles labels below blogger posts](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSW-g-zAxzAFCP2C33_Z17F48F6840KTXvFOG916EmtsX1JN_X8UWsuWm1USHGKK7vt2CZRoy4dLT5ze0pAKcAK8CvjomwO_sNf-hsLXr1kk7ysi2PuwB2leLiwS829-hUZARtrSlreBjX/s320/comment-count-below-post-titles-author-labels-calendar-blogger.png)
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:![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIDJ_m9Vb0H-6h2cYOSZQeSb7ddFU1Djv32oL7cig9x0tF0g554VKqwvk_ICtdvUi8CJqlTWgjQLn90hd2o1XUbnEmpaQugCaMrgb2T9e9LqgeGD8Go32TP9gntrXM-50i_LVDua7eAmp9/s1600/remove-blogger-labels.png)
2. Click anywhere inside the code area and press the CTRL + F keys to open the Blogger search box
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3XfHjlYL6KIsTQ7wIyf6tckF0OYCsuVxugmTDIWjYWwHOUUzM3UxYdm4co16HlanmA5NxHh9lN60qkhSWlFd1eOO_we5YR95D3wCQRdaVVqeIbfXGlkkaBIDq5jMTub2wvm-MqpKj_1Kc/s1600/blogger-template-search-box.png)
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/AVvXsEjmzuWtF6E_ik9ZKUQHU_hMu8eCaVYWo3hlo2X8vZMSdaRB38hbYzXoGvMKNBkC7AYAgrxN2Mnq-IP1yCDEjQZPD6GIyJziMTG-_c12uoFe_7DNj-y24W3bxSOm6jrMbiYvRsc-yg2jx60s/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/AVvXsEhpDRvkwiogTNKccpP-GS6k_6HQ16EBmOFbxuajtBIwJ2BsLHzIg-exQ33NnDgkkkgX_2yrRcyegbxMoRW20DG0XvsMOekNziCW1sLZ8NMML7O9E9ygOhE2CoLJ1jJEKqrsCAiL0QGeUCDR/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/AVvXsEhlOnPiP8RlDc5b06neGm6i-EkRKN3jTXjYgfDV92miMc4W_x7McsKMQS4QVUERhYJ-XhLPdKFKDfoO02pGPP5dfmnyE2wW8Kh5-6NoS4cimDQcgRYK4G7Gbm678qiJMXAK09YazYGgq0ah/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/AVvXsEjPH1U_g-vRByj-ktyL8kU360I1ZgJGgtzv9hyphenhyphenUwWeEpZ9wR52D-ULQYYLroaRARPrq76F6RVJxnJmBtsmdLw-NB9Fg6a0bFxdBczJqVTbSrLiFSEKbFozRixrehnSrSeOrJfIDI5H412UH/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!
No comments:
Post a Comment