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

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=”https://chloeofthemountain.files.wordpress.com/2011/07/img_0068.jpg” imageanchor=”1″ style=”margin-left: 1em; margin-right: 1em;”><img border=”0″ height=”238″ src=”https://chloeofthemountain.files.wordpress.com/2011/07/img_0068.jpg?w=300&#8243; 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.

Advertisements

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

  1. 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. 🙂

  2. 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.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s