Add Image Icon Before Post Titles | Blogger Tips

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.

Image Icon before post titles

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.

Add Image Icon Before Post Titles


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.

Comments Post a Comment

rif - April 10, 2009

your blog very useful.
i'm still learning too.

My Blog Here

Emad - April 10, 2009

Great Post, Thanks Buddy
http://e-dollarsonline.blogspot.com/

henry j - May 21, 2009

Image Icon Before Post Titles its works on ever post or only one post. can u help me pls
Linkers World

Joanie - January 24, 2010

Everytime I do this, I get a big photo, and not a small one in front of the words How can I change that from happenng.

Russel - January 24, 2010

@ Joanie,
First of All, resize your Image as small one. You can use "Paint" in Windows, Photoshop or Illustrators software to do that.

NGTHFONG - 阮・青・風 - February 17, 2010

Thanks so much, now I could show the Google buzz button in my post, too.
You could view it here! Thanks one mores!
http://ngthfong.blogspot.com/2010/02/add-google-buzz-button-to-blogspot.html

RAJ - September 14, 2010

wonderful post.. got imp info
http://giztechnewz.blogspot.com/

^ baby sweetyz ^ - November 07, 2010

why i can't save after edited? need 2 click the expand widget or not before saved?

Leave a Comment