How to display Post author,Date,Label below post title with icons

Pin It Now!

When you see some blogs with icons before post author ,date and label then you think how you can add these for your blog its very simple here we are giving a code which will display your post footer below post title with some icons you can also replace these icons with your icons if you want them as you like

it contains a comment icon also which says 'be the first to comment 'if there is no comment and if there is any comment it says no. with comment
its very easy to add it for your blog
Before adding this code if you want to delete your footer which is provided by blogger you can check this

you can see the live DEMO in my Blog
STEPS

1.Go to Blogger Dashboard >Templet > Edit HTML.
2.Tick expand widget templates check box.

3.Now press Ctrl+F and find <div class='post-header-line-1'>
4.Add below given code just above <div class='post-header-line-1'>

<font style='background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-v1QtvdHub0oDELY6owwyEgzFrhm6N34k0qsMvb3J8-UnyS-nshuvukuScpTTR_Y_p5P6Dxuvl0J_3IJnReIOVYHfic3hri0niTYKDQWuAVY_MjUvB6LUasR-vBmNgkSD9F28iWe8zkdj/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/AVvXsEgKcD9PkQYLEfss-YrFuaaGesQCYmFWpdPGiqQEBabm0dGVmflhmhHpyLUzomG-kVIHgyQsCSyS8bc7W3q6Y2EPBglEViKWHKWb2vz1NAVl4wnjnbrE1SjcuNP9Ctd4E_H-aeuDqB_C8Ok7/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/AVvXsEhq3fedCr86ToYflFh1fNfFPKi32VOPp6qmDZ4Em4UX9_R39E-cz5IsFSq0OqMl15e9fVIGjQjXnfCPnl5DGxNiym5b4-8VLTeswHbKIkHhK3VFgKxGAYuFPv784qg3vhlvhUqUj9pvxWAb/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/AVvXsEgFb2wMiAe8IbJVIyF67H0hjMIL5cf2ZOmet0ENG90ldgreLZJ8mWqeugUGaPXgsmKXSK6YSGlpQFoFwnkVAWTS7h0MBm-rl8infIKsjlB4edDR5psNJ3LYKdTU7aFhDZYEfHOsEM0teJ2r/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 LABEL icon then replace the code in LIME with your own icon.
If you want to change COMMENT BUBBLE icon then replace the code in ORANGE with your own icon.

Pin It Now!