Title is an important part of blogger. By twisting some simple codes on your template you can add an image such as your company logo, graphic art, pen, globe or any type of images to the post titles of your blog. You can also display animated gif images (like this-
) on the post title. This image will appear on all of your future Blog post titles after applying this.
Step by step guide
1.Create your image, ensure that your image is sized suitably so that it will fit snugly beside the post title text.
2. Upload your image on Blogger Post or any Image Hosting Website (Photobucket, Flickr, Tinypic and Picassa ). Copy the URL of the image, and paste somewhere in notepad.
3.Go to Blogger dashboard. Template | Edit HTML.
4.Find 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>
If you don find entire code together try Ctrl+F and <data:post.title/>
5. Delete the above code and paste the following instead of it.
<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>
6. Just replace “YOUR_IMAGE_URL” with the URL of the your desired Image you prepared .
7.Save template, You are done.
