A Claire Disclaimer:This tip is for Blogger.com Blogs, some work for Classic (old) Blogger some don’t.
Firstly why would you want to make an image into a link? I personally like to do some photographic link love, although Chris has never provided any photos of himself 
Another good reason is if you like to make blog awards and would like a link back to yourself, a favourite post of the day for example (pick me).
Right so now you have an image that you want to turn into a link, what next?
- If the image is not already uploaded somewhere on the web, your blog for example. You need to upload it either on your blog or somewhere like ImageShack, which i have used for image below.
- If you already have your image on your blog, right click it and click on properties, cut and paste the image location to notepad, it should start with http://
- If you use ImageShack cut and paste the Direct Link to image that should look something like this:#http://img404.imageshack.us/img404/554/cbg11503di7.png# without the hash either side.
- Now your ready to make the image into a link, look at the code below.
- Put the URL of the site that you want to link to, deleting the writing in green first.
- Then add the URL of the image deleting the green writing first.
- Then add the title of the link, deleting the green writing.
- Fingers crossed it should work!
<a href=”URL/LINK YOUR IMAGE IS POINTING TO“><img src=”URL/LINK OF YOUR IMAGE ” alt=”TITLE OF SITE IMAGE IS POINTING TO“></a>
This is the hardest thing i have had to try and explain how to do! so if i have cocked it up please tell me 
As i am coming from a blogger.com point of view, that is who i am addressing this too, but it obviously works for WordPress too.
Update: I have had some feedback and apparently this doesn’t work for everyone so if the above line of html doesn’t work try this!
<a href=”Your URL HERE“><img src=”YOUR IMAGE URL HERE” border=0></a>
Let me know if this helps?
If you have any further problems email me here 
or click on that lovely image of me and visit my blog!
14 users commented in " Making an image link: A blogger tip "
Follow-up comment rss or Leave a TrackbackSo this formula should work for getting my header ‘clickable’? I’ll look into it when I’ve got less wine in my system
Thanks!
Ooooer missus, is this the answer to my question?
I let you know in a couple of months whether I’ve managed to do it.
Thanks for the instructions. xx
Right. Said Fred.
Will try.
Now a stupid question: I’ve removed the nofollow thingy.
What good is that? Do people who comment on my blog get a link automatically, or do I have to do anything else?
Don’t tell anyone i asked….
No, it should all be automatic
The second one works for me. I’ve got two images up now with links. I hope I get some more awards so I can try it again.
Thanks you miss genius. xx
I’m going to try this on something that DIDN’T work the first six times… Thanks.
Hey Claire, good tip! Don’t forget the ALT tag for your image. Also I always use a TITLE tag on hyperlinks. Both of these are supposed to give the search engines more to chew on…
No, not another question, well not yet! Just to say I’ve put a little thankyou up on my blog to you with links. You could be inundated now!
Rob O. is correct on the ALT & TITLE statement.
ALT is for better indexing for image search, also and is good markup for accessibility (ie: the blind) as well as proper Html markup.
TITLE in the anchor is very important SEO-wise, since there is not any text. This overcomes that deficit.
One thing I would like to point out is the use of the original photo and not a thumbnail can be problematic. Original image dimensions and/or filesize can be quite large.
I suggest optimizing the image for displaying in your blog. If you do not have a decent graphics editor like Photoshop, there is a great freebie utility called IrfanView which can do it for you. IrfanView is one of those must-have utilities for webmasters (or bloggers).
Another tip, once you have thumbnailed your image is to put an align=”[left][right]“ attribute in the IMG element. Your text will then ‘flow’ around the image, rather than have the image on a line all by itself.
example: <IMG src=”image url” align=”right”>
I second the IrfanView tip.
I use IrfanView, I am doing this ‘tip’ again!
I would just do a whole new article on how to properly insert images into your blog!
You can entitle it “Be Kind to Your Readers” when using 1.7 meg image files.
I only learned of this recently. I’m not sure how many of those who visit my blog click on the images.
If the image is embedded inside a link per this blog tip above, then you need some kind of script to track it or run the link through a redirect page on your site. In case of the latter, your server logs will show you every click made thru the redirect.
Culture Shiok’s comment got me to thinking about somethings else — How does the visitor know that an image is actually clickable?
By default, images (IMG elements)have a border equal to 1px. If emebedded in a link, the border shows up around it with the same color that links have (blue by default).
But most CSS style sheets cancel that effect for all images with img {border: 0} to get rid of that pesky border.
Leave A Reply