Adding an Image Next to Blogger Post Title

The title of this post is self-explanatory. By default, Blogger's post title is a plain text. In this tutorial, I'll show you how you can easily add an image next to your post title.

Step 1: 

First thing first. Prepare an image. You need a direct link to an image before you proceed further. Click here if you're not sure how to get the direct link for your image. Also, make sure your image is sized appropriately. You don't want to see a huge image next to your post title.

Step 2: 

Go to Dashboard - Template - Edit HTML

Next, find and delete the following lines:

<b:includable id='post' var='post'>
    <div class='post hentry uncustomized-post-template' itemprop='blogPost' itemscope='itemscope' itemtype='http://schema.org/BlogPosting'>
    <b:if cond='data:post.firstImageUrl'>
      <meta expr:content='data:post.firstImageUrl' itemprop='image_url'/>
    </b:if>
    <meta expr:content='data:blog.blogId' itemprop='blogId'/>
    <meta expr:content='data:post.id' itemprop='postId'/>

    <a expr:name='data:post.id'/>
    <b:if cond='data:post.title'>
      <h3 class='post-title entry-title' itemprop='name'>
      <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 lines in place of the deleted line in Step 2:

<b:includable id='post' var='post'>
    <div class='post hentry uncustomized-post-template' itemprop='blogPost' itemscope='itemscope' itemtype='http://schema.org/BlogPosting'>
    <b:if cond='data:post.firstImageUrl'>
      <meta expr:content='data:post.firstImageUrl' itemprop='image_url'/>
    </b:if>
    <meta expr:content='data:blog.blogId' itemprop='blogId'/>
    <meta expr:content='data:post.id' itemprop='postId'/>

    <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/AVvXsEgPzKSt376dLwxCL77tuma92ovOAZVMQsrSHN9-7souPD-AqcwtTNEtdI91SG3q1BtPikv0CqR37hKQ8seVNFGxoHanqFT97KqEAOyEd9RRjdWUBcoV_3dlN7iYoKjn5Ew2ms3gjp745Qo/s50/autobot.png'/></td>
     <td>      <h3 class='post-title entry-title' itemprop='name'>
      <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>

New code in place

Step 4: 

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