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


Sunday, November 13, 2016

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:" imageanchor="1" style="margin-left: 

1em; margin-right: 1em;">" width="320" />

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:


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, 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:

" imageanchor="1" style="margin-left: 1em; margin-right: 1em;">" width="320" />

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:

" target="_blank"  imageanchor="1" style="margin-left: 1em; margin-right: 

1em;">" width="320" />

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

No comments:

Post a Comment

Note: Only a member of this blog may post a comment.