Display Author, Date, Labels and Comment with icons Below Post Titles

Display Author, Date, Labels and Comment with icons Below Post Titles

Easily Display Author, Date, Labels and Comment with icons Below Post Titles.Many times when you open some websites or Blog their you have seen Author name,current Date,
Labels and total Comments with icons at the top of the Posts titles.So at that moment you have also made up your mind to add this feature into your blog as well but you can't because you don't know how to do that.So you won't worry about i will tell you how can Display Author name, Date, Labels and Comment bubbles with icons into your Blogspot/Blogger blog as well.This is a Easy Way to Display Author, Date, Labels and Comment with icons Below Post Titles in your Blogger Blog.

So in this Tutorial i Will Tell you How you can Display Author, Date, Labels and Comment Bubbles with icons Below the Post titles in Blogger/Blogspot Blog.
The Author will show the admin name ,the Label will show the post labels,  date will show the time stamp of the Published posts and the Comment will Show the Total number of the Comments in a post.

How to Display Author, Date, Labels and Comment with icons Below Post Titles

Step 1:Go to your Blog Dashboard , then go to "Template" and hit on "Edit HTML" button to go to your blogger Template HTML.

Step 2:Click anywhere in the Template HTML and then Press CTRL+F to open the search Box for search this Tag inside your blogger Template.Type this code into search Box for finding it inside your Blogger Template.
Code:

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

if you couldn't able to find this code then try to find this one in your Blogger Template.

<div class='post-header'>

Step 3: Once you will find out this code ,then just after it copy and paste this code:
Code: 

<div style="margin: 5px 0; border-bottom: 1px solid #F2F2F2;padding: 5px;"><font style='background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9e7_UJfk2dBDBjZJ_FWBfiVNWZY9un8wxZHyJZhAH2QIDcohZDM8vB6ieVS9MCjoIFCussgdvwB4rkWksV1_eyct_MrnybjEsvEruWhPZDxAwbvlxUn8l0KgBXNx_kuFNW7vnYtCrmu-J/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/AVvXsEjOKA9OXRiFP2kvvl1Uy5N0vYz3bd-9S1gloNFsXS1qDREfdj0Y9fZhFX4GLfDI6KvDHmpFt_drVwgrxjUMJkRtpRwjXzx7NEDajpjHTbA29Z7fktLutsiwn0yP2XgQ9pOsGbC3oVxibnWz/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/AVvXsEhqRXTVZl9M6DshREG1e5xa9woljzDtl3ycdUC7VMq5QxtYwxA71LjT9IiWts_WZ0WiXMwiVz5AS4-oWJFbd_7vJbbCTCtCxQEmf3kjXvYEECVrcawjnb6b8elrlKk0E6UIxpphjGMMppWe/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/AVvXsEgtCeMvH-MpyhuBROrgZCuA_p17yiDd7InMHsorP7ApsZsMJ4dXYxWbszihsJh7XBgqevnMsT_EPsTrQm1B_kOlfJvaV-C0uY0DFkTMJtkylfReG0gbX5n1ygS8G2714mCkJgPryvMmF9xK/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>

Now you have done ! Open your Blog Posts and their you can see you name, Post Published Date,Label and Comment with icons.So i have added Extra Part for How can Customize these Icon into your Blogger.

How to Customize Author , Date, Labels And Comments Icons in Blogger

So as you have successfully Displayed All Icons into your Blog but if you want to make the changes into your Icons then you can also do so.
If you want to make any changes into your author,date,labels and comments icons then you Can do this by Replacing the above RED URL from you own image URLs.

• The First Red Highlighted URL is  for Author icon.
• The Second Red  URL is for Clock Icon.
• The 3rd URL is for Labels.
• And Last one is for Comments Bubbles icon.

You can customize any icon with your Required image by replacing it from the above code.Once you have finished  the customization of These Icons now Click on "Save Template" for saving the Settings in your Blogger/Blogspot.