Thursday, April 16, 2009

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 !

No comments:

Post a Comment