Steps:
Step 1. From your Blogger Dashboard, click on the Template option, then press the Edit HTML button:
Step 2. Select the "Expand widgets templates" box
Step 3. Search for the below code (press the CTRL + F keys and paste the code in 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. Paste the following code below/after the code above:
<font style='background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_j-hKCGtBX5r4Zi5DV7t8BmBx0IidtwCwftND-2mC1atJk3-GPiEUgU2obcEaZBTOrTfWd7BfApa-LgMDQaHWOnRQW-IDGSvgmK0FauYvfIlzVh3LYiTEZPNKqeQRsuX88-nngHZ692F2/s1600/author.gif) 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/AVvXsEi8OrCRtCUE1QVIthUZjHY5fdpgc7fjL9WqNPdF49sBqZd7jFFv-riMTQHpQVvRgD6YyfjbqLYwJsL5HhiegEVdm0EfA52eJwEP22YKJ8ghZqUntDAq5_Heub93jmCZaTiew1h5IMlA2GNO/s1600/clock_icon.gif) 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/AVvXsEiFQxL3sngTs9utV9WGu09eedUk0wUJpdwNVnVFFd-52NinYITqOQcHyyCTZGljA7_AlsjDc9fbj8DvR8y60aT-KrQjLHocl0UX_sIZig0kDv6KOly0YP1YBFMPMANhW5363ZbP265tpIjE/s1600/tag+icon.gif) 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 + "?max-results=8"' rel='tag'><data:label.name/></a>
<b:if cond='data:label.isLast != "true"'>|</b:if>
</b:loop>
</b:if></font>
<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/AVvXsEh1NX7MR9k304OK9aFpgzNF6duXTQ3D_VAQVZILVPKEVAAJuFHevBMvKcPZiu7nzJ5FeLv_ExswUIGyQah-IHhJTm7v5Axk7pZV0VIInHcApLbF9FSYIaKwgvpnJweFzq6hSUubGBrKe2Uq/s1600/comment-icon.png) no-repeat;Padding-left:20px;'><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>
How to customize:
If you want to change the icons, just replace the URL addresses above colored with:
- Red - Author
- Green - Date
- Blue - Labels
- Violet - Comment bubble
... with the URL address of your image.
Step 5. Save template... and you're done!