Display Post Author, Date, Labels And Comments With Icons Below Post Titles

In this post, We will see you how to add default Author Name, Post Date, Labels and Comments with some little icons to the left of each other.This hack will perfectly match your blog design.When there are no comments posted,the comment 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.I have kept the installation of this hack extremely easy.You just have to copy and paste the code.Now let's start to applying this hack.

(Note - For the purpose of preview I was added this hack,Now I have removed it.You can see the preview below in image)

How To Apply This Hack To Your Blog?

• Go to Blogger Dashboard > Design > Edit HTML.
• Backup/Download your template.
• Tick expand widget templates check box.
• Now search for <div class='post-header-line-1'>
• Add below code just above <div class='post-header-line-1'>

( Note - If you can't find above code then find <div class='post-header'> )

<font style='background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMoLGdzxXMA-jtYTYZ19GUzCsUs-OHWJE8BQUA7g_qNnxzOHxg5Ke_8uRIkv7FcPKjXWMmhp1s8qYWfUwK8xj_UvyvZzB39CMulJF5IzWDRZic-kQJ7jVLn3Iu584Igs3fD3TzTqJoKNwa/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/AVvXsEgZ-8-nt2msbkJxquo9JhIzaRlrlPZ7iiR5yu-wegSYpf2HO6DRPqblktYFZJOJ3bogicGcdz_t2U_WL7ycGxiTx245XnV-rC-20rrOHbAS4jmuJK9iZYmBqTNHZMG7dXFHeVM9lTPnReub/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/AVvXsEjUnlFR8cxa7NadJYAeeOVtiYiEBY7RD8bI7ZvnM_SuUbyJiZzUBTI7WzP3GDmVUkG49SNga4FJi6FtDTDu6bUNm32qMRW92it85oiFaMtiVfrY2iws82hNw55DQZi2joz01mj5itOeeCTO/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/AVvXsEh8nAUgEAsqQqIlWStmjdo40JPDrfEQezgs1qxslO_KWWnk3LRGIetXHglD__JbLvdKRxpXYgKEi10ClRZYbDtF7EYxE0LY3ZUR6l3k9TInfWoh8xOdu086tHosxX8wGslmwRlM7it4ESpU/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>

Customizations (Optional)

• If you want to change AUTHOR icon then replace the code in RED with your own icon.
• If you want to change DATE CLOCK icon then replace the code in BLUE with your own icon.
• If you want to change TAG icon then replace the code in LIME with your own icon.
• If you want to change COMMENT BUBBLE icon then replace the code in PURPLE with your own icon.

I hope this hack will surely help you to make your blog more beautiful and professional.

If you have any problem about this hack then surely ask me.I will respond you as soon as time allows.