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 + "?max-results=8"' id='lable-style' rel='tag'><data:label.name/></a>
<b:if cond='data:label.isLast != "true"'>|</b:if>
</b:loop>
</b:if></font>
<span class='post-comment-link' style='Float:right;'>
<b:if cond='data:blog.pageType != "item"'>
<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