Making an Image Link. ~ The Blog Doctor.
Loading...

Making an Image Link.

New Visitor? Like what you read? Then please subscribe to my Blog Feed or sign up for Free Email Updates. Thanks for Visiting!

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 :

<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://3.bp.blogspot.com/_J2kVk3AKsXA/Rbrhgo1InAI/AAAAAAAAAJw/sWsLFKfVVbQ/s1600-h/Blackberry.jpg"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;" src="http://3.bp.blogspot.com/_J2kVk3AKsXA/Rbrhgo1InAI/AAAAAAAAAJw/sWsLFKfVVbQ/s400/Blackberry.jpg" border="0" alt=""id="BLOGGER_PHOTO_ID_5024576285117553666" /></a>

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

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 :

<a href="URL/LINK YOUR IMAGE IS POINTING TO"><img src="LINK OF YOUR IMAGE AT FREE HOST FROM STEP 2 ABOVE" alt="TITLE OF SITE IMAGE IS POINTING TO"></a>

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:


<A title="GO TO THIS SITE FOR A WONDERFUL EXPERIENCE" href="URL/LINK YOUR IMAGE IS POINTING TO"><img src="LINK OF YOUR IMAGE AT FREE HOST FROM STEP 2 ABOVE" alt="TITLE OF SITE IMAGE IS POINTING TO"></a>




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.

Then put a checkin Expand Widgets Template checkbox and scroll down till you see this code in the Blog Posts section :


<div class='blog-pager' id='blog-pager'>
<b:if cond='data:newerPageUrl'>
<span id='blog-pager-newer-link'>
<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + "_blog-pager-newer-link"' expr:title='data:newerPageTitle'><data:newerPageTitle/></a>
</span>
</b:if>

<b:if cond='data:olderPageUrl'>
<span id='blog-pager-older-link'>
<a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + "_blog-pager-older-link"' expr:title='data:olderPageTitle'><data:olderPageTitle/></a>
</span>
</b:if>

<b:if cond='data:blog.homepageUrl != data:blog.url'>
<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
<b:else/>
<b:if cond='data:newerPageUrl'>
<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
</b:if>
</b:if>

</div>
<div class='clear'/>


Replace the code in red with the following lines :


<img alt='OLDER POSTS/NEWER/POSTS/HOME' src='URL OF NAVIGATION IMAGES' />


Technorati Tags:, , , ,

24 comments:

Anonymous said...

Your blog is worth gold for blogger newbies like me....hats off to ya !

Alex said...

Very helpful, very understandable. Many thanks.

Figliuolo said...

Thank you! Very clear, simple instructions on adding an image as a hyperlink. Took me a few tries to perfect it but very helpful. Thank you!

Traci said...

thank you! a question though, if i want the link to pop up in a separate window, where do i place target="_blank"?

Vin said...

Traci,

Use this code :

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

Traci said...

thanks so much for your help!

Peggie said...

Thank you! I have been trying to get the image into a link and keep failing. Finally you got me there. Thanks so much!

CanadianInvestor said...

It works! Brilliant! Thanks very much. Clear, well-illustrated example was especially helpful. The only thing I found is that I had to use the src= field rather than the href= field for Blogger.

Brent Skinner said...

Your blog is indispensable!

I do have a related question not covered in your post. I've created a new blog -- so new, I've barely posted entries to it. Here's my situation: One of the "page elements" is the logo image for my company. I can't figure out how to turn that logo image into a link to my homepage. Any suggestions? Thanks

Vin said...

Brent Skinner,

Upload image to Googlepages and copy it's link.

Then paste the link into image link code as shown in above post.

Then copy the whole code and paste it in a Html Page Element.

ditchdigga said...

How do make my pictures open in a new window

Vin said...

ditchdigga,

See How to open links in new window?

Gagan vj™ said...

Thanks!.

I have now learned how to replace older post newer post etc with images..

Thanks Once again!

Xenophanes said...

Could you tell me how to replace "Older post" and "Newer post" with other phrases (like "Next page" or something) instead of an image?

Vin said...

Xenophanes,

Replace :

<data:newerPageTitle/>

with :

New Page

and

<data:olderPageTitle/>

with :

Previous Page

Xenophanes said...

Thanks! I figured it was something simple like that.

Sarah Ayoub said...

Hi Vin, This has been helpful in helping me actually get the image up there, but the link is not working. When I click it it says this cannot be displayed and the address has my blog connected to that actual link (eg: I am www.stylesessionsdaily.blogspot.com and the link is trespassmag.com, but when I click it in my sidebar it says www.stylesessionsdaily.blogspot.com/www.trespassmag.com

How can I fix this? And also, how can I make the images in my sidebar all the same size? I use photobucket and I just started with blogger - your site has helped me customise so much already because I dont know CSS/HTML at all! Thank you.

Vin said...

Sarah Ayoub,

It appears to be a private blog so can't view it to check it.

Angie and Jim said...

I have a seperate "home page" for my blog, the links work but I have red X's in white squares that I want to get rid of. It's at angieandjim-home.blogspot.com.
Thanks Vin, love your site!!!

Vin said...

Angie and Jim,

Look in the template for the links of those pictures and delete them.

semua tentang aku said...

hi...

thanks...
can you comment in my blog...

http://semuatentangdiriaku.blogspot.com/

i have a lot of questions:

1. I want to make a good header but i can't..

2. how change the color of background.

3. How spread header and body... yes, it very close

4. thanks.. dr.

Vin said...

semua tentang aku,

Have a look at How to change background color of blog.To separate header and body put margin-bottom or padding-bottom in the CSS part of the template for header wrapper and give it a size like 20px. and gi

Raghu CK said...

thank u. Could u tell me how to add downloads to my blog. Means when somebody click on that download bar they should get that file downloaded.

Vin said...

Raghu CK,

Blogger does not provide free file hosting except for images and videos and these cannot be downloaded directly.


You have to upload files to a free host and provide their download links on the blog.

CLICK TO LEAVE A COMMENT..... :-)



Skip to top of post.

Search Blog Before Commenting

Loading...

Post a Comment

Please use the above search box to search this blog before posting your valuable comments.

Comments posted on Dummies Guide to Google Blogger (Beta) are moderated and will be approved only if they are on-topic and not abusive. Try not to include website URLs/links in your comments. You can email me : drbhatns at gmail dot com for any blogging question. Thanks,

Vin.

The Blog Doctor The Blog Doctor2 Blog Doctor Home

SUGGESTED READING

Tips On Blogger and Latest News.



Skip to top of post.