Blogger Tips To add Image Icon Before Post Titles

I have recently exposed the tips to add favicon to Blogger Blog. Now I am going to tell you how to add icon or image before each post title. You may notice in famous blogs using icon before post title.

If you are thinking to add image in your blog post title then follow the instructions:
First of all you need a image. You can create image or icon in different softwares like photoshop or try Google search for " Free icon" or "Online image creator". Then upload the image in free image hosting sites like imageshack.us or photobucket.com. Then copy the image URL.

1. Now login to Blogger.com

2. From dashboard select Layout then go to Edit HTML.

3. Before Editing template, save full template for safety. If You are beginner to edit html then see my another post Blogger tips on how to edit HTML.

4. Put a check in expand widgets box.Search for the following code in your Blogger Template:

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

5. Now if you want to add image before post titles then add image url below the red line. After adding that it looks same as below:

<b:if cond='data:post.url'>
<img src="Your image URL here"/>
<a expr:href='data:post.url'><data:post.title/></a>

6.If you want to add image after post titles then add image url after this tag: <a expr:href='data:post.url'><data:post.title/></a>
After adding that it looks same as following code:

<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<img src="Your image URL here"/>

I hope you like this Blogger Tips. If you don't want to miss Latest Blogger Tips then subscribe in RSS feed.