How to attach link to images in a blog post on Blogger

Blogger is the best platform for me as it is simple and user friendly. It also links easily to all other useful Google products like Google analytic. But you must have noticed that we cannot attach a link to images we use in a blog post like we can do in image gadget. Whenever we attach an image in our blog post and publish it. When we click the image, by default an enlarged view of image in a box. For example clicking the image below (image 1) will open an enlarged view of it.

Image 1-
But with little trick and a bit of changes in HTML coding we can also attach a link to images. For example- If you click the image below (image 2), a new tab will open which link to the Facebook page of the blog. (Please like that too)

Image 2-
Ok, so first attach the image in your post in the usual manner like we always do.
Now there are two choices of viewing this post (notice the top left corner), first is “compose” in which you can add text and images to your post, you cannot alter any HTML codes in the view. Second is “HTML” in this view you can alter the HTML codes of your post.
After attaching the image select the “HTML”view.

It will look like this-
Now, for an example, I want to attach the link of my blog’s Facebook page to the image. So that when someone clicks on the image, my Facebook page will open instead of an enlarged image.
For that we need to alter only some of the code. Below image highlights the code which needs to be removed. This code is different for all the images as all the images are different size, alignment, sources etc. The part of the code starting with “href=” is the link to image and by default, is the code to open an enlarged view of image in a box. We need to remove the default and add the link of the page which we want to get open after clicking the image; in this case it is my Facebook page. The second element of the code is “src=” which is the actual link for our image, let it remain as it is, we have nothing to do with it.
Now we will replace the highlighted code with-

href="https://www.facebook.com/techandonlinestuff" target="_blank"

It is the code to link the image to my Facebook page. Just replace the Link of my Facebook page (pink color) with the link which you want to get open after clicking your image. Please note there is a ONE SPACE gap between the closing inverted commas of the Link and the work ‘target’. Also the last element target=”_blank” is optional. What it does is opening the link in anew tab to make sure the original page is available. If you do not add the last element then your attached link will open in the same tab.
Here is how updated HTML code looks-
Now click back to “compose” view to ensure that original image is on the page. Now complete the post and publish it. And now when someone clicks the image a Link will open instead of enlarged view.

Leave your questions and feed backs in comment section below. Share this article and hit the g+1 button.

No comments:

Post a Comment

Please take a sec to share :-)

Related Posts Plugin for WordPress, Blogger...

About Me

Hello there, I am a student studying in class 12. Computers, technology, internet are my areas of interest. I have learned a lot about coding, designing, internet since I was in class 8 and still learning. Now I want to share my knowledge with everyone so they can also get benefit from that.