Add Icon Picture Image Before/After Blogger Post Title

How to add an image before the blogger posts title as you would have seen it many blogs or seen author pictures to be dispalyed before the beggining of the post title.It really looks good to the blog,and one of reader ask it how to get this image to be displayed in post title.So i thought of the holding an tutorial on it.

Read on how to add favicon in your blog url and newspaper style first alphabet in blogger posts,if you are not searching for this trick.

Now How to add image before each blogger post title:-

Log in to Blogger Go to Layout -> Edit HTML -> Click on Expand Widget Templates
Press (CTRL+F) and Find below code in the template:

<b:if cond=’data:post.url’>
<a expr:href=’data:post.url’><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>

Now you have to add below line in between above codes.

<img src=”http://www.thescifiworld.net/img/hotfeatures/avatars44.jpg” style=”border-width: 0px;” />

Please change the url in red in above with your image url which you want to display before blogger post title.

If you add the line after

– red part of code, my picture will be ABOVE
– green part of code, my picture will be on the LEFT
– yellow part of code, my picture will be on the RIGHT
– blue part of code, my picture will be UNDER

Now i am sure you will easily add the image wherever you want to show it in the post title.Best Of Luck !

13 Comments

  1. H April 23, 2009
  2. Anshul April 24, 2009
  3. Gersh June 29, 2009
  4. Anshul June 30, 2009
  5. Youth Ki Awaaz July 24, 2009
  6. Anshul July 26, 2009
  7. Sakthi Dasan August 10, 2009
  8. Anshul August 11, 2009
  9. phani kumar September 6, 2009
  10. Home Revise March 24, 2010
  11. Anshul March 24, 2010
  12. gunawan August 7, 2010
  13. Safwan Ahmad July 16, 2011

Leave a Reply