The alt-webring system will automatically create a basic navigation panel similar to this one (below) for your new ring. If you want to customize your ring's navigation panel you are welcome to do so, you can change just about anything your heart desires.

Don't copy the code from this example to use for your ring, it won't work as-is, it must be customized by the system (after you've done your customizing, that is).


Home/Join | List | Next | Prev | Rand

Before we get into creating the HTML code fragment here's a few good practices to keep in mind when making navigation panels.

Good habit #1
Put the target _top attribute onto all your links (so that your ring's surfers can break out of framed sites).

Good habit #2
Remember to put alt tags on your images.

Good habit #3
Enclose your code fragment in comments (which are invisible to browsers). Find out how to make a HTML Comment here.

Good habit #4
Include a named anchor in your navigation panel, this is a good idea for a couple of reasons. Find out how to make a named anchor here.

Good habit #5
Centre your panel on the member's page. They just look best that way, simple as that.

Think of the design. What image do you want to project? Is your ring's subject serious or light-hearted? How are you going to build it? Here's some examples, as you can see, there's various formats you can use.

Something minimalist like this?

The XYZ Ring
< | H | L | ? | >

Put it into a table?

The XYZ Ring
Next | Previous | Random | List | Home/Join

Use a logo graphic?

XYZ Web Ring
Next | Previous | Random | List | Home/Join

Or how about using an image map?

XYZ Web Ring Go to the next site in this ring.php Go to the previous site in this ring.php Go to a random site in this ring.php View the list of sites in this ring.php View the ring home page.php Powered by alt-webring.php

STEP 2 - MAKE A GRAPHIC (if required)
After you've decided the design aspects, fire up your graphics editor and create a logo graphic for your ring. Keep in mind that on the alt-webring system your graphic size must not exceed 25Kb or 250x250 pixels.

There is no limit as to the amount of HTML code you can use to make your navigation panel, the only limitation imposed concerns the graphic size.

Now that you've got your various elements decided, you can assemble a basic navigation panel. Go ahead and whip one up, putting in the basic bits that you want. It'll probably look something like this one below, note the lack of links, we'll get to them next.

The XYZ Ring
Next | Previous | Random | List | Home

What links to use?
Decide on the basic links to be used. The absolute minimum needed for proper ring navigation are Next, Previous and List. The complete set of links you can use are listed below.

IMPORTANT: You must replace RINGID with your particular webring's ringid. Note that the ringid is case-sensitive and remember there are no spaces in URLs.

Next 5
Previous 5


Did you notice in the URLs above that the siteid is inside a set of [brackets]?

These brackets indicate a value that the alt-webring system will automatically insert for you when a member requests their code fragment. This value can be a siteid, the ring or site title, or the site's webmaster name.

Use the auto-value field in your navigation panel code exactly as you see it below.

  Site ID
Ring title
Site title
The site's webmaster name

Keep the alt-webring link back?
Are you going to retain the link back to alt-webring? You can remove the alt-webring link if you really want to, but I'd prefer that you didn't of course!

Leaving it there promotes the system and encourages new visitors who bring traffic to the site which benefits everyone.

If you are going to keep the link back, here's the code, it'll look like this - alt-webring

(Right-click inside the box below and select "Highlight All", then right-click again on the highlighted text and select "Copy" to get this code)

Logo graphic - where you going to keep it?
If you use a graphic in your navigation panel where do you want it to be stored? Do you want each member site to keep a copy on their web hosts server?

This means members having to download the graphic as well as the code fragment. And it also means it's harder to change the graphic because there's all those copies held out there on the member sites.

A neater way of doing it (if your web host allows hot-linking), is to hold the ring's graphic on your server and let each member site's navigation panel call it from there. Put it into the same folder on your site as the ring's home page, your link for the graphic will look something like this:

<img src=" width="250" height="100" border="0" alt="XYZ Webring">

The benefits of linking to the graphic on your server are twofold. The first benefit is simplicity, it's one less thing for the member webmasters to have to do when adding your fragment to their page - one less thing to go wrong, in other words! ;-)

The other benefit is that you can easily change the graphic. It's a good way to keep your ring fresh-looking and spontaneous! If you create a selection of graphics for your ring you can rotate them (by renaming each graphic in turn) and people will be wondering which will pop up on their navigation panel!

Put it all together!
Now go back to the navigation panel you made earlier and add the URLs and auto-value fields you want to make the navigation panel links. Drop in a graphic if you're using one (don't forget the alt tag) and then the alt-webring link back if you're including that.

Want to know how to put alt tags onto your links like in my examples above? Find out how here.

Get on to the Net and open the alt-webring site. Log in to Ring Admin and click the "Customize" button then on the next screen click the "HTML Code' button. A page will come up with some instructions and you will find a text box that contains the ring navigation panel code.

Cut-and-paste your new code into this box (replacing what's there) and click the "Preview" button at bottom. Another page will come up displaying how your new panel will look, if it's okay click the "Save Code" button.

Now you're finished! Whenever a new site registers for your ring they'll be sent a copy of your new code (customized for their siteid of course).

If you ever want to restore the default navigation panel there's a button to do that on the final customize page we looked at (the one where you cut-and-pasted your new code into the text box).

As in most things, customizing your first navigation panel is the hardest, after that you'll have the knack and you'll be able to whip one up in a breeze!

A bit later you'll start experimenting with different panel layouts and maybe get into image maps, it all depends on how fancy you want to get. Explore other people's navbar stacks and you'll soon find interesting ones to get inspiration from next time you're creating your own.