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/AVvXsEifYZoubq_dWofuMWgQBVMRd36_DFvNMPgsZeqMhyMCkvbjOCqsK0Yfdyx-8J7y2CbiQehjpz413EFZIWpeTr9JF1j0BhjyMs5ADlZZYMt0kD18xcO1y_oys7j8Ru-MIp6z0SoKYcBgk6Lo/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.

• Share ▼
  • Twitter
  • Share
  • Comment
  • Google+
• Subscribe ▼
  • RSS
  • Newsletter
• Connect ▼
  • Follow
  • Fanpage
  • YouTube
  • Google+