Tutorial - Add an Image to Blogger Post Title

Blogger post titles are a bit uninspiring and frankly dull. So I'm going to show you a way of giving your post title a bit of life. You'll see that on this blog I have an image next to my post title. I'm going to show you how to achieve the same thing in blogger.

 

[caption id="attachment_49" align="aligncenter" width="547" caption="before"][/caption]

[caption id="attachment_50" align="aligncenter" width="511" caption="after"][/caption]

First of all you need to create your image and upload it to photobucket. I've found the best size is 40px x 40px. Once it is uploaded grab the direct link and make a note of it as you'll need it later.

Then log into Blogger and navigate to Template > Edit HTML > Proceed > then click on 'Expand Widget Template'.

Find the following lines.

 

<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>

Delete them and replace with 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'>
    <table><tr>
     <td class='ssybyposttitle'>
      <img src='http://2.bp.blogspot.com/'/></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>

Replace the bolded text with the direct link that you made a note of at the beginning.

Hit Save.

There you have it, all your post titles now have images next to them.

If you have any problems just leave me a comment.