Thursday, March 24, 2011

How to Create Named Attribution Jumps

How to Create 
Named Attribution Jumps
What You Will Learn



Have you ever gone to a FAQ page and it has a bunch of questions that are links at the top of the page. If you click on them they bring you to a section of the same page further down. Sound familiar?
Check out my newly designed Review Index for an example. I have the alphabet listed at the top of the page and if you click on one of the letters you will be brought to the section of my review list that begins with that letter. Try it out. See how that works? That’s what you’ll be learning how to do here. 
Click to make larger
 The "named attribution" has to do with how you write your code. The "jump" is because you are clicking a link in order to "jump" to another part of the same page.
Let's Do This!
We are going to use the HTML Editor for this exercise.
Click to make larger
Step 1: The Link
Identify your anchor text:
First you need to decide what you want your readers to click on. This is the link you will create (also known as “anchor text”). For a FAQ page, this would be the question. In the example of my Review Index, the links are the letters of the alphabet at the top of my page.  
Make the link: 
<a href="#C">C</a>
Copy and paste that code. 
The RED letter C is the anchor text. These are the words your readers will see on your page. In my example, I am making a link for my readers to jump to the “C” section of my Review Index and so the text they will click on is the letter C.
The BLUE letter C is the name of the link I am referencing. This is your "named attribution." You can name this anything you want, but I suggest you pick something short and specific. The name won’t affect the code in any way, but making it something relevant will help you remember and later identify your code.
In my example, since I am referencing a link to books beginning with the letter C I’m simply going to title this link “C”
Here is another example for a FAQ question:

<a href="#genres">What genres will I accept for review?</a>
In this example, the question readers will see is “What genres will I accept for review?” I have made my link name “genres” because it is both relevant and short.
Step 2: Link destination



Identify your anchor text:
This is the part of the page the link leads to. In my Review Index example, when a reader clicks on the letter C in my alphabet list, they will be brought to the section of my Review Index that lists all of the books that begin with the letter C. Notice how each section of my reviews begins with the appropriate letter (each letter is blue and italicized). Those letters are my anchor text for my link destinations.


Click to make larger


Make the link: 


 <a name="C">C</a>



