Creating a Picture Link in Blogger Posts

You can also create picture link so that when a user clicks an image in your post, a new blog or a website will open. By default, when you upload a picture, it is linked to itself. For example, I've uploaded the following image, click it to see what happens:



So by default this image is linked to itself. If you've clicked it, you would have seen that same image is opened in the same tab. So, we'll change this image link.

Creating an Image Link in New Post Editor

To change the image link, please switch to the 'Edit HTML' tab of your post editor.



You'll see that there is no image there. Instead, there will be only code. Actually, this code is the HTML of our image. 'Compose' mode shows us the compiled HTML and 'Edit HTML' mode shows the raw HTML code. Anyways, now we'll do a little bit of editing.

This is the code for the above uploaded image.

<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1UB7H1LJcUnxbVkjxCBKDOj1SvNIzd6hqu4A_h0byVFRIuz-B31xEyBCVDVSx4DTOHWZXfKC4mfLnMeLX3B-7tj7dnmUKCyA1Z6JDOSkRPHZ22rGkU3UCw2Uenna5xz3qOJ0BuUeyjAHl/s1600/1330057_flower.jpg" imageanchor="1" style="margin-left:1em; margin-right:1em"><img border="0" height="225" width="300" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1UB7H1LJcUnxbVkjxCBKDOj1SvNIzd6hqu4A_h0byVFRIuz-B31xEyBCVDVSx4DTOHWZXfKC4mfLnMeLX3B-7tj7dnmUKCyA1Z6JDOSkRPHZ22rGkU3UCw2Uenna5xz3qOJ0BuUeyjAHl/s400/1330057_flower.jpg" /></a></div>

Please note that there will be 2 addresses or URLs in the uploaded image. For my image, these are the URLs.

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1UB7H1LJcUnxbVkjxCBKDOj1SvNIzd6hqu4A_h0byVFRIuz-B31xEyBCVDVSx4DTOHWZXfKC4mfLnMeLX3B-7tj7dnmUKCyA1Z6JDOSkRPHZ22rGkU3UCw2Uenna5xz3qOJ0BuUeyjAHl/s1600/1330057_flower.jpg

&

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1UB7H1LJcUnxbVkjxCBKDOj1SvNIzd6hqu4A_h0byVFRIuz-B31xEyBCVDVSx4DTOHWZXfKC4mfLnMeLX3B-7tj7dnmUKCyA1Z6JDOSkRPHZ22rGkU3UCw2Uenna5xz3qOJ0BuUeyjAHl/s400/1330057_flower.jpg

There is only 1 difference in the image URLs which is s1600 and s400. First URL with s1600 is actually the link URL. It is responsible for making this image a link. Second URL with s400 is the source URL. It displays the image.

As I've already told you that, by default, the image is linked to itself. So we need to change the first URL in our image code. For example, if I want to link the above uploaded image to my blog's homepage which is http://www.betatemplates.com/. I'll only replace my blog homepage URL with the first URL in the image code. After that, the image code will look something like this:

<div class="separator" style="clear: both; text-align: center;">
<a href="http://www.betatemplates.com/" imageanchor="1" style="margin-left:1em; margin-right:1em"><img border="0" height="225" width="300" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1UB7H1LJcUnxbVkjxCBKDOj1SvNIzd6hqu4A_h0byVFRIuz-B31xEyBCVDVSx4DTOHWZXfKC4mfLnMeLX3B-7tj7dnmUKCyA1Z6JDOSkRPHZ22rGkU3UCw2Uenna5xz3qOJ0BuUeyjAHl/s400/1330057_flower.jpg" /></a></div>

As you can see that 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.

Make Image Link Open in a New Window or Tab

If you're linking your image to some other blog or website then it is pretty desirable to make it open in a new window or tab. By doing this, visitors will stay on your blog.

To do this, I'll 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.betatemplates.com/" target="_blank" imageanchor="1" style="margin-left:1em; margin-right:1em"><img border="0" height="225" width="300" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1UB7H1LJcUnxbVkjxCBKDOj1SvNIzd6hqu4A_h0byVFRIuz-B31xEyBCVDVSx4DTOHWZXfKC4mfLnMeLX3B-7tj7dnmUKCyA1Z6JDOSkRPHZ22rGkU3UCw2Uenna5xz3qOJ0BuUeyjAHl/s400/1330057_flower.jpg" /></a></div>

And the image will look same. However, now it will open in a new window or tab.