Display Post Author,Date,Labels And Number Of Comments Below Post Title On Blogger

Today I am going to share a nice tutorial about adding some elements below the post title of your blog. The elements which will be shown after adding this widget will be name of author, publishing date, labels you have added to the post and number of comments on your post. This is the simplest guide I found on internet to add all these things at one place through some simple scripts.

Image Source: Google Image Search

Features:

1) Shows all elements in one line and requires very little space.

2) A simple but attractive design.

3) Shows number comments on the post and if there are no comments it will appear as "Be the first to comment!"

How To Add This Widget - The Steps :

To add this attractive widget to your blogger blog, just follow the steps given below:

1) Go to blogger and select your blog.

2) Now go to the template tab.

3) Click on Edit HTML.

4) Now the script box will appear, click on it to activate it.

5) Press CTRL+F and search for following code:

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

6)  If you can not find the above one then search for the following code:

<div class='post-header'>

7) Just paste the following code before the above one. 

<div style="margin: 5px 0; border-bottom: 1px solid #F2F2F2;padding: 5px;"><font style='background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPJE0n0kuhs1hu7_dKpklufxf6eD3FpklDp0xeKb-dDFDVZPc1vuS4bYQsl5RfZt9T-CyIcDH51GpAme_e0MZU74wqtfMZRp_uDLKjyK9cX0ahNaCNUVmZtQpljLKAelpYujqs6cynzMxs/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/AVvXsEgHcNVdqWxRYHz2mNReyUZkWw7zhe4kMULFe-d1oHGJcFq3eRuQlphZGoLEuXDtFrLNIZRjpbjt0YC31rR5iDuExedV6ib2WtUmXatfNe_HmTw4La-IMRrfJxrd-9laMlWXNxJt_xcmsvWQ/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/AVvXsEi5XL2u0btsW7rwDr5Ful1FRe5ILw-SlU1o458YRmPBBGI3TuiIARKDlVqJ1AE6e1KmuvT8bnvbx4PK2iRbi-gkkRdTM_GhPUk96v4J1B2CVExilMYL-ttS2ylcIoPETSN7gLbB97CcQ2B1/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/AVvXsEjVCkf366Fhz1AvOcTf7JYyNHjPFOdP7Voq6TQARJiEsJkbTiUhr-nRNXeE4Ufe9Dd4vkRZ8s-zPvas6yeVzl_CB7-9nuK4o8RxRRS2j57PkiW3B0ceObpQTXuvx3n6c9MsG6dlverv93wy/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>

NOTE: 

If you wish to change the icons, then replace the image links from the script.

•  Green link is for Author icon.
•  Brown link is for Clock icon.
•  Violet link is for Labels icon.
•  Blue link is for comment bubble.

8) Save the template now and you are done.

Final Words:

This was a guide to add author name,number of comments,labels and date of publishing.You have successfully added this gadget to your bloggers blog now. You may want to add a short but sweet author introduction below the post on your blog, if you want so then here is guide- Add Attractive Author Box Widget Below Post. I am sure that you will like that too. If you have any problems related to this post then you can feel free to comment below. Eager  to see you comments, happy blogging..!

Content Worth A Share ?

• Facebook
• Twitter
• Google+
• Pinterest
• StumbleUpon
• Dig
• LinkedIn

Written by Unknown

Satyam Bora Is 18 Years Old Boy Addicted To Blogging And Technology.He Is A Part Time Blogger And Student Of Civil Engineering. This Guy Is Always Here To Help You :)