Display post author date labels and comments with icons below post titles

When there are no comments made to your posts, theres a link that says Be the First to comment! and when there is just one comment it says 1 comment so far. If you want to make your blog more stylish by replacing these texts with some cute small icons along with the default Author Name, Post Date, Labels and Comments... then just follow the next steps:

Steps:
 
Step 1. From your Blogger Dashboard, click on the Template option, then press the Edit HTML button:

Step 2. Select the "Expand widgets templates" box

Step 3. Search for the below code (press the CTRL + F keys and paste the code in the search box):

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

If you cant find the code above, look for this one:

    <div class=post-header>

Step 4. Paste the following code below/after the code above:

<font style=background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibni4K6hf9jalTrpsctOB95N96L4vD84kShFA4iijEpNEz5wdf6iTd8u8sc8Zif3y4jXyBvST-UGrhcm3t0iLmoAEX1p8iQ4AYoyDRn8j8mnRozCjWtnQNQt3Ip1f1206xPhAvuhLEr-VT/s1600/author.gif) 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/AVvXsEhEOX8qPRxdB-bJJa7Nj15gWkBLFqjS2bltsTIfxj_sG91dQIghuAN0CldP8qEQlIyIC8O4366-GwhuecYrCCcXkOdZsD_U6IbUj5JzwVgbON3ngcelTGAKkArEdVetRVZnLL_OWMkJVJ1l/s1600/clock_icon.gif) 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/AVvXsEhjsWSje38aM7O8whHWD5cFgN8uV2bIORF7ySQw4VndJ4NFvZPOf7whpw4iF9mwZDlFaVoEF6i_PKk8xzUc04fsexTAOGvjuscqOAENlcEGcLF8cYCx5TndJ7OJnnhd1QkOiHnBH-ixHsGb/s1600/tag+icon.gif) 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/AVvXsEhPTeKPl10dph3Q0JzhsbhXXa9AwFfC4kqUWXNfq_8qsncdTmOOrqQLG89oIOPBxGrMcHoGEDpeV_GWNGZ4P14mQCVMw5GzneIro0tMQkDroNlMjxv6-xY65UvxPr0duvXur5VICQOuXcu4/s1600/comment-icon.png) no-repeat;Padding-left:20px;><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>

How to customize:

If you want to change the icons, just replace the URL addresses above colored with:

• Red - Author
• Green - Date
• Blue - Labels
• Violet - Comment bubble

... with the URL address of your image.

Step 5. Save template... and youre done!

Related Posts by Categories