How To Add Link/Url To Image In Blogger Blog

Have you been looking for a way to add link to your image, so that when visitors click on your image, they will be redirect to another page/website? If that's the case, then this tutorial should solve your problem.
It is good for every bloggers to know how to add link to image, because there would be some cases whereby you will like to show a demo of your content to your readers, which you may need to provide a demo image button instead of using a text, or you may need to link to another site with a image. So for you to add link to your image, simply follow the few steps below.

I will be using the image above to sight an example, and by default if you click on the image above, you can only view the image.

How To Add Url To Image

Whenever you want to insert a link to image, always switch to Edit HTML mode in your post editor, after you have upload your image, as shown in the image below

When you are in compose mode, you will see the image, but immediately you switch to Edit HTML mode, you will only see the image html code.
This is the html code for the first image above

<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjT_aQCMm9mm-2WtfaDgAKpRYGmJgxvMZp05yydZCKkd5oLfRiiu-JXQxj6aw_s5boO-oJNLcbB624nCg6VRTG5Ov_LZXHW8Xyib1QtpT6-mVl5tYNRaHWKviKiD7twA3L4NlOmYghoxTDL/s1600/Add+link+to+image.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="240" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjT_aQCMm9mm-2WtfaDgAKpRYGmJgxvMZp05yydZCKkd5oLfRiiu-JXQxj6aw_s5boO-oJNLcbB624nCg6VRTG5Ov_LZXHW8Xyib1QtpT6-mVl5tYNRaHWKviKiD7twA3L4NlOmYghoxTDL/s320/Add+link+to+image.jpg" width="320" /></a></div>

In your image html code, there will be two link in the image code, and the different between the two url is href=" and src=", but we are only concern with the one starting with href=" format as shown in the image above.

This is the code we are concerned about

href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjT_aQCMm9mm-2WtfaDgAKpRYGmJgxvMZp05yydZCKkd5oLfRiiu-JXQxj6aw_s5boO-oJNLcbB624nCg6VRTG5Ov_LZXHW8Xyib1QtpT6-mVl5tYNRaHWKviKiD7twA3L4NlOmYghoxTDL/s1600/Add+link+to+image.jpg"

Now let me use this blog url to give an example, if i want to insert this blog url to the image above the result we look as follow.

<div class="separator" style="clear: both; text-align: center;">
<a href="http://www.realcombiz.com/" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="240" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjT_aQCMm9mm-2WtfaDgAKpRYGmJgxvMZp05yydZCKkd5oLfRiiu-JXQxj6aw_s5boO-oJNLcbB624nCg6VRTG5Ov_LZXHW8Xyib1QtpT6-mVl5tYNRaHWKviKiD7twA3L4NlOmYghoxTDL/s320/Add+link+to+image.jpg" width="320" /></a></div>

If you click on the image below, you will be redirected to this blog homepage.

How To Open Your Link In New Tab

If you want your link to open in a new tab, probably you are linking to another site and you don't want your readers to leave your site, this is what you need to do, just add target="_blank" after your link address.

The final result should look as follow

<div class="separator" style="clear: both; text-align: center;">
<a href="http://www.realcombiz.com/" target="_blank" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="240" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjT_aQCMm9mm-2WtfaDgAKpRYGmJgxvMZp05yydZCKkd5oLfRiiu-JXQxj6aw_s5boO-oJNLcbB624nCg6VRTG5Ov_LZXHW8Xyib1QtpT6-mVl5tYNRaHWKviKiD7twA3L4NlOmYghoxTDL/s320/Add+link+to+image.jpg" width="320" /></a></div>

If you click on the image below, this blog homepage will open in a new tab

That's all on how to add link/url to image. you may also be interested in how to tag image for better search ranking.
Hope you find this article useful? Use the comment box if have anything to say or ask, and don't forget to subscribe to this blog, for you to get our latest articles directly into your email, and check your email to confirm your request. BLESS

Go Social:

Subscribe For Free Updates!

*Please confirm the email sent to your inbox after clicking "Sign Up!".

Follow @realcombiz