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.
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.)
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.
- 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.
Sign up for weekly or daily emails from This Simple Home.