Display post author icons below titles

In this post,i will show you how to add default Author Name,Post Date,Labels and Comments with some little icons to the left of each other.You can see under each of my post title,some details like author name,time when posts have been published,labels and the comment count links.

When there are no comments posted the link says.Be the First to comment!and when there is just one comment it says 1 comment so far.This is a nice hack that will make your blog look beautiful and professional.


 Let's start adding the codes.

Step 1. Go to Blogger Dashboard > Edit HTML (for safety, backup your template)

Step 2. Check the "Expand widgets templates" box

Step 3. Search for this code:

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

If you can't find it, 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/AVvXsEhegMx5T_g1VWZ923NJo9jlwW2-CFqbiinUyq0vHHw8o-xJiQBmY_Wtb3IrPlOXWfnDd08c89dX8GZSKr-61MU5Q6YREQPZtwVyTP8TXSlUCJb7hyR9n3cdTahA5MQ7nZQFB-_FFxMFTKQ9/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/AVvXsEhA3SGrgE8hM6LG7e3ptrheJ3Y0qXcZyaBuXCuIRDLOKI-ef91hvDJz9ES8KKLLctvqMzriMU41gGm-zcm_4XCvOMORAoLqqaXBpW8Tp-vDLsm0SNTLuSj7LRaWQg06JZHuookyWoLDPQ3n/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/AVvXsEi7HYzUG8sJ-TDic1xupEf1L6yNoYWRE4tZdwlALxOKSdum41i8mL8LmtKu7POYJqEHIfkSSx7kzmIF8q36NwkDMgU8axZE4imRd_F5gOHFvYiQRQ-tAKRGLAQVDfqnaR-GoubhfjVFsLDT/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 + &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/AVvXsEjwK2lSc2xxfns0y6nWQevPiyeb2YhDTW4QfkcfoAMjI5r7dZ4FXhhb68bdgncxAQ97uDeHeJ-JMGFiuaAbPg-dXxNJR8LEbmUnYV7pnCzuYpIGmpTiG7fkJBZr8ewg4a0lq5oh4OHq5vQE/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>

Details that can be customized:
Replace the code in:

Red (Author)

Green (Date)

Blue (Labels)

Violet (Comment bubble)

... with the URL address of your image.

Step 5. Save template... and you're done!