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

Tweet

When there are no comments made to your posts, there's a link that says 'Be the First to comment!' and when there is just one comment it says '1 comment so far'. If you want to make your blog more attractive by replacing these texts with some cute small icons along with the default Author Name, Post Date, Labels and Comments... then just follow the steps below. Screenshot: How to Add Author, Date, Labels and Comment Bubbles to Blogger Step 1. From your Blogger Dashboard, select your blog > click on the Template option and press the Edit HTML button: Step 2. Click anywhere inside the code area and press the CTRL + F keys to open the blogger' search box Step 3. Search for the below code by typing or pasting it inside the search box: <div class='post-header-line-1'> If you can't find the code above, look for this one:     <div class='post-header'> Step 4. Add the following code after the code from step 3: <div style="margin: 5px 0; border-bottom: 1px solid #F2F2F2;padding: 5px;"><font style='background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglZzJgDxLDmeVbnTHoW1gv7beFRC1dQq68_Pz7o-M1sUULHonBrZt8rTWnzzRHXxd1OkixcVIyC8hWXpQKO2vGr4nBxo9xYkMLO01f5JsRqNVHHsImkpubsCq2rCu65oSsNOdCKJ4rIcbo/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/AVvXsEj9nmGCNSc_SPR6FhHkUSB3f8H936OTRHTU2VhMZfbJd90r8eFeJNnUN6yqtVcfN-WoNbg3STSnHJdQMg-z5qM-gvHM6AyT2UIAjMV59ICGjUsWaHhIZe-56mML7ts0AGBo0y_WjTGhaiAu/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/AVvXsEjAPZC-J2tJlpX6P2sMsqSjIQ4CMfGAsdq4OHzyFu81n1Eh55WVPJY6SNCGdTTsHf7L0064hlkjgCEWvnOdXkkvkjMLpH4u3lD4pjNHmHfm03I8OgQyyL3qjsrjXV0gFAOrax0AAL8f6pTb/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/AVvXsEhM453LsYCpP3h6pmFaLCnutnjY0v0jEIyHP3NJ194dUmr5AaNAuJ8kJ8UJeDs9w9NV0RqaMHd8uwkn2HZ6GUVvQozSbIGBl2UhlkKkYZK1PdWSuQYzu2rh4lrbtkbgkX4rQtJgw2Bnvxl6/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 above in blue with the URLs of your images: 1. First one is the icon for the Author 2. Second one is the Clock icon 3. The third 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!

When there are no comments made to your posts, there's a link that says 'Be the First to comment!' and when there is just one comment it says '1 comment so far'. If you want to make your blog more attractive by replacing these texts with some cute small icons along with the default Author Name, Post Date, Labels and Comments... then just follow the steps below.

Screenshot:

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

Step 1. From your Blogger Dashboard, select your blog > click on the Template option and press the Edit HTML button:

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

Step 3. Search for the below code by typing or pasting it inside the search box:

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

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

    <div class='post-header'>

Step 4. Add the following code after the code from step 3:

<div style="margin: 5px 0; border-bottom: 1px solid #F2F2F2;padding: 5px;"><font style='background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglZzJgDxLDmeVbnTHoW1gv7beFRC1dQq68_Pz7o-M1sUULHonBrZt8rTWnzzRHXxd1OkixcVIyC8hWXpQKO2vGr4nBxo9xYkMLO01f5JsRqNVHHsImkpubsCq2rCu65oSsNOdCKJ4rIcbo/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/AVvXsEj9nmGCNSc_SPR6FhHkUSB3f8H936OTRHTU2VhMZfbJd90r8eFeJNnUN6yqtVcfN-WoNbg3STSnHJdQMg-z5qM-gvHM6AyT2UIAjMV59ICGjUsWaHhIZe-56mML7ts0AGBo0y_WjTGhaiAu/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/AVvXsEjAPZC-J2tJlpX6P2sMsqSjIQ4CMfGAsdq4OHzyFu81n1Eh55WVPJY6SNCGdTTsHf7L0064hlkjgCEWvnOdXkkvkjMLpH4u3lD4pjNHmHfm03I8OgQyyL3qjsrjXV0gFAOrax0AAL8f6pTb/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/AVvXsEhM453LsYCpP3h6pmFaLCnutnjY0v0jEIyHP3NJ194dUmr5AaNAuJ8kJ8UJeDs9w9NV0RqaMHd8uwkn2HZ6GUVvQozSbIGBl2UhlkKkYZK1PdWSuQYzu2rh4lrbtkbgkX4rQtJgw2Bnvxl6/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 above in blue with the URLs of your images:

1. First one is the icon for the Author
2. Second one is the Clock icon
3. The third 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!