Add Image Just Next To Blogger Post Titles

In this post we are sharing a cool hack which will add an your own image,favicon or whatever you choose just next to your blog's post titles.You can also add your own profile pic. it will give more personal touch to your blog.To apply this hack you just have to delete and put some code in your template.If you want to see live preview of the hack,then see the image below,

Now lets see how to apply this hack,

How To Add Image Just Next To Blogger Post Titles?

I have tried my best to keep this tutorial easy as easy as possible.For better understanding I am dividing this tutorial in three parts,but you just have to follow any one post because it depends upon the tag which you are using as post title.

• Part 1: Finding the tag which you are using as Post Title
• Part 2: For those who are using H3 tag as a Post Title
• Part 2: For those who are using H2 tag as a Post Title

Part 1: Finding the tag which you are using as Post Title

1. First go to Blogger Dashboard > Template
2. Download a copy of your template
3. Click Edit HTML
4. Hit Proceed
5. Check Expand Widget Template checkbox
6. Find below code in your template

<h3 class='post-title entry-title'>

Now if you found above code in your template then you are using H3 tag as a post title.Now only follow second part of this tutorial

If you can't find above code then find for this one

<h2 class='post-title entry-title'>

If you found above code in your template then you are using H2 tag as a post title.Now only follow third part of this tutorial.

Part 2: For those who are using H3 tag as a Post Title

1. First go to Blogger Dashboard > Template
2. Click Edit HTML
3. Hit Proceed
4. Check Expand Widget Template checkbox
5. Find below piece of code in your template

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

replace it with below code, (be careful while deleting,only replace above exact 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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjW_0dMRQY6DxGCHslFzvqEQPyEYpbXltjnOoTxf6BY-24l5vPbarUzYgVpue-4a_s1BTVrwC_6u42vTT2jZGFvqwwAydB6qylPmgfhu0SVuhmJgYk93fCfQyOsqPeuVQEG5WaI3475u8s/s1600/helperblogger-pencil.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>

Now replace the image URL in above highlighted line with your own image URL (image should be less than 64X64 pixels)

Part 3: For those who are using H2 tag as a Post Title

1. First go to Blogger Dashboard > Template
2. Click Edit HTML
3. Hit Proceed
4. Check Expand Widget Template checkbox
5. Find below piece of code in your template

<b:includable id='post' var='post'>
  <div class='post hentry'>
    <a expr:name='data:post.id'/>
    <b:if cond='data:post.title'>
      <h2 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>
      </h2>
    </b:if>

replace it with below piece of 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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjW_0dMRQY6DxGCHslFzvqEQPyEYpbXltjnOoTxf6BY-24l5vPbarUzYgVpue-4a_s1BTVrwC_6u42vTT2jZGFvqwwAydB6qylPmgfhu0SVuhmJgYk93fCfQyOsqPeuVQEG5WaI3475u8s/s1600/helperblogger-pencil.png'/></td>
     <td><h2 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>
      </h2>
     </td>
    </tr></table>
     <style>
       h2.post-title {
       margin: 0px !important;
       }
     </style>
    </b:if>

Now replace the image URL in above highlighted line with your own image URL (image should be less than 64X64 pixels)

Need Help?

I have tried my best to keep this tutorial as easy as possible,If still your are getting any little problem to follow above steps then feel free to mention them in comment box.I will try to give reply as soon as time allows.


Peace and Blessings Buddies :)