Add icon or picture in Blogger Post Title

November 8, 2008

If you would like to have a custom picture (image or icon) beside your Post Title, follow these instructions.
And if you'd like to place some background behind it, read this article.
Sometimes Post Titles can seem boring and dull. Just by adding some little change, we can make them nicer...


For example, I want this picture to appear beside my Blogger Post Title:

I've uploaded my picture (icon) on a free web host Tinypic (...or Photobucket...), now I've got to create a small code:

<img src="http://i37.tinypic.com/29gftki.jpg" style="border-width: 0px;" />

Ok. I've added style="border-width: 0px to remove borders from my picture...you can put some if you want, just change the width to 2px (for example).
And instead of my picture URL, you should place yours (you'll get a URL from your free web host, in my case Tinypic...)
Next, I have to decide where's my picture going to appear.....above title, left side, right side, or under?

It's just a matter of where are you going to place your code....If you're ready, let's go. First, back up your little template. Then go to:

DASHBOARD ► LAYOUT ► EDIT HTML ► and click on EXPAND WIDGET TEMPLATES (in the upper right corner)....Use CTRL + F to find the following section in the code (it will not be in colors, of course):

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

...I have to place my picture code here....If I place it 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

Here's the example. I want my picture to be ABOVE the post title, so the code will look like this:

<b:if cond='data:post.url'><img src="http://i37.tinypic.com/29gftki.jpg" style="border-width:0px"/>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>

In orange is my picture code that I've just placed.

NOTE:
- the example is made in Blogger Minima Template
- you can use whatever picture you like... you can use this one if you like too
- you can also get much better results, this one is just an example
- adjust the size of pic as you want (in graphic editor), so it fits
- you can also play with Post title padding in HTML code for smoother adjustments
- good luck

Smile!


***UPDATE***
...somebody asked is there a way to show a different picture in every other post title. Well, there is. And it's quite simple.
When you're composing your post, add the following part of code:

<img src="URL OF YOUR PIC" style="border-width: 0px;" />

....in the POST TITLE. Look at the pic:
...placing it here, will make your icon appear at the beginning...
...you can place it at the END, or even in the middle of the text....

Smile!