What are we talking about today?

Some days have themes. I don't necessarily post something in each of these topic areas every week.

Sunday: Church-related or spiritual things.
Monday: Running.
Tuesday: Books.
Wednesday: Transportation.
Friday: Green living.

01 August 2011

How to Make a Page Jump

A couple of weeks ago, I unveiled my fun new 1001 Ways to Reuse page (for which I am still taking suggestions, btw), and lamented that I didn't know how to make a page jump, so anyone looking for something would have to scroll. Then *cue superhero theme song* Liz came to the rescue with this page that has easy-to-follow instructions. Yay!

I got out my chalkboard for the
occasion. Source.
Except it turns out it needs some tweaking for Blogger. With some help from Chad and Chad's cousin Bob, we finally got there. And I thought, "Hey, I bet other people have this problem," and my first tutorial was born.

First of all, I'm talking about jumps that allow you to skip to the end of the page, or back to the top, or any other spot, not the "Read more" jump (which you can find under the settings tab if you want it). In your compose window,  click on the "Edit HTML" tab. You're going to use an A HREF tag for your first link, and a DIV ID tag for the destination. You can name your destination whatever you want, since no one will see it, but all of the sites I looked at cautioned against using spaces, so instead of "down here" you'd want to use "downhere". And make sure that the name matches exactly, or else the link won't work.

This is what the basic tags will look like:

<a href="#name">Link text</a>

<div id="#name">Destination text</div>

Still with me? Great. Because there's one more vital step if you're doing this in Blogger. When you put in the destination name, you must also include the page url in the HTML brackets. For one of your separate pages, it will look like this:

<a href="http://cheekyness.blogspot.com/p/1001-ways-to-reuse.html#foil">Aluminium foil</a>

For a regular post, it's a bit different:

<a href="http://cheekyness.blogspot.com/2011/08/how-to-make-page-jump.html#end">Bottom</a>

You'll see that the name of the destination is still there at the end and still has the # sign and the quotation marks. All of those are necessary. The destination text remains the same:

<div id="#name">Destination text</div>

And that's all there is to it! By the time I got to the bottom of my 1001 Reusables page, I felt like I could type this stuff in my sleep (although so far, I haven't). Not so bad, really.

Do you ever use page jumps? Is there something really important that I left out? Do you think I should pursue a career as a teacher?


The Golden Eagle said...

Funny you should bring this up--I was just adding page jumps to a website I'm working on. :) I'd never really thought about using them in Blogger . . . but no reason why it shouldn't work!

M Pax said...

Interesting tidbit. Thanks. :D

Su said...

@Eagle: I think humans must be hardwired to all think about similar things at the same time. ;)

@M: You're welcome!

Madeleine said...

I use page jumps on my websites but not on blogs. I tried adding open in separate window code but blogger went ballistic! So I abandoned that one LOL!

Looking forward to seeing your blogfest entry :O)

Talli Roland said...

Great explanation, Su! Thank you!

Su said...

@Madeleine: Yeah, it went ballistic on me, too. So I had to cry for help! ;)

@Talli: You're welcome!

Liz said...

Oops, I didn't realize that it didn't work the same in Blogger. I'm glad you had help to figure it out, and now I know where to come when I need to do this again. (I did the page jump thing before, but it did take me a while to get it to work.)

Su said...

No worries; apparently neither did anyone else! I couldn't find directions to add a jump in Blogger anywhere!