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:


blogging tutorials for beginners


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.

blogging tutorials for beginners


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/AVvXsEjBkkNgKGYXMU7J2xm0Hz47aDG-y4q6eq3rYnSYxp-46zH_z8btND2pJX2LvRDyb5ctibUdjBuVOfqWMEBzBkfY-zc5lFkQdsS0Vur_iindzBshnKlWSvIXQfzADpVyQJ3QsXO3TsiWOYYl/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/AVvXsEjBkkNgKGYXMU7J2xm0Hz47aDG-y4q6eq3rYnSYxp-46zH_z8btND2pJX2LvRDyb5ctibUdjBuVOfqWMEBzBkfY-zc5lFkQdsS0Vur_iindzBshnKlWSvIXQfzADpVyQJ3QsXO3TsiWOYYl/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/AVvXsEjBkkNgKGYXMU7J2xm0Hz47aDG-y4q6eq3rYnSYxp-46zH_z8btND2pJX2LvRDyb5ctibUdjBuVOfqWMEBzBkfY-zc5lFkQdsS0Vur_iindzBshnKlWSvIXQfzADpVyQJ3QsXO3TsiWOYYl/s1600/large.jpg

&

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBkkNgKGYXMU7J2xm0Hz47aDG-y4q6eq3rYnSYxp-46zH_z8btND2pJX2LvRDyb5ctibUdjBuVOfqWMEBzBkfY-zc5lFkQdsS0Vur_iindzBshnKlWSvIXQfzADpVyQJ3QsXO3TsiWOYYl/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/AVvXsEjBkkNgKGYXMU7J2xm0Hz47aDG-y4q6eq3rYnSYxp-46zH_z8btND2pJX2LvRDyb5ctibUdjBuVOfqWMEBzBkfY-zc5lFkQdsS0Vur_iindzBshnKlWSvIXQfzADpVyQJ3QsXO3TsiWOYYl/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.

blog design tutorial


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/AVvXsEjBkkNgKGYXMU7J2xm0Hz47aDG-y4q6eq3rYnSYxp-46zH_z8btND2pJX2LvRDyb5ctibUdjBuVOfqWMEBzBkfY-zc5lFkQdsS0Vur_iindzBshnKlWSvIXQfzADpVyQJ3QsXO3TsiWOYYl/s320/large.jpg" width="320" /></a></div>


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

 


7 comments:

  1. Thank you for your post, I look for such article along time. myself very happy to read it because it can give me more insight,thanks.
    poker online terbaik

    ReplyDelete
  2. Informative post share for the how image linking URL within the blog posts. Thanks a lot for the sharing. kovai web solutions | coimbatore web solutions | online web solutions in coimbatore

    ReplyDelete
  3. this post helps me to solve my problem thanks for this keep sharing such info

    website

    ReplyDelete
  4. great. I am confident there are many outstanding features coming soon.
    fnaf 2
    games for kids

    ReplyDelete

Related Posts Plugin for WordPress, Blogger...

More From Webworld