In blog Show Posts author,Labels,Coments and Date with Icons below title of Article(Post) In blog

How Display post author,labels,date and comments with Icons:

                        Hello,
                                                        Today I am gonna to show How we can make an article /post in blogger more informative By blog author name ,Comments count link,Labels and the time date at which the post was published.So most of the template already having these properties bus in some case we have add theses information.Now see that how the comments link Behave when there no comments the posts,so There would be a link which says that "Be the first to comments" Which shows the number of comments if there 1 or 2 comments then on the comments will shows comment (1) or  comments(2) as possible.And there will showing near the time and date at which the post was published and the post Labels it is present in every templates.
I am gonna to show you the following steps to make the post of blogger more attractive and beautiful so if you also want then follow the following steps as given below very easy!

1st Step:

               In the first step Open your blogger dashboard and go to my blog and then go to the Template and then Edit HTML. As the further help you can get from the given picture.

2nd Step:

                In the second step just click mouse left button inside anywhere in the HTML And then Press Ctrl+F from the keyboard and then there Free blank will be open on the top of HTML code for searching.
As in the Picture.

3rd Step:

               In this third step Just paste the following Codes in the searching box and then click on the enter button the following codes will be high lighted in HTML.

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

                      
                                 or
     

    <div class='post-header'>

4th Step :

                In 4th step Below this code Add the given HTML.The Given HTML further you can change the Icons For this you need to replace the blue color URLs with your new images URLs.

• The first URL is for the icon for Author.
• Second URL is for Clock Icon.
• The third URL is for Icon near the Labels.
• The fourth URL is for Comments bubble.

So you can edit them!

<div style="margin: 5px 0; border-bottom: 1px solid #F2F2F2;padding: 5px;"><font style='background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgp4GVPpXw75KutSEDQjHvCAZiqgJi8bZUeKUjDYb81rDxEK7dkmHMkr3Y813TMta_fggs1Lv36V65c0GlcL5oUsHzTs0nDliNyx-Jvo8src4HELMfBRZV_6TICCnP4yHFlXwToapCZYp4D/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/AVvXsEgWMVNM1eNIn2VEqO4VO3lwZ21Na5ZgB9Sb1_7h1t5BsSze-yZvSdQn_fJ3lfbL3UDb_fX8DPJF9pk0g98Yalv0eCCCCPVGyMkDMnrglyPWR_CbG5NUFQ_LUZYyB8Z_faLFU6J6aKdgza-v/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/AVvXsEjrZUHTOJspeMIdU0rNEXeMrFmFmLzR3Ej-6BucEh5V34nt4K0InGgyG68Ho7yc_JnMNN-Q59JHlP8zq_xvmAc1xWe4ldVdEMOdgSi-cmVcNdzpNseztc4SFqlAsKMQyigUFD3LE1Yg6dfn/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/AVvXsEg5cajwIzaSyTN6bR-CKnucsMX36NNqP71rgxUCdZbYVRDbzJd6XvRU2mijk3Smsn1SwYazz9zgteoX_VvKZBZwQKmA1yYI6dMUi182HrMybhUj8F_RkRM8SlnFqUpjKkfNVKonLmwUMOkE/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>

5th Step:

               In this step Click on the Save Template Button above the HTML to save the changes and this will Occurs.
If you have any problem with this you can comments below.I will try to solve your Problem.

Thank you!