How To Resolve: How to Insert a Simple HTML Coding for an Image That Links to a Website?

To insert a simple HTML Coding for an image that links to a website (when the image/photo is clicked it directs to another website or another page of your site), the following is a general pattern:

1) [ YOUR SITE / LANDING PAGE URL HERE ] will be your blog's URL/address; when people click on the image they will be directed or brought to your site.

2) [ target="_blank" ] will open a new window to your site when the photo is clicked. Change 'blank' to 'top' if you want them to open in the same window.

3) [ ALTERNATE TEXT ] is the text that will appear in case the photo URL is not loading yet, because sometimes photos do not load always due to bandwidth reasons.. so, think of a text that will represent the photo or your site (usually it's the website name).

4) [ IMAGE URL HERE ] is the file address of your image. Your image/photo should have been uploaded in image hosting sites like flickr, photobucket, picasaweb.

5) [width="420" height="137"] adjust your image or photo size by changing the width and height values; if you want to use your original uploaded image size, just remove the whole code [width="420" height="137"].

Notes:

a. if you are inserting a photo/image from your computer to your blog post... after inserting the photo/image, go to "Edit HTML" tab and change the URL next to the code href=" , as in Step 1 above.

b. if you are inserting a photo/image in the sidebars or top/bottom bars of your blog specifically in blogger, you can either insert through the "Layout", then "Add a Gadget", choose "Picture" and enter the data asked; or choose "Java/HTML" gadget and enter the HTML code as in the pattern above.

A sample image/photo HTML coding below directs users to the site, "You're Beautiful Episodes", when the image is clicked. Notice the values/parameters I entered in blue text. The original image size is 500x400 pixels, but I made it 50% smaller, maintaining the WxH ratio as to not distort the image.