A reader e-mailed me about this the other day {hi Sunni!}, she wanted to add a link list that would jump to a certain place on a blog post. I know I've done this before {I took an HTML class way back in high school, let's imagine that wasn't over 10 years ago...}, and I knew it could be done, but I wasn't sure how it would work within blog posts. Wouldn't you know, it's super easy, so let me share a little bit of code with you!
First, choose the places you're going to want the page to jump to. I'm going to use the top of the page and the bottom for this demonstration.
Switch to HTML mode {instead of "Compose" in blogger}, at the top add the code: <a name="top">, and at the bottom add the code: <a name="bottom">. I've added both to the HTML of this post - both in the code and in the text, so you can see where they are {note, you can choose whatever words you want to identify the location!}.
Then, create a link list. There are two options, if you're linking within the same post, the links will look like this:
<a href="#top">Top</a>
<a href="#bottom"> Bottom</a>
If you're linking from outside the page, your links will look like this:
<a href="http://www.cloverandviolet.com/2011/09/blog-tips-creating-jump-links.html#top">Top</a>
<a href="http://www.cloverandviolet.com/2011/09/blog-tips-creating-jump-links.html#bottom"> Bottom</a>
When the links are clicked they will direct the page to jump to the <a name=""> that corresponds to the <a href="#"> section of the post, it will be at the very top of the window {see it there in bold?}. This is a great way to organize a tutorials page, FAQ, or other informational post {or just use it for fun!}.
As always, if there's anything you'd like to learn how to do, just send me a little e-mail and I'd be happy to try to work it out for you {in fact it may be something I've been wanting to try myself, like this...I think I need to redo the FAQ page now!}.
Ok, I now feel like a little old lady (lol). We didn't even have computers in schools when I was in high school. Though I have no idea what this posting was about,I want to thank you for it because you have just given me something new to look into and learn, and in so doing have helped me stay young.
ReplyDeleteWow! That's easy... a great tool for directing the boys from certain parts of the post...LOL!
ReplyDeleteThis is the best and like Jo I feel quite old. That's it...I am signing up for an html class!
ReplyDeleteI linked to you today! Thank you so much for answering this question! I {heart} Jennie!
ReplyDeleteI learned a lot from your code. I can also use this in my blog. I want also to make dragging navigations more creative.
ReplyDeletedee.isidoradesigns@msn.com