How To Add An Image To Blogger Post Titles

Adding images (or logo) next to our posts titles is a good way to customize our blog. As you see, I also have applied it in my blog. I added the blue winking smiley of vertical I and Y, my initial. The color is also matching the overall theme, sky blue. You can put an image too in your titles if you like. Here is how we do that:

First, login to Blogger and backup your current template by downloading full template from "edit HTML" in "layout" section of your dashboard. Those who are sorry are those who are unready.

Second, prepare the image file that is to be used, can be jpg, png, ico, etc (recommended: jpg). Pay attention to its size, we need to make sure the size is not too big or too small (compared to the title). My image is only 12 x 12 pixels, and it has the same height with uppercase letter in the title. If your image is too big, you can resize it with image editing software like Corel, Photoshop, Microsoft Paint, etc. However, apply with adaptation.

Third, upload the file to an image hosting website. Imageboo.com is a good example of a free one, yet easy to use. Once uploaded, copy its direct link, we will need it.

Last, go to Blogger Dashboard >> Layout >> Edit HTML. Do not forget to check “Expand Template Widgets” to view widgets codes. Then find these codes (use browser searching tool for faster result):

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

Then we need to install these codes after the first tag:

<img src='The direct URL of your image' style='border: 0; margin: 0; padding: 0;'/> &#160;

Therefore, the result will be like this:

<a expr:href='data:post.url'>
<img src='The direct URL of your image' style='border: 0; margin: 0; padding: 0;'/> &#160;
<data:post.title/></a>

Then, save the template and check your blog to make sure the codes work. Now the image should appear before your post title.

Note: You can experiment with the border, margin, and padding to adapt your theme if you like.

Having any difficulties? Any question?

7 comments:

360Jewels said...

The icon at the title reminds people about branding and makes it look more professional...I should try that!
Thanks!

ExiOST said...

Its more nice on my blog, I have try that

earthmother said...

Very nice.

A question for you:

How would you use a logo (ie. Image with text) as the header of your blog, and still have the search engines be able to read your blog's title and description?

Isaac Yassar said...

@Earthmother: Search engines reads the meta tags, that is how they do it, like this.

Anonymous said...

how to make the icon before the post title changed regarding to the label of that post,
suppose that the post is under news label
so i want my icon to be news.jpg
if my another post is under video label
so my icon should be video.jpg

i dont know how to script it.

so if i have 7 post in my blog page,
every post should display different icon before its title depend on their label for each post.
i will be very thankful if you can help me
im waiting your response..

Isaac Yassar said...

@Anonymous: I'd love to help you, but unfortunately I don't have the trick to do it yet. I am sorry.

Krista Teases said...

Thanks Issac, It worked like a charm and it really added an extra special touch to my blog. =)