Monday, 9 January 2012

Anchors: a tutorial from a novice

I updated my favourites a while back to include some anchors at the top.

The work was prompted by a question about anchors.  So I thought I would do a little tutorial.  It is a little nerdy.  I am not really a technical person.  You may not need it.  I do.  Without these notes I would have forgotten when I did.  Maybe it might help any other anchor novices.

What are anchors?  I checked Wikipedia for help but it seemed too much information.  So here is my explanation.  An anchor is a link within a page that takes you to another part of a page, either the one you are on or another page.  Sometimes people can't be bothered scrolling down to the information.  They want to get there fast.  We help with an anchor to leap across lots of text and land at the anchor.

This is an anchor - http://gggiraffe.blogspot.com/2012/01/anchors-tutorial-from-novice.html#the_end - because it will take to a place at the end of this page.

This is an anchor on another page - http://gggiraffe.blogspot.com.au/p/recipe-index.html#Novelty_Birthday_Cakes because it will take you to a place far down another page

This is not an anchor - http://gggiraffe.blogspot.com/p/blog-index-complete.html - because it will take you to the start of another page.

How do you attach anchors?  You either have a little anchor icon on your Content management system (CMS) or you need to edit your HTML.  If it is already an icon on your CMS you just need to click on it, type it in the pop up window and add it to the url as below.  To edit your HTML is a bit more tricky but not too hard.

On Blogger there is an Edit HTML tab.  Once in your HTML, you need to add HTML code to two places.  One - the "Anchor" or the place where you want people to land when they click on the link to the Anchor.  Two - the link to the Anchor.  I find it easier to add the information in this order.

Let's call the anchor "My dinner".  Remember that the anchor is a link (or url).  First rule with links is that there are no spaces.  If you leave a space the system fills it in with ugly text (eg %20).

You will have typed My Dinner on the page, usually down the page.  Replace it with code in the HTML so that the text in the "" will be the url link and the text in the >< will be the text that appears on your website as the name of the anchor (ie My Dinner).

<a name="my_dinner">My Dinner</a>
(See note June 2013)

When you go back to this after editing other part of the page, more HTML code will appear but I ignore it.  I prefer to put in something simple and for Blogger (or your CMS) to add the rest of the code.

Now you add the hash (#) and the anchor name that you have added in the quotation marks (my_dinner) to the url for the page (http://yourblog.blogspot.com/2011/10/page-of-anchors.html).  Below is an example of the url you will make.  You can now link to this from another part of the page, from any other page on your blog or from any other website using the link or url that you have created:

http://yourblog.blogspot.com/2012/01/page-of-anchors.html#my_dinner

To add the link on your page using the html, place your cursor at the place (often towards the top of the page) where you want to place a link that will help your reader jump to your anchor.  At this place type the link.  Remember that HTML is case sensitive.  For Example:


The end
Once it is done you should test it.  Check it works.  If it does, you can bake a cake to celebrate.  If not, check your HTML or just curse me for giving you false hope and then search the internet for someone who knows what they are talking about.

One last note - I have noticed that the anchor takes you as close to the bottom of the page as it can get - ie if the anchor is really close to the bottom of the page you may not arrive precisely at the anchor.

Any questions?

Update March 2013 - just updated the anchor link as I tried it today and found it was just not quite right.

Update June 2013 - I have been finding that the code I have been using is not inserting the full code as it was earlier.  So I have had to insert the BlogID and the PageID or Post ID (depending on if I am editing a page or a post).  To find these numbers you need to go into the edit page for a post and look at the url - the numbers are clearly labelled there.  So instead of <a name="my_dinner">My Dinner</a> my anchor code looks like this:

<a href="http://www.blogger.com/page-edit.do?blogID=1234567891234567891&pageID=9876543219876543219" name="my_dinner">My Dinner<a>

where blogID is 1234567891234567891 and pageID (or use postID if on a post rather than a page) is 9876543219876543219

9 comments:

  1. I definitely had NO idea what anchors were until this post! Super useful. Thanks, chica!

    ReplyDelete
  2. I tried using the footnote and hyperlink to a place in the document options in Microsoft Word to write my post, then copy paste in blogger, but those links didn't work in blogger.
    Thanks for sharing this, I will try on my post next time.
    By any chance, do you also know how to add numbers to comments & how to add reply button to each comment, with the author's comment in a different background than the reader's comment?
    Hehe, guess I may be asking too much, but this post of yours gave me some light at the end of tunnel for all the searches I have been doing lately on the above topics!

    ReplyDelete
  3. Thanks Joanne - glad it is helpful to share this info - you probably have seen them in urls and not realised it.

    Thanks Nish - as I said above I am no expert but I wrote these notes after a bit of trial and error. Just checking - did you paste the code into the Edit html window rather than the Compose window - that would make a difference. I regret to say that I am no expert on comments - all I can suggest is finding blogs where this is done and contact the author for advice or google your questions (this is actually how I found out about doing the anchors initially but then I fiddled around a bit more)

    ReplyDelete
  4. Wow, I had no idea what an anchor is. And this is a great tutorial!

    ReplyDelete
  5. Johanna, I am so VERY excited by this. I have always wanted anchors! But I didn't know they were called anchors and I didn't know how to go about getting them. So thank you - really very much :)

    ReplyDelete
  6. Thanks Oats and Beans and Baby Grow - glad it might be of help

    Thanks Kari - helps to name them when you google it (if my advice doesn't help)

    ReplyDelete
  7. I love this kind of post--such useful info! Thanks, Johanna, I'm going to try it out! :)

    ReplyDelete
  8. oh, this is cool! I've always wondered how you do these

    ReplyDelete
  9. great post...just what i needed!!

    ReplyDelete

Thanks for dropping by. I love hearing from you. Please share your thoughts and questions. Annoyingly the spammers are bombarding me so I have turned on the pesky captcha code (refresh to find an easy one if you don't like the first one)