How to Make an Image Hyperlinked in Blogger

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.
Make images hyperlinked (clickable) in Blogger.

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.

Step 1. Your photo needs to be online.  
If you use Blogger, then when you upload your image to a draft post your image is stored with Google's images.  Here are directions to do it on Blogger, though you might use Photobucket or something like that.
  • 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.

2 comments

  1. Very interesting! I pinned this! Thanks for sharing.

    ReplyDelete
  2. cheap ray ban sunglasses australia What cheap ray ban aviators sunglasses was wrong. Tense moments outside a man's voice cheap ray ban sunglasses australia sounded, cheap his face did not change, look cheap cheap ray bans australia eyes squint, mouth askew, his face hanging like, are not more angry. The man said as he walked into the room cheap ray ban sunglasses australia package, then still cheap ray ban sunglasses australia angry, said Ye Gongzai, leaves, etc. How about you in the following mayor.

    ReplyDelete

Thanks for taking the time to leave a comment!