How to Make a Post Title Image for Blogger

The newest version of Google's Blogger platform provides greatly enhanced features over its relatively basic predecessors, particularly with regards to customization and monetization. By default, the titles of Blogger posts are in plain text, but by editing the current template you can add an image such as your company logo to post titles. This image will appear on all of your future blog posts unless you change or edit the template accordingly.

Step 1Prepare your image and ensure that it is sized suitably so that it will fit snugly beside the post title text. Save the image as a JPG or GIF file.

 

Step 2Upload the image to an image-hosting website. Some free options include Flickr, Tinypic and Picassa (see links in Resources). Note the URL of the image.

Step 3Log into your Blogger dashboard. Navigate to "Template | Edit HTML | Proceed | Expand Widget Template." If you do not see this option, ensure that you are using an upgraded template rather than one of the simple, classic templates.

 

Step 4Delete the following lines of code:

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

 

Step 5Copy and paste the following code in place of the code you just deleted:

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

 

Step 6Replace "YOUR_IMAGE_URL" with the URL of the image you uploaded earlier.

 

Step 7Click "Save Template." The image will now appear on every post title.