Add Image to Post Title in Blogger

[caption id="attachment_322" align="aligncenter" width="558" caption="Before"][/caption]

[caption id="attachment_325" align="aligncenter" width="556" caption="After"][/caption]

It has been a little while since I have done a Blogger tutorial so today I'm showing you how to add an image to your Blogger post title. It is actually pretty simple when you know how. So let's get started.

First of all you need to make sure your image is the correct size. I'd advise an image size of 40x40 px. When that's done you'll need to upload it to Photobucket and grab the direct link.

 



 

Next log into Blogger and navigate to Dashboard>Template>Edit HTML>Proceed>Expand Widget Template.

Now find the following (highlighted) lines and delete them.

 



 

Paste the following code where we just deleted the above code from:

 

<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='yoururl'/></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>

Remember to replace 'yoururl' with the direct link of your image.

Hit Save.

That's all there is to it you now have a post title that really stands out from the crowd.

As always leave a comment if you have any questions.