Display Post Service Author, Date, Labels In Addition To Comments Alongside Icons Below Post Service Titles

This tutorial volition exhibit y'all how to add together to a greater extent than information inward Blogger posts similar writer name, display the post date, post labels as well as comment count links. How does this work? The comment links volition display the 'Be the starting fourth dimension to comment!' text for posts amongst no comments as well as i time nosotros teach a comment, it volition exhibit '1 comment as well as therefore far'. On the left side, it volition exhibit the writer name, a clock icon amongst appointment for posts published as well as finally, the post labels.

How to Display Author, Date, Labels as well as Comment Bubbles inward Blogger?

1. Login to your Blogger Dashboard > become to 'Template' as well as hitting the 'Edit HTML' button:

2. Click anywhere within the code expanse as well as press the CTRL + F keys to opened upward the Blogger search box

3. Type or glue the HTML trouble below inward the search box as well as press Enter ii times to uncovering the instant occurrence of it:

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

Note: If y'all can't uncovering the trouble above, await for this one:

<div class='post-header'>

4. After this line, add together the following:

<div style="margin: 10px 0;"><span style='background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNzCtV5mi_7B5Yq5RmDOXUYheB8Kopt9zjyfHe0jKrA-FcF08tYwoiUGYnx6OojpPrAkEqZ3nqxC2d2hk3f8mt535DVQO9BHfIDqIE_0VqT4trkQIb7v0niVMuprmai9LB1Se9rgsiYlJx/s1600/author.png) no-repeat scroll overstep left;padding-left:20px;font-size:11px;'><data:post.author/></span> | <span style='background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgEZVmSRX7zkxCIzlA4aQsAD8Oq1iiPLh7vfJfY_oxQHswkaaHOeN6UHzWNnTeRHcVCkR88EI8t_T6E9_vgi9xZsNa8HX6zLHCzo-CAaV6L7JRLqjK2dUi4N1fWIzOQq6ZwqeL3y9nk9vz/s1600/clock.png) no-repeat scroll overstep left;padding-left:20px;font-size:11px;'><data:post.timestamp/></span> | <span style='background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSpALSxCSVRWHKplvgpzEWbtWts6gz_jzbuLnZA0xEqrlejkr90ZuwLpTzoycYQW1QLtcQKf1CKT9cABFLMDmbTPspNWwaBp_cXFKh5FSBb4m3ZVimuEnbuqrLTkCaicnNCLlvWMfa7lsn/s1600/tag.png) no-repeat scroll overstep 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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGEbm2feYTRRynEx1j19C5JeqHzByxPFcpi3ShT5blZ0h0c7dSPduiOqHirIrmM5koxPpUQcBsV1XGckb0LmbkNbduZShqKAXP9V1d2eKSGZFtnszvFp7PoLGCnCvc1a0foc7mHMoR3R4M/s1600/comment.png) no-repeat;padding-left:20px;font-size:11px;'><b:if cond='data:post.numComments == 0'>Be the starting fourth dimension to comment!<b:else/> <b:if cond='data:post.numComments == 1'><data:post.numComments/> Comment as well as therefore far<b:else/><data:post.numComments/> Comments as well as therefore far</b:if></b:if></a></b:if></b:if></span></div>

How to customize:

To alter the icons, supervene upon the urls inward bluish amongst those of your images (see this tutorial: how to teach the url of an image):

- starting fourth dimension url is for the author's icon
- instant i is the clock icon
- the 3rd i is the icon for the labels
- the lastly i is for the comment bubble

Related: How to Add Comment Bubbles to Blogger posts titles

5. Click the 'Save template' push as well as you're done!

Share this post