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

18 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
  10. UGH! I did this exacly how it was suposed to be and I just can't get this big white square from appearing in the menu bar when its all ready and i dont know how to take it out I got so frusterated that I just deleted the whole gadget. This makes me want to ditch blogger but I don't want to give up on my blog:(

    ReplyDelete
  11. Hi! Thanks so much for this lesson. I am trying to create a drop down menu for each tab and I was directed here. Not sure if you still check this page but I would really appreciate any help I can get!

    ReplyDelete
    Replies
    1. Hi Samuella - I think you are looking for this page which has a little about my experience of putting in drop down menus and links to Bite Sized Thoughts where I found the code - http://gggiraffe.blogspot.com.au/2013/07/drop-down-menus-and-blog-changes.html

      Delete
  12. Thanks. I have an idea how to create an anchor but help me with how to put desired content in the anchors

    ReplyDelete
  13. Thanks Joanne. It is a ton of help. But need your urgent help I actually found out where the anchor thin is in my html template: expr:id

    But I need your help how to create the ancho for individual links. I do not expect you to show every thng just say for 'about' with drop down 'management' and 'company' I can fix the rest.

    ReplyDelete
  14. Johanna GGG, thank you so much for sharing your knowledge on Blogger Drop down menu and the tutorial on Anchors. They are so easy to follow. However, I have a question on the width of drop down menu (submenu). I even adopted your css and edited the submenu width from 180, 240px; (being the default) to 540px (which suits my needs; but even I resorted to adding !important; to the code, blogger still displays the original width:240px;! Please help me, if you can. Thank you.

    ReplyDelete
    Replies
    1. Hi Freelance Writer - I am glad it helped you but I am sorry to say that I don't have enough understanding of the html on the Blogger site to help you - it has flummoxed me with a few things and I just haven't had time to look into it and work it out but I wish you all the best (you could look at Bitesized thoughts where I got the drop down menu info from and see if her post is helpful)

      Delete
  15. Johanna GGG, please forgive me for not letting you know my blog's url. My blog 's name is The Drl Blog (or http://davidrubinlang.blogspot.my/); so that you can view my submenu width, and see what I mean.

    ReplyDelete
  16. Johanna GGG, I've already done that! In fact, the HTML of the my blog is based on Bitesized thoughts' css syntax! Mind you, everything works beautifully on many browsers...except Blogger's browser. Incidentally, it has occurred to me, too, your drop down menu width was narrow (for my needs, if you know what I mean).

    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)