How to add an image next to Blogger Post Title

blogger posts, gadgets for blogger, blogger tutorials

It has often been said that a picture says a thousand words, so in the struggle for the attention of the reader, we can add a picture or an icon to our post title, as I have put in the title of the post in the screenshot above.

Show Image Icon before Blogger Post Title

Step 1:

First thing first you have to do is to prepare an image. After that you'll need a direct link to an image before you proceed further. You can upload it to tinypic.com and copy the URL located in the Direct Link for Layouts box. 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 - Proceed if needed
Step 3. Click anywhere inside the code area to find (using CTRL + F) the following code:
<b:includable id='post' var='post'>
Step 4. After you found it, click on the left arrow next to it to expand the widget's code


Step 5. Then delete it until you reach to <div class='post-header'>:
              <b:includable id='post' var='post'>
  <div class='post hentry' 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 6:

Paste the following code in the place of the deleted code in Step 5:
<b:includable id='post' var='post'>
  <div class='post hentry' 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='posttitle'>
           <img src='IMAGE-URL'/></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>

Step 7:

Replace the IMAGE-URL text in blue color from above with the URL address of your image (the one that you've gotten from Step 1).

Step 8: Save the Template and that's it! Enjoy :)

15 comments:

  1. Hello can you help me on how to transfer the next and back in the center of my blogger post..thanks..
    here is my blog..
    pinoy meme

    ReplyDelete
  2. can i get different images for different posts...?

    ReplyDelete
  3. Hi,
    This coding works in Chrome but not the image does not show up in IE. Please help.
    Thanks,
    Deepti.

    ReplyDelete
  4. Hi,

    This works in Chrome but when I open my blog in IE the image doesnot show up. I have the IE9 browser. Can u pls help?

    ReplyDelete
  5. Hello , i have problem with integrated this in my blog template...When i paste this code in my html and try to save it i have error:
    Error parsing XML, line 1156, column 5: The element type "b:includable" must be terminated by the matching end-tag "".

    i do that and after that another error for not closed div after i close it another error for bif widget ...
    how to solve this ....Thnks....

    ReplyDelete
  6. I try this on my blog but it doesn't work, how come? can you help me

    ReplyDelete
  7. Anonymous5/30/2013

    this worked soooo good until blogger updated their html editor. Could you please update this tutorial too?

    ReplyDelete
  8. how to put my picture as header background??

    ReplyDelete
  9. I want to change size of image thumnail from home page. The image thumnail crop not exactly and look not good like the original image. I want it just scale the image not crop the image. Can anyone help me to solve this problem.
    http://vietnamradio.info

    ReplyDelete
  10. Hey, thanks so much. It worked perfectly. ;)

    ReplyDelete
  11. It worked awesome for me too. Thank you so much for the big help :)

    www.marssyreese.com

    ReplyDelete
  12. hii admin please help me look in the image http://imgur.com/q61fm5I i want that my post title should be down after each post image
    please i came here with so many hopes.

    ReplyDelete
  13. Its working awesome but how to add image only inside the post, not on home page.

    Best Regards

    ReplyDelete
  14. Please help me I hav followed the instructions and no error occurred, i saved it but when i look at my blod where the image sound be there is just an empty gap followed by mu post header please help me, i would like to fix it asap
    http://poppyspage09.blogspot.ca
    And if anyone has had the same problem and has fixed it please let me know how

    ReplyDelete

Although every comment is appreciated, due to an overwhelming amount of questions, I can no longer provide personalized help. Keep in mind that comments are moderated and may take some time to appear. All spam comments will be deleted. Thanks for understanding!