How to add a link to an image in blogger

I use Blogger for blogging as it is user friendly, links easily to all other Google tools such as AdSense and Analytics, and generally makes blogging easy.

However, one area where it isn’t quite so easy to use is when you want to add links to images. So say you want to write a blog about your latest novel, and you want to put an image, like the one below, in the centre of the blog, but want to link the image to your book on Amazon, or your website.




Doing this using my website software is very simple, and doesn’t need any code, but Blogger requires using a little bit of HTML code to achieve the same thing, as the default setting needs to be over-ridden. Inserting an image into Blogger is a simple process, but setting up the link is slightly more tricky.


Below is the same image as above, already in my Blogger draft.




As you will notice there is a choice of viewing in the top left hand corner. At the moment the blog post is being viewed in ‘Compose’. However, to make changes required I now need to alter the HTML code, and to do that I now need to switch from ‘Compose’ to ‘HTML’. If I don’t change the HTML code, all that will happen when I publish the post, and people click on the image, is a larger version of the image will open in a lightbox. By clicking on the HTML button, the page will now look like this:.




To create the desired link only some of the code will need replacing. Let’s assume I want the image to be linked to this website, and open up the page http://www.cliveeaton.com/thepyramidlegacy.html. To do this I will need to remove a specific element of the HTML code, and replace it. Highlighted below is the strip of code which will need removing. Please note your code for your image will be different, as every image is of course different, including size and alignment. The part of the code beginning with href= is the link for the image, which, as I mentioned, defaults to open in a lightbox. I want to remove that default and get the link to open my webpage. The second key element of the code begins with src=, and this is the code for the actual image itself. This will remain as is. So let’s replace the highlighted code.




The HTML code I’m going to replace it with is:


href="http://www.cliveeaton.com/thepyramidlegacy.html" target="_blank"


Please note the one space gap between the inverted commas after the full webpage address and the word ‘target’. Also, the final element target=”_blank” is a vital, and generic, part of the additional code. This allows the target page to open in a new window, thus ensuring the original page is still available to view. (If you leave it out, the page will open in the same window.) Below is how the updated code looks:




I can now click back to ‘Compose’ to see that the original image is on the page, complete the blog posting, and publish it. Now when someone clicks on the image within the blog, they will be taken to my website page, which promotes the book. And of course, the original blog page is still open in a separate window.