Adding Navigation Code To Your Website

Adding the navigation code to your website

Welcome! This tutorial shows you how to add the navigation code to your website in a general way. Also find step-by-step instructions for some hosts n our help FAQ. There are literally hundreds of hosting companies out there and each has a different, though similar, website editing system. But, as long as your hosting service allows inserting HTML and javascript you should have no trouble.

Let's get started. To add the code to your site have TWO browser windows open: The first is your website editing screen, like this sample editor (yours will likely look a little different):

You need to be ready to edit the page (url) you have registered with WebRing.

Your second browser window will be opened to WebRing. You should either log in or click to your My Account area (this is where to go to start almost anything on WebRing). It should look something like this.

From here navigate to the URLs tab (don't have one? then you have not registered a URL yet. You can - click the "Register another URL" link you should see just below the gray tab bar).

Once you click the URLs tab the screen will change to a listing of your registered URLs (we've highlighted the URLs tab with the RED arrow in case you did not know before what the URLs tab is, or where it was):

Find the URL you want to personalize and click the "Get SSNB Code" link (This is the same screen you get the code to place on your page...)

You will find yourself on a screen that looks like this:

The goal is to copy the HTML in the text area above onto your website as HTML, not text. The copying and pasting part is easy - it's just like editing any other document.

Highlight the HTML in the text area by dragging your cursor across it from top left to bottom right.
On a windows system you Ctrl-C to copy the highlighted text to your clipboard area.
Now return to the first browser window, click an area on the page where you wish to insert the HTML, then
This is important: On this editor,and MOST editors it is necessary to click on the HTML widget control button. It's highlighted with the RED arrow below:

Note: Other editors will vary, but most will have a similar button. WebRing publisher, for example, has a button labeled with just HTML, no fancy graphics.

Most editors open a new window that allows you to paste the code you have stored on your clipboard from the WebRing screen onto the new window (on windows system use Ctrl-V to paste):

After pasting the code, click the save, update, publish or watever button your editor has to close the window and return to the main editor:

Note: The editor you use may not show the code. You should publish the page and then open it up using either a preview window, or visit your site directly.

Above we have the finished product with the WebRing "default" navbar shown. This generally shows when you first install the code, unless you have already submitted this URL to a ring, but you may see an actual navbar display.

Some Tips

Once the code is installed you will see some sort of navbar. If you see the navbar of the ring you have applied to it may only partially work. The next and prev(ious) links only work if your site is active in the ring.

To be made active not only does the code need to be installed, the manager must approve your site. They are much more likely to do this if they know your code is in place. To make sure they know, test it. You can only test the code from a site management screen once you have applied to a ring.

TESTing your code

Assuming you have already submitted the site to a ring and are now installing the code, you can test by visiting the site maintenance area for the membership.

To do this, return to the Memberships tab in your My Account area and navigate to the site management area for the site you wish to test:

The RED arrow on top shows the Memberships tab, the RED arrow below the site title indicates where to click to visit the site management area:

We have marked the two important places on this screen to make note of:

The top RED arrow indicates the status of your membership. It can be pending, active, or suspended. You want to be active so your site is listed on the ring's hub page (and gets your traffic!)
To get and stay active your site must show pass by the second RED arrow. Just installing your code won't make this happen right away (the system will test your site automatically, but this can take a day or two), so you want to click the Test link, and wait for the system to check your page for the proper code. If it changes to Pass you are done! If it remains Fail, the code may be installed incorrectly, it might be the wrong code, or in rare case the system is unable to read your page. In most cases your will now have a Pass site. If your site still fails click the help link at t he top of the screen and see if a help page provides some insight, or you can post a request in the webring member support forum. If you do, be sure to include your web site URL, the ring you are tryng to join and anything else that might be helpful. Someone will have a look and get back to you.