How to turn any image into a link with HTML on Blogger

by Chloe Jeffreys · 19 comments

in Blogging

As you might have noticed, I’ve been playing around with this tool quite a bit lately in order to create a Menu for my blog. This is so easy to do; anyone can do it. Today I’m going to teach you how. We’re going to take the little teapot in this post and make it into a link.

This will work the best if you open your own blog and play along in another window.

I want this teapot to send us somewhere nice. Since this was the teapot at our apartment in Rome, and Rome is somewhere nice, I’m going to make it take us to the Trevi Fountain in Rome.

In your own Blogger window, if you open “New Post” you’ll see a “Compose” tab and an “Edit HTML” tab.  “Compose” is in human-speak, but “Edit HTML” is the computer-speak, and we’ll have to speak a little of both today to do this tutorial and make our image-linky work right.

Here’s the HTML code for this teapot image exactly as it appears in my own Blogger “Edit HTML” Page:

Here’s a closer look:

Now if I “Publish Post” as it is here we’ll just get another post with an image of the teapot. But we want our teapot to become a link and not just an image. To do that we have to fix the HTML code.

In “Edit HTML” we paste in our teapot gobbledygook, but we’re going to look at this part that I’ve emboldened and enlarged here:

<a href=”http://1.bp.blogspot.com/-xEC5lWsDtJA/Tix5idylFWI/AAAAAAAACSs/V13sBk5YwgA/s1600/IMG_0068.JPG” imageanchor=”1″ style=”margin-left: 1em; margin-right: 1em;”><img border=”0″ height=”238″ src=”http://1.bp.blogspot.com/-xEC5lWsDtJA/Tix5idylFWI/AAAAAAAACSs/V13sBk5YwgA/s320/IMG_0068.JPG” width=”320″ /></a>

That bolded part is the part of the code that tells your computer where to go when you click on the image. We can put ANY PLACE ON THE INTERNET here and when you click on your image it will take you there.

For instance, let’s go to the Trevi Fountain over at The Virtual Tourist.  Here’s the addy: http://www.virtualtourist.com/travel/Europe/Italy/Lazio/Rome-144659/Things_To_Do-Rome-Trevi_Fountain-BR-1.html

We go to “Edit HTML” and into our teapot gobbledygook, between the quotation marks, we substitute the above website address for the part I emboldened.

It should look like this:

Here’s a closer look at the change we made:

And here’s what it will look like in “Compose”

If we “Publish Post” now our image will work as a link.

Try it now:

Click on the Teapot to go to the Trevi Fountain

See?

You can do this with any image that you upload onto your blog. Just replace the gobbledygook between the first two quotation marks with the internet addy where you want your readers to go and they’ll go there.

Was that easy?  Did that explain it?  Please let me know. Writing directions is one of the hardest things to do. If some part didn’t make sense or didn’t work I really would like to know. If it did work for you then I’d love to know that too.  Now go have some fun making images into links.

And please don’t forget to enter the Christmas in July giveaway.

Leave a Comment

CommentLuv badge

{ 19 comments… read them below or add one }

Kyle Johnson February 18, 2017 at 7:38 pm

Thank you for the great post! This is my second time here, maybe someday I will remember how to do this!
Kyle Johnson recently posted..Music Video on Fab MoodMy Profile

Reply

mariam donny January 18, 2017 at 12:57 am

hi… thank you so much for your tutorial…. this help me upgrade my blog .. … I have tried.. its really easy….

Reply

pipe.co.pl December 21, 2016 at 6:34 am

Your monthly payments on your feet in many places in credit
Asia.
pipe.co.pl recently posted..pipe.co.plMy Profile

Reply

casino August 26, 2013 at 5:18 am

Broderskap insamling Betala för att spela Casino Night
casino recently posted..casinoMy Profile

Reply

xtra size August 26, 2013 at 4:05 am

After looking at a few of the articles on your web page,
I honestly appreciate your technique of writing a blog.

I book-marked it to my bookmark website list and will
be checking back soon. Take a look at my website as well and
tell me what you think.
xtra size recently posted..xtra sizeMy Profile

Reply

xtra size August 26, 2013 at 3:18 am

If you wish for to grow your know-how simply keep visiting this web site and be updated
with the latest news update posted here.
xtra size recently posted..xtra sizeMy Profile

Reply

bookmarkcluster.com August 22, 2013 at 11:35 am

Hey I am so glad I found your website, I really found
you by mistake, while I was browsing on Askjeeve for something else,
Anyways I am here now and would just like to say thanks for a incredible post and
a all round entertaining blog (I also love the theme/design), I don’t have time to browse it all at the minute but I have bookmarked it and also added your RSS feeds, so when I have time I will be back to read much more, Please do keep up the great job.
bookmarkcluster.com recently posted..bookmarkcluster.comMy Profile

Reply

Selma August 22, 2013 at 8:29 am

I really like reading through a post that can make people think.
Also, thank you for allowing me to comment!
Selma recently posted..SelmaMy Profile

Reply

from Seth Kugel June 5, 2012 at 3:44 pm

I’ve been surfing online more than 4 hours today, yet I never found any interesting article like yours. It’s pretty worth enough for me. Personally, if all website owners and bloggers made good content as you did, the internet will be a lot more useful than ever before.
from Seth Kugel recently posted..from Seth KugelMy Profile

Reply

Sara March 18, 2012 at 4:32 pm

I have been looking for simple directions for over an hour and came across this post on Google. It took me less than a minute to make this work using your directions! Thanks so much!
Sara recently posted..I am a spoiled brat….My Profile

Reply

Chloe August 4, 2011 at 6:20 am

Now THAT would be truly amazing. Wouldn't that be terrific if somebody invented that in our lifetime?

Reply

Stephanie (Just Me) August 3, 2011 at 9:40 pm

I want a real teapot that transports me to Trevi Fountain. Can you post how to do that next?

Reply

IJR July 28, 2011 at 3:23 pm

ask your daughter – we had a good talk about how to make browsers do what you want, and I was figuring that we would keep that conversation going.

Reply

Chloe July 27, 2011 at 8:47 pm

I don't know anything about, but maybe I'd like to. How and where can I sign up?

Reply

David Robinson July 27, 2011 at 8:16 pm

Nicely done. Let me know if you want to reserve a seat in the web design/web development class that is now forming. You've missed the first lesson, but we haven't passed the last day to add yet. 🙂

Reply

Susan in the Boonies July 26, 2011 at 7:58 pm

I really appreciate this and I plan to play with it on Thursday, after company leaves!

Reply

Chloe July 26, 2011 at 4:18 pm

Traci, if you try it please let me know if my directions work.

Reply

Traci Hoffmann July 26, 2011 at 3:55 pm

I have always wanted to know how to do that but never took the time to look it up. Might just have to go play a bit later today.

Reply

Andrea July 26, 2011 at 12:23 pm

I'm going to have to try this…when the kids aren't running around and jibber-jabbering in my ear. 🙂

Reply

Previous post:

Next post: