Add Icon to Post Titles. ~ The Blog Doctor.

Add Icon to Post Titles.

New Visitor? Like what you read? Then please subscribe to my Blog Feed or sign up for Free Email Updates. Thanks for Visiting!

Would you like to add a small graphic or icon to your post titles? Some members of Google Groups asked for this feature and here it is......


First step is to create a graphic either in an image editor or in an online image generator such as Save it to your hard disk and upload it to a freehost. Then copy down its link/URL.


The image code is :

<img src="LINK OF YOUR IMAGE" style="border-width:0px" />

Replace the CAPS with the link of your image obtained in step 1.


Login to the Dashboard and click on Layout for the blog you wish to modify. Then click the Edit Html subtab of Template tab. First backup the template. Put a check in Expand Widgets Template box at the top of the template text box.

Scroll down till you come to the Blog Posts widget code. Locate this code :

<b:includable id='post' var='post'>
<div class='post hentry'>
<a expr:name=''/>
<b:if cond='data:post.title'>
<h3 class='post-title entry-title'>
<b:if cond=''>
<a expr:href=''><data:post.title/></a>
<b:if cond='data:post.url'>

Paste the code you created in Step2 immediately after the last line in the above code. Preview and Save Template. See picture below of the icon next to my post title

If you want it to appear after the title paste the image code after this subsequent line of code :


Preview and save Template.


Gauravonomics said...


I have added you to my Technorati Favorites.

Please have a look at my own (very generous) version of the Technorati Favorites Exchange which allows you to be automatically favorited and discovered by hundreds of new blogs across the world.

Also consider adding me to your Technorati Favorites.

- Gaurav

vin said...

Hi Gaurav,
Have added your blog to my favorites.
Will look in your exchange program also.

Camp Cool Counselor said...

Hello Vin!

Thanks for this very cool idea to add an icon to the titles of our posts!

I followed your instructions, but ran into problems. Pasting in the image code where you said to do it did not work. Through trial and error, I pasted the image code a few lines of code higher than where you suggested, and it worked. Sort of. Because my icon is on a line by itself ABOVE the title of each post. I like it better the way you have it, with the icon directly to the left of the title. Help?

vin said...

You have to add the code just before :{data:post.title/}

If any difficulty contact me by email. The address is in the left column.

Anonymous said...

Hello Vin,

I'm using the new blogger and i want to blend the Google Ads within my content but if i include the code inside my content the ads won't appear - any idea how this can be achieved?

Thanks in advance.


Bloody Mary said...

I'm having trouble locating my Blog Posts widget code. I sent you an e-mail for help. Thanks so much.

Jimpa said...

I followed every instruction, but erros keep coming up and i can find no way to see the little icon i uploaded next to my post titles

help please! :P

thanks in advanced

shyam_rocks said...

I have some problem with my Post title..they are just overlapping with each other when they are long.plz help me..

My Blog :

Vin said...


Looks OK to me in Firefox.

spineless said...

is it possible to have different icons? for example, when writing about tv, having a little tv icon, and when sports, the icon will be a ball or sth like that.

Maybe it can be done with the help of the labels? I really have no idea, I'm just asking :)

Vin said...


It can be done. First you have to label your posts. Those posts about sports label them as sports and those about TV label them as TV. See Everything about Labels in Blogger.

Then you can use conditional tags to display a specific icon or a picture only on those label pages.

spineless said...

thank you!

you're probably the most helpful person i've ever seen.

keep up the good work :)

Kimberly said...

Great web page! I've learned a lot, but this one has got me stumped.
I followed your instructions for putting an icon in front of the post title, but no go. I also followed the instructions you gave about pasting the image address both before and after "data:post.title"
However I do, the image always appears on a line by itself, either before or after the post title. Any sugggestions? I have tried almost every line of code nearby the one above, but no one seems to work.

Vin said...


Try including the html tag for 'line' <li> before and close it after </li> like this :

<li><img src="LINK OF YOUR IMAGE" style="border-width:0px" /><h3 class='post-title entry-title'></li>

Denvoizer said...

Hi Vin, I'd Like to thank you, and I'm here to answer or to resolve 1angelcare and kimberly's problem:

well I had their same problem and I found that you Must copy the immage string after this line:

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

instead of

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

so it will be like this:

<b:includable id='post' var='post'>
<div class='post hentry'>
<a expr:name=''/>
<b:if cond='data:post.title'>
<h3 class='post-title entry-title'>
<b:if cond=''>
<a expr:href=''><data:post.title/></a>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'>

<img src="" style="border-width:0px" />


:D, for me it works, you can shek my blog if you want.

Thanks again Vin

Anonymous said...

I have tried everything suggested it still only makes a little indent.

I am 'hosting' the image in a blog post as I successfully did with the header and background. The picture won't appear. How big or small does the icon need to be? Could it just be too big of a graphic?

Vin said...


Upload image to and use the link from there.

Гостинна Чужеземка said...

Thank you for the information.
How to add pictures(image) after to your blog post?

sorry for mistakes

bookmaker software said...

nice blog. congrats


Skip to top of post.

Search Blog Before Commenting


Post a Comment

Please use the above search box to search this blog before posting your valuable comments.

Comments posted on Dummies Guide to Google Blogger (Beta) are moderated and will be approved only if they are on-topic and not abusive. Try not to include website URLs/links in your comments. You can email me : drbhatns at gmail dot com for any blogging question. Thanks,


The Blog Doctor The Blog Doctor2 Blog Doctor Home


Tips On Blogger and Latest News.

Skip to top of post.