Display Author name , date , label and comment count with icon below Blogger post title


Every Blogger like to upgrade the Blogger's simple template look into attractive professional Blog's look.

This tutorial provide the tricks that how to display the author name , date , label and Comment count with icon below the Blogger Post Title. So Your Blogger template design become professional layout design.

A simple CSS design tricks and

Steps to add the CSS design below the Blogger Post title

1. Go to Blogger Dashboard - >click on Template - > click on Edit HTML option
2. Now find the code to press Ctrl + F -
 <div class='post-header-line-1'/> 

If you can't find the above code , then find this below code -
 <div class='post-header'> 


3. Now paste the code below the above 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/AVvXsEgxszlp5Tk1DG_0V_3IdtBdakd6_fMFnxWSJMVPNpQuaHYc8nT34TDCPjv6Com6_NUAC8IYXU7hx9mjGr5r595SGPQKEzCkP38z2tP5drnJq8jy7K4h9iXuZnwKkFV0oCcm0dGBtfapud4/s1600/author.png) no-repeat scroll top left;padding-left:25px;font-size:14px;'><data:post.author/></font> |
<font style='background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1IydMyg99i_3nYRePPrNdmIBIvq_GsSDlG6ReVkVh0iCERDsewZ5uR1UDVf8kchuHauZDprhTEP-FBPpI8VHfMcXvtkUOOgs6u2nShSVahZzNE_dbmsjYIz9g2iWz5Sg9CUyuof1Xf4k/s1600/clock.png) no-repeat scroll top left;padding-left:25px;font-size:14px;'><data:post.timestamp/></font> | <font style='background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2W_y77j1e3ViIotgHxUSopJfriPXfUCIpElBgmzQ5cGgwY4UdPmYBU3OGr9iJ6cbPNJkTS0zqh7JUGPZUj5KimZBvK9pDSgO7vr_pen8BSAxyEUf01HObeP-GT37-DbaCtJ97anD9H50/s1600/tag.png) no-repeat scroll top left;padding-left:25px;font-size:14px;'><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;' id='lable-style' 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/AVvXsEhWd3BGmwJAiXnXYJmCJsmBtPX-gFPbc-ykcJRAbImpNnGgQqIeBVJLcpkaDC_dMcnjDYo0FT-yxX1NsUWTF_3pCUbljXe0DGFTxHG9or5rqyrgX3w3hhdi5AB3xRB_cFU0FKsccdNfLY4/s1600/comment.png) no-repeat;padding-left:20px;font-size:14px;'><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>


4. Now click on Save template option.

After complete the all setp carefully , the screen shot of the design layout is look like -



Read more:

How to add automated recent post slider on Blogger
How to install Disqus comment system on Blogger
Previous
Next Post »