Setup A Image Icon Before Every Blog Post Title

First Of All you have to create an image that you would like to show in front of your every post title. If you are good in using Photoshop or Coral Draw Then I think you can better design an image for yourself or Use some online service providers who will help to create images with their ready to use image Creator Tools.

Once you are ready with your created image than in next step you have to host your image to some good hosting sites like imageasck.us , photo bucket , etc . Now copy and paste the image URL (Please Consider for Direct Url)in a text file and save it.

Now The Next Step of our work will start you have to create and Html Code For the Image your have created and selected for your own Blog. Please copy the below code in red to your text file we have saved earlier

<img src=" your Image Url " />

Change the text in red with your image URL. For Example for my Blog Post title I have Used Like this

<img src=" http://img227.imageshack.us/img227/9831/postheaderimageeknolxm5.jpg " />

Now we have successfully created the code for our image. Now we have to edit your blogger template. Login to your Blogger Account , go to your dashboard click on EDIT HTML. Never Forget to take a backup of you template which will make us save if something is gone wrong then uploading of backup template will save us. Now put check in Expand Widget and search for the code in blue.

<b:if cond='data:post.url'>

Copy and paste the image code we have just created after this code in blue. This will prefix an image before the very blog post title. If your want to fix a image after the post title and search for the code in blue and find the below code in pink then paste the image code we have created after the pink code

<a expr:href='data:post.url'><data:post.title/></a>

After doing this preview your template , then save it.