Links from Images in Blogger

I've just read a blog where the blogger was frustrated because he wanted to link to another blog by clicking on an image rather than the display a larger image, the default setting in Google Blogger.

To do this isn't too painful. At the top of the post, there are two buttons: Compose & HTML. Normally, a blog is written using the Compose window. When you have finished, you will need to go to the HTML window to change the link from the image.

In the HTML code, if you have used an image url (i.e. from another internet location) you will see a paragraph something like this:

• <a href="http://www.site.co.uk/image.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img alt="" border="0" src="http://www.site.co.uk/image.jpg" />

If you have uploaded an image from your computer, the code may look like this:

• <a href="http://1.bp.blogspot.com/-v8N8w/UZ9tIg/AAABMY/zuZNk/s1600/blogpic.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://1.bp.blogspot.com/-v8N8w/UZ9tIg/AAABMY/zuZNk/s1600/blogpic.JPG" /></a>

src= lets Blogger know where to find the image that should appear in the post and a href= is the default link to display the original size image.

Simplified, you must leave the src= (image source) intact but the link contained in "quotes" next to a href= can be replaced with the destination url/page of your choice. Sometimes you may just want to remove the /image.jpg part of the link, or you may want to replace the whole link.

Examples:

<a href="http://www.site.co.uk" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img alt="" border="0" src="http://www.site.co.uk/image.jpg" /> will link to the site where the original image is sourced.

<a href="http://www.anotherblog.blogspot.com" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img alt="" border="0" src="http://www.site.co.uk/image.jpg" /> will link to a different location, such as a blog, another website, social media account, etc.

Note that these paragraphs must remain between the < and > signs.

And finally... an example of an image that should open another blog in a new tab or window: