Navigation of the ring

The navigation bar is without a doubt the singlemost important aspect of any webring. Indeed, it is that bar which is responsible for linking all the sites together, to create the ring. Due to its importance, its not surprising theres an entire page devoted to it.

Over the years, both Yahoo and have introduced standard navigation bars, using Javascript. This is known specifically as the SSNB, and is the one displayed on the homepage of this site. Whereas that may be the easiest code to install on a page, I understand that its appearance will not always be to everyone's taste. Hence this page is designed to offer some alternatives. Sadly the SSNB also does NOT allow a direct link to the ringvote anymore, so the alternative HTML codes below are recommended in favour of it now.

How do I get the navigation code?

Well, assuming you've joined, you should have an ID number from Webring. This information is contained within the email they automatically send you out. In order to add the nav code, you can either follow the instructions in that email for the default SSNB (no longer recommended for reasons above), or use my wizard below to generate some alternatives.

Step 1 - Select Your site

If you are an old member coming here to find some updated Navigation code for your site, and you cant remember your site ID, you can simply select its name from the list, and the wizard will fill in the number. If you're a new member, the site wont be in the list yet, so you'll have to type in the ID from your email manually.

   ID =

Step 2 - Select your Navigation Bar

The list below contains a variety of different styles and colours for the navigation bar. When you click a link, a preview and description is shown below. They all do basically the same thing; just pick the one that best matches the look of your site. I plan to work on more of these in the future - any ideas, let me know.

Standard Webring SSNB | Classic | Miniature | El-ahrairah

Chosen Navigation Bar =  

Step 3 - Site Details

This section is only relevant if you are using the 'Classic' nav bar above. There are some additional details required to make that particular bar work. If you havent selected the Classic bar, this step can be skipped

My site's Background color/image is:  Dark

Step 4 - Generate the code

That's it. Time to generate the code, by clicking the 'Get Nav Code' button. If there are any errors, you will be alerted. Unless you're using the SSNB, in which case you'll be redirected to a webring page, a preview of your customised bar will be shown below (Ie - with your details filled in where necessary). The actual HTML code will be shown underneath that.

If you are happy with how it looks, copy all of the text from the box, paste it into the source code for your homepage, and upload the page to your host. All of the images are hosted on my server, so you dont even have to upload any additional image files.

If there is a problem with the code, go back and change the settings, then click the 'Get Nav Code' button again.

 My Custom Navigation Bar

Back to Home