Home » Development » Display Blogger Post Author, Date, Labels and Comments

Display Blogger Post Author, Date, Labels and Comments

Blogger gives you free blogging services with many free simple and dynamic Themes for your Blogger websites. But, somehow many peoples are using their own created blogger themes. Many Blogger masters and webmaster can design and customize their blogger websites themes by editing Blogger Theme HTML codes. This tutorial will be helpful to all blogger master and newest blogger users to customize their blogger themes to add Author, Date, Labels and Comments with Icons at Blogger posts in Blogger Themes.

Display Author, Date, Labels and Comments in Blogger

Display Author, Date, Labels and Comments in Blogger

Step 1: Log in into your Blogger account.
Step 2: Click the Theme option on left of your computer screen.
Step 3: Then hit the Edit HTML button.
Step 4: Click anywhere inside the code area and press the CTRL + F keys to open the Blogger search box.

Step 5: Type or paste the HTML line below in the search box and press Enter two times to find the second occurrence of it.

<div class=’post-header-line-1′>

NB: If you can’t find the line above, look for this one.

<div class=’post-header’>

Step 6: After this line, add the following HTML codes.

<div style=”margin: 10px 0;”><span style=’background:transparent url(https://4.bp.blogspot.com/-c1B11ScMq2g/UrceOVSjbxI/AAAAAAAAFnI/AfLfIudanZs/s1600/author.png) no-repeat scroll top left;padding-left:20px;font-size:11px;’><data:post.author/></span> | <span style=’background:transparent url(https://3.bp.blogspot.com/-8zBVC26ojQE/UrcfeqmWuXI/AAAAAAAAFng/f_xOYkEhdVA/s1600/clock.png) no-repeat scroll top left;padding-left:20px;font-size:11px;’><data:post.timestamp/></span> | <span style=’background:transparent url(https://2.bp.blogspot.com/-Zz2yZeaJG6U/UrcfOYO6_JI/AAAAAAAAFnY/1WHah9jzmhE/s1600/tag.png) no-repeat scroll top left;background-position:0px -1px;padding-left:23px;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=7&quot;’ rel=’tag’><data:label.name/></a><b:if cond=’data:label.isLast != &quot;true&quot;’>|</b:if></b:loop></b:if></span><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://4.bp.blogspot.com/-rC0rrfpsbhE/UrcdZ37f_uI/AAAAAAAAFnA/ZIiB7SJgx0I/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>

Step 7: Now click on the Save Theme button to save changes.
It’s done. Now you can visit your blogger post to see new look of your blogger site. You can also customize our provided HTML code and edit the image URLs from that HTML code.

Thanks for reading!