Wednesday, 21 September 2011

basic linking codes

I've read a couple of blogs recently where the writer wanted to put up codes for buttons but couldn't get them to work. I'm no expert in HTML by any means, but I thought I'd post the codes I know here.

The most basic code is this:

<a href="URL of where you're linking TO"><img src="URL of image"></a>

URL you're linking to
This is the web address of the page you want people to land on. It will *always* start with http://. If you use a code that starts with "www.", it won't link properly.

URL of image
You need to have loaded your image into a hosting site and then use the URL that the hosting site gives you for the button. Again, the URL is the code which starts with http://. It *has* to be the URL - or the direct link if you're using Photobucket as your hosting site. No other code will work.

Now, whilst that basic code works beautifully, there is another code which I like to use. It just adds in a couple of features which I think are beneficial.

<a href="URL of where you're linking TO" target="_blank"><img src="URL of button/TAG" title="these show up on hover over"></a>

target="_blank"
This means the link opens in a new window. I like this because people are not directed away from your blog - well, they are but the original window with your blog in it is still open as well.

these show up on hover over
These are words that will show up when people hover their mouse over the image. So you can give clues in these words - or keep them guessing.

For example, hover over this and see what happens -



Then click on it and it will take you - in a new browser window - to a post about something I finished in August - the clue to what it is is in the hover over words. :o)

The code that I used is this:

<a href="http://annelee55.blogspot.com/2011/08/finished-wedding-quilt.html" target="_blank"><img src="http://img.photobucket.com/albums/v679/annelee55/anne140911.gif" title="the wedding quilt"></a>

I hope that makes sense! If anyone has any questions, leave me a comment and I'll be happy to help. :o)

2 comments:

Thanks for taking the time to comment on my blethers. I really appreciate it. I do try to reply to everyone but sometimes life just gets in the way of that happening! :o)