How To Add Author, Labels, Comments and Date Bubbles To Blogger Blog

How To Add Author, Labels, Comments and Date Bubbles To Blogger Blog

1. Log in to your blogger account > go to " Template" tab and click on "Edit HTML" Button:

   

   go to "Template" tab and click on "Edit/HTML" Button

2. Click inside the Template and enter CTRL+F to open search box:
   
3. Type or paste the following code in the search box and hit Enter to search:
   

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

   Note : If the code found two time, then go for second one.
   
   If you can't find the code above then look for this one:

   <div class='post-header'> 

   Note : If the code found two time, then go for second one.
   
4. Just after this code paste the following 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/AVvXsEjpDF4jv9D1fGNk2OsIOT6Y3wroYoN01Rr2IIz0nRUTZgjrb5UkuvL7NiXteq-R87Myy-xGA-c9PXmvc2uBfzo0JFcheu5Txpce1-rYoqRc4meYAB8Hf2JQysvNv34V8VghNYj9lKwSXGt2/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/AVvXsEhcpTqjT0K6LZt-kBhJKiqGkjrzy7WSjLkGwnTxFsRK23dX7cH5pcIX2Wuenpdk_CBP0PQJa1XQgwB1Gl7ju1B9JxHHGvCaClK6EyKeqT8d-y7JIdynESYRtOOLCwdJsxdcZN_vuOUmxOfF/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/AVvXsEiPmkgF9Xf7n6f9i2sJX_1qJTPOoGSPWeesKOcM2j9M6LQ8S0JWP_sWwB-Mo-xUzEilYX8z-dGjLs6fcds28tHJiGZf91mc8WlUrt5l9HTCyk1XE-dM1EVIIgZGX1Od2kbes_JR6dJW1snV/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/AVvXsEhpFwv3P-3X0ADfhTSS_s6BB5HS95O75cPMdxISKvk4Q1gpH7f1sMuL842WiWG4kNrJTUGy7qdyfvUB9y_2bZUaq06za2jLd9n2i_kWOAz3c21-hwQzeyCI8d8J9oiSdkZzfzkTMUOstLz8/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>

Edit Notes:
To change the icons, replace the red colored image URLs of the code:

1. First one is the icon of Author.
2. Second one is the icon of Clock.
3. Third one is the icon before labels.
4. Fourth one is the icon for comments.

It's Your Turn

Do you get your problem solved by reading this article or get confused. Let us know by submitting comment in the comments box below