How to Add Author, Date, Labels and Comment Bubbles to Blogger
Step 1. From the Blogger Dashboard > go to "Template" and press the "Edit HTML" buttonStep 2. Click inside the code area and press the CTRL + F keys to open the blogger' search box
Step 3. Type or paste the below code inside the search box and hit Enter to find it:
<div class='post-header-line-1'>Note: If you can't find the code above, look for this one:
<div class='post-header'>Step 4. After this code add 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/AVvXsEgOBoN0FAPoGuj87ow0-URiBemIvqOE469PBSA-uztn8gtvtk7m2CFAMCW805UvCBSwj95c3LPC-jxdq-Zc9fq-LB-aABLP6Xr6wa1hvM5qVWLxDunu9Uig0ggacIPb4bKyXbIPuSXVBIMU/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/AVvXsEjEn0fu02eqslDzJ_gMlFEsBpHgNmsYhI8TjM9GHytr-kWVCa5nTJQLgSPqjGjngF8pDohZqZ8F7zd46vdHnTg_dAogviyYirXkb2-HvwGiZeIVeA_k5Qa1PviVou-UliX97jtcjEW_1ha1/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/AVvXsEgBmbNoOHJDdCSdhBo59YhiRq90cNRAl43SisAitw4UClvzl3SBnCj84yTkEtX0bK3xlj53yiu2SDFtkmuES8SiBY4t84jSq5GAyaTwUm3QMv1bpO-Rpe8IMns9NJxrbLNfwqpq2z9TPt35/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 + "?max-results=8"' 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/AVvXsEjjs3zqUSxI3nrj9RD1Dj88LqXAneMho-FT-sYEGUVGNsZJRKbv3Vdfb8cpaPfNLrwpzTSBlJ_yCHcV5UJ1rFkQnz1vw0-Z5ngGQkDVflXWSwwVBtNagQzHhSRynb24WWvvuwcSPIvEuZpk/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>
How to customize:
To change the icons, replace the URLs in blue from above with the image URLs:
- First one is the icon for the Author
- Second one is the Clock icon
- The 3rd one is the icon near the Labels
- And the last one is for the comment bubble
Related: How to Add Comment Bubbles to Blogger posts titles
Step 5. Click the "Save template" button and you're done!
0 Response to "Display post author, date, labels and comments with icons below post titles"
Post a Comment