The Blog Doctor.

Making an Image Link.

There are several situations where you may need to construct an image link in your blog. The most frequent is when you want arrows pointing to the next page or the previous page as navigation links.......

Other uses are when you wish to post the image as a preview. For example the image of a bookcover used to link to Amazon.com.

WHAT IS A LINK A link in a document to information within that document or another document. These links are usually represented by highlighted words or images. When a reader selects a hyperlink, the computer display switches to the document or portion of the document referenced by the hyperlink.

You can also use logos/banners as image links to other websites represented by the logo. I have covered this in Adding Banner links. The basic simplest link code is :

<A href="URL OF SITE">TITLE OF SITE</A>

CREATING THE IMAGE/LOGO

To create the image you can use online generators such as cooltext.com. These are websites which allow you to create a logo or banner for your blog. Most of them are free, others attach their own logo to the image created on their site. You can search for these sites by typing logo/banner generator in your Google search bar. After creating the image right click the image and choose Save Image As to save the image to your hard disk.

You can also create your own image using Paint or any other image editing program like Paintshop, Photoshop or Irfanview. After creating the image save it to your disk.

You can also search for and download navigation graphics like the following :

UPLOADING THE IMAGE

After creating and saving the image you have to upload it to a freehost on the Internet. This is because though your PC may be connected 24/7 to the Internet it is not a server which can serve your images whenever requested. Googlepages offers 100MB free space per account and you can create five such accounts at present. Other freehosts are Photobucket.com and Imageshack. You can upload your images to Imageshack directly from the link at the bottom of the right column in this blog. Another freehost is Flickr.com

You can also use Blogger to host your images by uploading them in a post. After uploading click on Edit Html tab of Post Editor and you will see the code for the image like this :

From this image code extract the url for the image which is :

http://3.bp.blogspot.com/_J2kVk3AKsXA/Rbrhgo1InAI/AAAAAAAAAJw/sWsLFKfVVbQ/s1600-h/Blackberry.jpg

After this Publish that post as a draft. When you publish post as draft your viewers do not see it though it is available. In the New Blogger when you delete a post you are given option to delete the images within the post. If you do not delete the image there is no guarantee that they will not be deleted.

If you have uploaded your image to a free host then copy down its link which will be in same form as above. You can test the link by pasting it in the address bar of your browser and hitting Enter. The image should display in your browser.

MAKING THE LINK

We have the image uploaded to a freehost and we have its link. Now to constructthe link code which is :

Replace URL/LINK YOUR IMAGE IS POINTING TO by the URL of the site your image is pointing to. Replace LINK OF YOUR IMAGE AT FREE HOST FROM STEP 2 ABOVE with the link of the image you extracted from the blogger post or the link of your image at the freehost. Replace TITLE OF SITE IMAGE IS POINTING TO with the title of the site the image is pointing to.

Alt tags provide alternative text for images to visually impaired individuals, who reach the net through audio-based browsers. They also provide alternative text for individuals who have disabled image loading in their browsers.

GIVE YOUR LINK A TITLE

To give your link a title include a title tag. This will show the title when the mouse is over the link and also serve to give directions to the viewer eg:

LINK IMAGE TO A POST

To make an image link to a post in your blog use this code :

<a href="PERMALINK URL"><img src="URL OF PICTURE" alt="POST TITLE"></a>

Instead of PERMALINK URL paste the URL of the post. This can be obtained by opening the post in a browser and copying the link from the address bar.

NAVIGATION ARROWS FOR NEW BLOGGER

Perhaps you are tired of the Older Posts and Newer Posts links at the end of each post in the post pages of the New Blogger. Then you can replace them with navigational arrows as follows :

Go to Template------>Edit Html and backup the Template.