I've been blogging for six years. SIX. Last year I had to look up how to make an image hyperlinked. When I needed to do make a second image hyperlinked, I decided to write this post as a reminder to myself (and anyone else who might be curious) how to do it. Some of my blogging friends understand this well. This tutorial is for those of us who don't.

If you don't blog, come back again soon for recipes, crafts, and organizing ideas. If you're not a blogger, feel free to skip this post. I don't mind.

In a blog post, if you want to have your readers click an image or photo and go to a certain link, you have to "tell" the photo and link to be connected. HTML computer language does this. Unlike my husband, I do not "speak" HTML. However, as a blogger, I do understand some parts of it and can follow simple instructions. You can, too.

A great way to use a clickable image is for a coupon or an image to click to another webpage, such as to sign up for email.


Making an image click through to a specific link isn't complicated, but you need to be careful. Every character in HTML serves a purpose.

• Open a new post.  Title it "DO NOT DELETE."  Upload your image to this post.  Save it.  Do not publish it.  
• Open the HTML of the new post in draft format.  It's the little button beside the word "Compose."  If it looks like a foreign language, well, HTML is a language.  
•  Search for the link. You will see the letters http followed by a long line of characters and ending with jpg.  Please note there are two sections in the image code with http and jpg.  You want the second set.  Below in my screenshot you can see I circled it in red.  Be sure to not include (or delete) the quotation marks or anything else.  
•  Copy the link I described above.  You may want to paste it in Notepad for safe keeping for a few minutes.  (Note: Pasting it in a post or even a Word document did not work for me...this time, though it may for you.)

Step 2. Get your link.
When the image is clicked, where do you want it to go?  For this example, the hyperlink is http://r.linqia.cc/e82f35b

Step 3. Create Image Hyperlink HTML
Now you are going to combine the image link with the link you want the image to go.

• Copy the HTML below. 

<a href="http://r.linqia.cc/e82f35b"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7tgwN0ClnT1ElyUDwFqWCSAypBd-18_lPl-bWLSbdCwWXJvEm3KNXmLs9P5oJs5pEVW3Hs0eyyCdksAzrd5MMRpOBaABU7BdOKwWIlZ0zZ1DgSxWEaFjB8phU2OeaXqavErP9Ocz2TZg/s1600/233_5a0cca61978f6e649776fc4a9d3e484b.jpg" /></a>

• Paste it in your blog post. Be sure you are in HTML mode and not "Compose." 
• Now insert your link goal for my blue link and your image's link for my red link.  Be sure not to delete or add any other characters.

Or you can learn the language of HTML and type everything out. I'm a cut and paste kind of girl though.  I hope this helps you make an image hyperlinked on your blog. And remember, come back soon for our regular home and family ideas.

~ Annette
Sign up for weekly or daily emails from This Simple Home.