How To Display Post Author Date,Labels,Comments With Icon

In this post I will be showing how to insert author name,Published date,Labels And comments in your blogger posts with icons.

Display Post Author Date,Labels,Comments With Icon

1)Open your blogger account

2)Go to template tab.

3)Click on edit HTML as shown below

 4)Click inside the code area and press ctrl + f to find within.

5)There search for the following code

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

 if you cant find the above one, look for this

<div class='post-header'>

6) Now add the following code after it

<div style="margin: 5px 0; border-bottom: 1px solid #F2F2F2;padding: 5px;"><font style='background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcGME13Gj-l9IE1WCBo3Zii-_LMOia_ojD6r8R-w-lsBXag328GjjLZg-ghK9HWMN2i_KZ6igML42_37AKRDu09RlJx6IEGFLFXuonGXyWvoxcGUkuanSj770FsY7T1KnDKjRH9Q0DlENI/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/AVvXsEhbuDtK9oW4k7ExcU9Cd-57VEv9N0rWEczhdNqt-gvbq6EDeIJosxlkV-NhPYU6psE424gyqNJU5RWFSJXgHZKLygQ8uvjzu-CDLUDEiwrPlB_cqGWN8XbRZavzzSlsGrYp5AhtjU3_DnTQ/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/AVvXsEik_B5pYRIZbHur5spIxImEzeLZs06oZ9rs58Z0YODixZbEUBgQFLG0hgv_agfOsL8tMw6xYjL_1xtXDRVD70hFq4TQCv0NYe2P_s60WHr7zeDtlxCOYB9pgkWe-Y21VClu28mQ6bJJvGF2/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/AVvXsEj_EyyFYZaL6Q1kFYB6VXA8tHtfJ3FTlAeeRkdJbG4uTGeXna-zTusrpyUP_zFnUFnUgPYnDugHJK_6yh-XD7dEPaJaTdkfk6NSx7EfZiLViQXungqWME5NjamrXRBjJo4rJTiRj14CMfor/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 Customize it ?

-First blue coloured link should be replaced by the author image link .

-Second blue coloured link should be replaced by the time image link .

-Third blue coloured link should be replaced by the "icon near the labels' image link .

-Fourth blue coloured link should be replaced by the 'comment bubble' image link .