How to add a link to an Image on blogger blog.

When you click a picture or an image in a Blogger post, the picture opens up in a light box, it’s a blogger default system. also you can create a picture link , that when a user clicks on an image, a new blog or a website will open. In this tutorial, I'll describe how you adding a link to blogger image or picture.

Blogger Default Performance of an Uploaded Image.

The following image is uploaded by me and did not change anything in it. Now click it, will open in a light box:

Let's add link the above image to others blog or website.

Adding a link to an Image on blogger blog.

At First, upload an image to your blogger post.  After that, click to the HTML mode of post editor.

HTML mode shows the HTML code of your uploaded image, By default. here is the code of my uploaded image: 

<div class="separator" style="clear: both; text-align: center;">

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuYUhvvQsfQrupDYqMuc8cX75kvc_N5uj3-_bqLI5NKG78tiCYwWWndI3DYI5n8L_KmfgxsrQJSmSTpD5ly1_LgRTi5ixNPXMQkUV0eM07D-sHswKL7GLE9QY_QT0ShR-DpAcwMOy_yOfe/s1600/large.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="235" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuYUhvvQsfQrupDYqMuc8cX75kvc_N5uj3-_bqLI5NKG78tiCYwWWndI3DYI5n8L_KmfgxsrQJSmSTpD5ly1_LgRTi5ixNPXMQkUV0eM07D-sHswKL7GLE9QY_QT0ShR-DpAcwMOy_yOfe/s320/large.jpg" width="320" /></a></div>

Your code will not be accurately the same because different images have different names, sizes and position.

There will get 2 addresses or URLs in the uploaded image. For my image, these URLs are:

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuYUhvvQsfQrupDYqMuc8cX75kvc_N5uj3-_bqLI5NKG78tiCYwWWndI3DYI5n8L_KmfgxsrQJSmSTpD5ly1_LgRTi5ixNPXMQkUV0eM07D-sHswKL7GLE9QY_QT0ShR-DpAcwMOy_yOfe/s1600/large.jpg

&

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuYUhvvQsfQrupDYqMuc8cX75kvc_N5uj3-_bqLI5NKG78tiCYwWWndI3DYI5n8L_KmfgxsrQJSmSTpD5ly1_LgRTi5ixNPXMQkUV0eM07D-sHswKL7GLE9QY_QT0ShR-DpAcwMOy_yOfe/s320/large.jpg

There is only one change in the image URLs which is s1600 and s320. First URL with s1600 is actually the link URL. It is answerable for making this image a link. Second URL with s400 is the basis URL. It displays the image or picture.

The first URL (Address) is responsible for making image a link so, you need to change the first URL. For example, if you want to link the above uploaded image to my blog's homepage which is http://www.blogsnucleus.blogspot.com/, you will only replace the first URL of image with the URL of my blog's homepage. After that, the image code will look something like this:

<div class="separator" style="clear: both; text-align: center;">

<a href=" http://www.blogsnucleus.blogspot.com " imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="235" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuYUhvvQsfQrupDYqMuc8cX75kvc_N5uj3-_bqLI5NKG78tiCYwWWndI3DYI5n8L_KmfgxsrQJSmSTpD5ly1_LgRTi5ixNPXMQkUV0eM07D-sHswKL7GLE9QY_QT0ShR-DpAcwMOy_yOfe/s320/large.jpg" width="320" /></a></div>

Hear I've only changed the first URL. Second URL is still an image. Now, if you'll click the following image, it will take you to my homepage.

How to Make Image Link Open in a New Window or Tab?

If you're linking your image to few other blog or website, then it is a good repetition to make it open in a new window or tab. By doing this, guests will stay on your blog.

To do this, you will just add target="_blank" in the image code just after the link address. The code will look like this:

<div class="separator" style="clear: both; text-align: center;">

<a href=" http://www.blogsnucleus.blogspot.com " target="_blank"  imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="235" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuYUhvvQsfQrupDYqMuc8cX75kvc_N5uj3-_bqLI5NKG78tiCYwWWndI3DYI5n8L_KmfgxsrQJSmSTpD5ly1_LgRTi5ixNPXMQkUV0eM07D-sHswKL7GLE9QY_QT0ShR-DpAcwMOy_yOfe/s320/large.jpg" width="320" /></a></div>

For example, just click on my image and my blog homepage will open in a new window.