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://lh6.googleusercontent.com/-KyfZD1nyRt8/T8x6-q77uqI/AAAAAAAAB5g/ljSwCUPIN1w/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://lh6.googleusercontent.com/-KyfZD1nyRt8/T8x6-q77uqI/AAAAAAAAB5g/ljSwCUPIN1w/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 :)

Post a Comment

  1. i need add all my html codes like yours code box. how can i add it. please help me. its a great use for me.. thanks

    ReplyDelete
  2. Hey I am using syntax highlighter.Just search on google will get hundreds of tutorial to adding it to blogger blog.Also I will publish a tutorial on it.Anyway what is your Blog URL?

    ReplyDelete
  3. ya..is there any stylish box to add html code to blog post. i saw bulb style. need other styles plz help

    ReplyDelete
  4. One more question plz....how to add a animated image to blogger blog post. see example: http://gj37765.blogspot.in/2012/05/flash-animated-label-cloud-widget-for.html

    ReplyDelete
  5. How to make an image appear in google search results.
    Regards
    Indian-Share-Tips.Com

    ReplyDelete
  6. Hello I'm using h1 as post title what can I do?
    Thank you
    www.revealingthestuffs.blogspot.com

    ReplyDelete
  7. This comment has been removed by a blog administrator.

    ReplyDelete
  8. This comment has been removed by the author.

    ReplyDelete
  9. Keep posting the articles,useful to every one komejiten

    ReplyDelete
  10. This comment has been removed by the author.

    ReplyDelete
  11. The information which you people are given are really superb.usaconsultantjobs

    ReplyDelete
  12. Articles are very nice…Nice comments too koek26

    ReplyDelete
  13. Thank you for this tutorial.its really informative tutorial toaclan

    ReplyDelete
  14. Thank you for this tutorial.its really informative tutorial toaclan

    ReplyDelete
  15. Thank you for this guidance.its really informative for all soensho

    ReplyDelete
  16. its really informative tutorial. Thank you for this tutorial mama-craft

    ReplyDelete
  17. its really informative tutorial. Thank you for this tutorial mama-craft

    ReplyDelete
  18. The information which you people are given are really superb.qhd9che

    ReplyDelete
  19. Information's are more innovative and nice to read it skbroaband

    ReplyDelete
  20. I am so excited while I read all the comments usasofjobs

    ReplyDelete
  21. This comment has been removed by the author.

    ReplyDelete

If you want to be informed about any replies then check "Notify me" option (present at lower right corner of comment box and it will display if you are logged in to your google account).PLEASE DO NOT SPAM

 
Top