Language Translator


What Are These Flags? ... Read more about them, here! ... Publish in a Non-English blog? ... How does this work? ... Get the Latest Codes Update

Pages

These images are actual Image Links, and are click-able. Use them to navigate to the sites indicated!

Thursday, July 16, 2009

Anchor Links within a post

ANCHOR LINKS WITHIN A POST


My friend, the Nitecruzr, once told me; "Anchors are simple - make an anchor - and link to it!"

Of course, then he told me about the W3 School and gave me the link to find out, myself! He was correct, though! They are simple - just tricky, but once you 'get' them, you'll have some fun!

It is important to know how to link from one specific point in your post, or a specific theme/word in your post, to something in another part of your blog post. It's called an Internal Anchor Link! Anchors and Triggers.

With me so far?

Internal Anchor Links work especially well, when there is a lot of information on a page, or sections of a page, and you wish to refer the reader back to a previous point. I have made an example of this at the end of the post. Indeed, every post on this blog, displays an Anchor Link in some fashion.

Unlike URL Hyperlinks, to make Anchor Links, you have to use the HTML Editor, as opposed to the COMPOSE MODE, or WYSIWYG (What You See Is What You Get) Post Editor, to 'set' the 'anchor target tag'...



<a name="anchor">
anchor</a> (target word).


The Triggers, or HyperLinks, to the Anchor target tags. They look like this:



<a href="http://blogging.robertosblogs.net/2009/07/anchor-links-within-post.html#
Target Anchor word">Target</a>.


One interesting part of Anchor Links - INTERNAL, or EXTERNAL, is the use of the Hash key #. With anchor links, it can be used 'Sans URL' (without URL), as seen in the following examples...


Let's say I want to link back to the first part of this post, to the word - anchor - at the top. The first thing I do, is to set the 'Target', if you will, - the Anchor point. That looks like this:



<a name="anchor">
anchor</a>

(This is the same for an External Anchor Link to this post). I then place it, by typing it into the HTML Editor.

Then, I link to it by selecting a word to use as a hyperlink - say, for example, from:


<a href="#anchor">
Back to the start</a>



Click
HERE


N.B. Links are case-sensitive, as with Feed URLs.


In addition to the above, you can also use basically the same 'target' anchor, except by making it numerical, as well. eg:

Linkhere1, Linkhere2, Linkhere3, etc. As an example, I have set an anchor at the word 'Triggers' above. Click this trigger Here, to go to it!

The anchor looks like this:


<a name="Linkhere1">
Triggers</a>

The trigger looks like this:


<a href="#Linkhere1">
here</a>


N.B. - As the owner of the blog, you should know where your Anchors are. If so, then you can also access them from 'outside'. In other words, you can link to the salient 'tags' from another blog, or post, with the correct Hyperlink URL - as above. For example, I know where a 'tag' is in my Photos Blog, for Hong Kong Harbour. Click <Here>


Another example of the Internal Anchor (from above) is - I have placed an anchor on the anagram WYSIWYG above, and called it editor. The target anchor looks like this:


<a name="editor">
WYSIWYG</a>


Here is the trigger to that target:


<a href="#editor">
WYSIWYG</a>



Click
<HERE>


There you have it. Internal Anchor Links - a vital weapon in the armoury of a busy blogger. External Anchor Links are basically the same process, but you have to have access to the site you want to link to.

If I were to set an External link, which I haven't, to the target word, WYSIWYG above, it would look like this (remember that I have set the anchor as 'editor'):


<a href="http://blogging.robertosblogs.net/2009/07/anchor-links-within-post.html#editor">
editor</a>

Try it. Open a new Browser window, copy this URL, and see:
http://blogging.robertosblogs.net/2009/07/anchor-links-within-post.html#editor

Not much different, at all.


see also: Anchor Links - Internal and External. (This is, in itself, an External Anchor Link!)

TOP

17 comments:

Mandy and Jack said...

Thank you so much for this!! It's exactly what I needed!

Viviscents said...

Hi. Spent countless hours fumbling on over this thing. Thank you very much for this post.

Kristina said...

I still can't get it to work. Blogger is adding href="" to my <a name="anchor" tag. I tried adding my page address to that as well but when I click on my link nothing happens. I'm sure blogger hates me :(

Roberto said...

Hi Kristina

Please re-read my post - you must be missing something. They're tricky little rascals, until you get it right!
Don't forget, you have to be in html editor, not compose mode.

Johanna GGG said...

Hi roberto - just wanted to say thanks for your advice - this seems to work for me - blogger does put in some html that doesn't mean much to me but I am not questioning it as long as the anchors work

Roberto said...

Hi Johanna

Thanks for that. Good luck with your blog - I'll pop in and see it, later.

Timothy J. Schutte said...

Thanks for the tip, Roberto!

Roberto said...

You're welcome, one and all!

Deirdre said...

Thanks so much! Spent way too much time trying and finally got it, thanks to this post.

Matt Blick said...

Really helpful and solved the problem, though i didn't understand a word of it, but I copied and pasted your links into my blog and changed the urls!

It works.

Just a suggestion.

I've looked up a couple of answers to this problem and everyone uses the post itself as an example.


"I'm hyperlinking to the word hyperlink, and the anchor is anchoring to the hyperlink of the word anchor..." you get the picture.

That's like teaching surgery by operating on yourself!

It would be clearer if you were demonstrating on text about puppies or something.

Deirdre said...

This was working great for me, but now when I add this code, after publishing, Blogger adds
href="http://www.blogger.com/"
between <a name
which causes the anchor to become a link to a nonexistant webpage. I've deleted it numerous times and it keeps popping up. I keep rechecking my code and don't see any errors. Any ideas?

Roberto said...

Hi Deirdre

I've noticed the same thing, in recent months. It's a Blogger editor thing. The code is OK, though.
I don't know why, but I have had to edit many times, and it stems from my bad habit of swapping from 'edit html' editor to 'Compose' mode editor.
I asked a friend of mine, Nitecruzr, and he suggested the same thing.
When I don't swap, it doesn't happen.
I hope that helps.

Emily said...

Hey Roberto,

Thanks for the good info... I was able to get it to work, but I'm not sure I understand where I'm supposed to put the anchor. At the end of my post? When I did it for the first time I put it at the end of my blog post, then I could see the words "anchor" & the name I gave the anchor at the bottom of my post. Is that right? Thanks again!

Emily

Bob said...

Emily,
You can put the 'anchor' any place you like. There's no set position, however, you should only be able to see the Trigger - not the Anchor.

Emily said...

The 'Trigger' is the word that you link the anchor to, correct?

Bob said...

Wrong way around, Emily.

The Anchor is what your Trigger links to!

I've just finished two more posts on Anchor links. They may explain it better.

see: External Anchor Links - Simplified

and

Internal Anchor Links - Simplified

Hope that helps. As my mate Chuck says; "Anchor Links are easy - just make an Anchor, and link to it!"

Ashley Calder said...

Thank you for this tutorial! It was very helpful.

Blogger Error Codes