Copy and paste the code.
The part in RED is your anchor text. This is what your readers will see and this is what the link will jump to. In my Review Index example this is the blue italicized letters of the alphabet.
The part in BLUE is the name attribution. It is VERY IMPORTANT that you use the same name you used in the first code. If you don’t use the same name, then your links will not work. Note that in the first code, you use the pound symbol (#) but in this second code you DO NOT use the pound symbol (#).

Here is what it would look like for the FAQ example from above:
<a name="genres">What genres will I accept for review?</a> 




Step 3: To the top

If you want to make a “To the top” link you do the same thing. You will use the code WITH the pound symbol (#) for the anchor text “To the top” and you will use the code WITHOUT the pound symbol (#) for whatever text you choose to be the link destination.


A note on this:


For some reason Blogger always corrupts my code for these jumps every time I edit my post. This is very annoying and I don't know why Blogger does it or how it can be stopped. My work-around is that I have copied my code and save it in a Word document. Then I just repaste it in every time I need to update my post. It's annoying, but it works and requires minimal effort. 


Example of what I have saved:


<span style="font-size: large;"><a href="#A">A</a> <a href="#B">B</a> <a href="#C">C</a> <a href="#D">D</a> <a href="#E">E</a> <a href="#F">F</a> <a href="#G">G</a> <a href="#H">H</a> <a href="#I">I</a> <a href="#J">J</a> <a href="#K">K</a> <a href="#L">L</a> <a href="#M">M</a> <a href="#N">N</a> <a href="#O">O</a> <a href="#P">P</a> <a href="#Q">Q</a> <a href="#R">R</a> <a href="#S">S</a> <a href="#T">T</a> <a href="#U">U</a> <a href="#V">V</a> <a href="#W">W</a> <a href="#X">X</a> <a href="#Y">Y</a> <a href="#Z">Z</a> <a href="##">#</a></span></div>

The form is anonymous, so please don't feel shy at all!

I'm certainly not an expert, but I'll try my hardest to explain what I do know and research what I don't know.

Click here to read previous How To Posts 

35 comments:

  1. What a great post, as all your html ones are. How did you learn all this?

    ReplyDelete
  2. Holy Crow! Yes! You have really, really made me so happy with this post! I had no clue how to do this!

    I can't wait to add it to my blog! :D

    ReplyDelete
  3. I've used named attribution jumps once in a post (though I didn't know they were called that, LOL) but I hadn't thought of its use in the review index. Good idea, I might think about adding that to mine! :)

    ReplyDelete
  4. Thanks again for another useful tip. I am definitely going to give this a try :)

    ReplyDelete
  5. Have I told you recently how much I love you for doing these posts?
    I've been wanting to do this for ages, but all the websites I Google'd made this seem really complicated.
    Thank you for making it simple, for simple minds ;) :D

    ReplyDelete
  6. I think this will be very helpful and hopefully I can try that this weekend. Thanks for the tips!

    ReplyDelete
  7. I love these posts! I've used some of your others too on my blog. They're great. Thanks!

    ReplyDelete
  8. Ohhhhhh, this is ahhhhhhhhhsome!!! Where did you get your mad skills, Obi Wan Blognomi? I've been wanting to know how to do this for ages!

    ReplyDelete
  9. You continue to amaze me with your knowledge of HTML and more so, your ability to communicate it to others in a simply easy to read fashion! Nice job. I just love these posts. Please keep them coming.!

    ReplyDelete
  10. Oh my gosh I was just starting to make a page for my reviews--I'll have to bookmark this and attempt it! Thanks so much, you're so helpful :]

    ReplyDelete
  11. You must've read my mind because I was just looking at this the other day wondering how you did it! Thanks for this post!!!!!!!! :)

    ReplyDelete
  12. Thank you so much everyone! You’re all so sweet (and adorably funny. Obi Wan Blognomi? I love it!) Thank you so much for the feedback too. It’s great to know that what I’m writing makes sense outside my head!

    I had been meaning to learn how to do this for a while but then, in typical Small fashion, I procrastinated like crazy. Lucky for me, one of the submitted How To questions was for this topic (so if you have any questions, hint hint nudge nudge, feel free to submit one using the form!) I didn’t know how to do it, so I looked it up and then learned. I’m still not sure why Blogger corrupts the code on edit and how I can make that not happen, so just remember that when you do this!

    Feel free to comment back with your links if you try it out on your own blogs. I’d love to see that kind of feedback. If you want I’d also be happy to edit the original post to include your pages as examples (more link love for you!)

    ReplyDelete
  13. I am still lol'ing at Obi Wan Blognomi. That is hilarious!

    ReplyDelete
  14. Yay! Thank you SO SO MUCH! "Named Attribution Jumps"...now I finally know what this is called too. I'm going to bookmark this so I can update my pages :D

    ReplyDelete
  15. This is so useful, another thing I need to add to my blogging tech improvements! All your 'how to' posts will be keeping me busy in the Easter holidays. Thank you :)

    ReplyDelete
  16. Hmm I don't know if the blogger problem is what keeps happening but I did the code and kept getting 'there was an error while saving'. I plugged in your code to see if that worked but no :[

    ReplyDelete
  17. Ah I'm sorry I just figured it out xP
    And now I see what blogger does when you edit--so annoying!

    ReplyDelete
  18. You’re welcome everyone!

    Laura, Glad it all worked out. If you have any more problems just let me know or email me your code and I’ll see if I can find the problem. Isn’t it irritating!? I don’t know why that happens. It seems to only affect the code with the # symbol though, so at least you only have to fix half your code. You’ll see the corruption on all the codes, but if you leave it on the parts without the # symbol it should still work.

    ReplyDelete
  19. *sobs*

    I keep trying this and it wont work. :(
    http://www.theunreadreader.com/p/featured-on-when-im-not-reading.html

    I notice blogger keeps corrupting my code too. maybe that is the problem.

    ReplyDelete
  20. Oh no :( It looks like it works fine on your site when I try it?

    Every time you edit the post though Blogger will break it. That's why I copy it and have it saved in a word document. So every time I need to edit I can paste it in instead of retyping everything. Does that help?

    ReplyDelete
  21. OMG! I finally got it!!!

    *dances*

    Stupid blogger. It's so weird and frustrating sometimes.

    Thanks Smalls! I'm so happy!

    ReplyDelete
  22. w00t! I tried it with images and it seemed to work!

    http://www.theunreadreader.com/p/featured-on-when-im-not-reading.html

    I can't stop thanking you for the tutorial. It took a few tries because blogger is nuts but when it finally worked, I loved the result.

    ReplyDelete
  23. *happy dance* It looks great! You’re so totally welcome!

    ReplyDelete
  24. I just found you through a Google search, and THANK YOU. I'm a book blogger too, and not too great with HTML. I was trying to link to a widget on my page. Thanks so much for the help!

    ReplyDelete
  25. OMG! I love it! Thanks for the heads up!

    ReplyDelete
  26. I just added these for Bloggiesta! Awesomesauce!

    ReplyDelete
  27. Fabulous stuff! I've been all over your site all day and I plan on coming back again and again!

    Thank you for taking the time to do these wonderful tutorials.

    ReplyDelete
    Replies
    1. That's wonderful to hear, thank you! And of course you're so welcome :)

      Delete
  28. OKAY. I did it! After several rounds of trial and error, thanks to this tutorial, I now have named attribution jumps. Thank you so much for sharing!

    ReplyDelete
  29. I copied and pasted your attribution jumps. But I'm guessing I can't do that because it's not working for me. I have a new blog that I wanna do book reviews on, and I loved the alphabetical order format. But I don't think I did it right. If you have time, could you check it out? Thanks bunches <3
    http://wildcatloves.blogspot.com/p/review-index.html

    ReplyDelete

It's all about friendly conversation here at Small Review :) I'd love to hear your thoughts!

Be sure to check back again because I do make every effort to reply to your comments here.

Because I am absolutely terrible about following through with blog awards, I can't in good conscience accept any more. Thank you very much for thinking of me though!

Spam WILL be deleted. Attacks on myself or other comments WILL be deleted.

Related Posts Plugin for WordPress, Blogger...