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

n this post, i will show you how to add default Author Name, Post Date, Labels and Comments with some little icons to the left of each other. You can see under each of my post title, some details like author name, time when posts have been published, labels and the comment count links. When there are no comments posted the link says 'Be the First to comment!' and when there is just one comment it says '1 comment so far'. This is a nice hack that will make your blog look beautiful and professional.

Let's start adding the codes.

Step 1. Go to Blogger Dashboard > Edit HTML (for safety, backup your template)

Step 2. Check the "Expand widgets templates" box

Step 3. Search for this code:

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

If you can't find it, 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/AVvXsEh6vYx3nRCec8DueGDiv39fKjt4YOUie31t24qb8L3uLoKqNrc-JNgUI5rkn4lhp_flyZbLV6Ow99yIiqKzqNNIrdO5BrK1rIVLrew7gKf64kc7wkwwnpeCntYq8OEOBMd28ljcjKG3KPZV/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/AVvXsEg4AsLKCrdlciH3F5yNm0kD8qXlcKmX7WPUplV77a2h27uqPj4phZ11UXyt80WKvrRTgPgsWfJtzvS0JNQ0j2mFfAK_XB9nvbKIBNf477Y-x_1m6jHqBQZK1WSIghqH_ug0gI8Eq2uiz6al/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/AVvXsEhRextzq9QjM4GrP-10XNnmnd_6aPExTKSW6_7BhjAw7ki2XJRv2O5JVV9ScZePkTXslmFHkVxrwlQUGi_nxpRWXph1ymOnuaBtyUQ3Qm1ieUqkeoG-5lopp3V9MyRtAsZM1E0vTZu8vAwj/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/AVvXsEhsjm-iFoRIP_hCbzuiG_tcBYE6p93jBizqyDkfULGrkCCUSldvlkdquJarqAATE1I4tRE0TikmcydUQU4avZYMmP6YNapNWXLCyZjQxxlk1gFHj5MQ0hwTbwSn6MMtB-6YTrKzgQde01vA/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>

Details that can be customized:
Replace the code in:

Red (Author)

Green (Date)

Blue (Labels)

Violet (Comment bubble)

... with the URL address of your image.

Step 5. Save template... and you're done!

How to add an image next to Blogger Post Title

By default, Blogger's post title is a plain text. In this tutorial, I'll show you how you can add an image beside your post title.

So let's begin...

Step 1:

First thing first you have to do is to prepare an image. After that you'll need a direct link to an image before you proceed further. You can upload it to tinypic.com and copy the URL located in the Direct Link for Layouts box. Also, make sure your image is sized appropriately. You don't want to see a huge image next to your post title.

Step 2:

• If you're using the old Blogger interface: Go to Dashboard - Design - Edit HTML - Expand Widget Template (don't forget to make a backup)

• If you're using the new Blogger interface: Go to Dashboard - Template - Edit HTML - Proceed - Expand Widget Template (don't forget to make a backup)

After that, find (CTRL + F) and delete the following code:

<b:includable id='post' var='post'>
  <div class='post hentry'>
    <a expr:name='data:post.id'/>
    <b:if cond='data:post.title'>
      <h3 class='post-title entry-title'>
      <b:if cond='data:post.link'>
        <a expr:href='data:post.link'><data:post.title/></a>
      <b:else/>
        <b:if cond='data:post.url'>
          <b:if cond='data:blog.url != data:post.url'>
            <a expr:href='data:post.url'><data:post.title/></a>
          <b:else/>
            <data:post.title/>
          </b:if>
        <b:else/>
          <data:post.title/>
        </b:if>
      </b:if>
      </h3>
    </b:if>

The code to be deleted:

Step 3:

Paste the following code in the place (be careful when replacing) of the deleted code in Step 2:

<b:includable id='post' var='post'>
  <div class='post hentry'>
    <a expr:name='data:post.id'/>
    <b:if cond='data:post.title'>
    <table><tr>
     <td class='ssybyposttitle'>
      <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHuM_jhwloZAyPAnPUfMaWedUnZ4o0ujqs4L3eI-EhOjQCTh6rKVnKSS_7ijgaa0R9RF9SWVawJWANE0Iz1y_exzmZdVd4f2ssEkJK6__EdiuD8WXVfmov3H3YqtVfXDc8oXxiilk2_-Xt/s1600/icon.png'/></td>
     <td><h3 class='post-title entry-title'>
      <b:if cond='data:post.link'>
        <a expr:href='data:post.link'><data:post.title/></a>
      <b:else/>
        <b:if cond='data:post.url'>
          <b:if cond='data:blog.url != data:post.url'>
            <a expr:href='data:post.url'><data:post.title/></a>
          <b:else/>
            <data:post.title/>
          </b:if>
        <b:else/>
          <data:post.title/>
        </b:if>
      </b:if>
      </h3>
     </td>
    </tr></table>
     <style>
       h3.post-title {
       margin: 0px !important;
       }
     </style>
    </b:if>

Step 4:

Now, replace the image address in red line above with that of your image (the one that you've gotten from Step 1).

Step 5: Save the Template.

Add your Profile Pic or Avatar next to Post Titles in Blogger

Add a Profile Image Next To Post Titles

1. Go To Blogger > Design > Edit HTML
2. Backup your template
3. Search for .post h3 or .post h2
4. You will see a similar code like this one, 

   .post h3 {
   color: #7CA2C4;
   font-size: 20px;
   font-family: Arial, sans-serif;;
   font-weight: normal; 
   margin: 0px;
   padding: 0px 10px 0 47px;
   }

   Replace this entire code with this one,
   
   

   .post h3 {
   background:url(IMAGE LINK OF YOUR PROFILE PIC) no-repeat top left;
   color: #289728;
   font-size: 20px;
   font-family: Arial, sans-serif;;
   font-weight: normal; height:45px;
   margin: 0px;
   padding: 0px 10px 0 47px;
   line-height:1.1em;
   }

   
   

   Now replace bolded yellow text with Image URL of your avatar. Your avatar should be 40px by 40px in size. For better visibility choose a profile pic with white background and coloured border like this one,

     or you can try this without border,

   

   To Learn how to upload images on blogger and get their URLs read,

   • Upload images on blogger

   Replace #289728 with the post title color code of your blog. You can find this title colour from the code which was already present. In my case it is #7CA2C4 so I will replace #289728 with #7CA2C4

        5.   Save your template and you are done!

   Visit your blogs to see an interesting new change. If you faced any problem then do not hesitate to let your brother know. Would be a pleasure to help you out. Have Fun! :>