Writers Ring Navigation Code & Graphics

Navigation Shouldn't Be a Mystery

If you have already installed the Javascript code for the new Webring navbar, the bar for the Writers Ring will appear on your page as soon as you are accepted.

If you need the Javascript code for the navbar, sign in at Webring, click on "My Rings", and click on "Get Navbar" beside your Writers Ring page.

Lynx (text-only) and some older graphic browsers, however, cannot use Javascript. To maximize the traffic through the ring (and to your page) I'd appreciate you also copying one of the following sets of HTML code.

You must have either the navbar or the HTML code on your page, for the webring to work.

This page will demonstrate the standard webring code and give you some help in putting the code and the logo into your page.

There are reasons for using a standard set of code to link a webring, besides the sheer egotism of webring managers.

For the webring to work as designed, the links must be as written.
For visitors to the ring to be able to surf without confusion, each ring should be easily identifiable.

I've laid out many different options to choose from. Writers are creative folks, however; you may have a layout idea of your own. Please make sure that the links you use are coded like these, however, so that they work. If someone clicks a link that doesn't work, they usually don't try to go any further in the ring, and we all lose a reader.

If You Like Your Own Layout

Most of you can use your existing layout with only a few coding corrections

This is the basic form of a webring link command:

: http://X.webring.com/go?ring=medusa&id=3&next

with the last command changing (prev, sprev, next, skip, prev5, next5, random). Some of you can keep the layouts you now have, just by changing ";id=3;" to "&id=3&" (substituting, of course, your own id number.)

Please use the "Home" command instead of the address of the home page. Then the home page can move again, any number of times, without anyone needing to do more re-coding.

The ring hub (list) command has changed the most radically. The new form is:

: http://nav.webring.com/hub?ring=medusa

If you are using frames, be sure that you include the tag TARGET="_top" in all links that go outside of your site. Even if you are'nt using frames, you might want to get into this habit; it will make life easier if you decide to try frames later.

Other Code Layouts

If you just joined the ring, you are no longer sent customized HTML code when you join the webring; only the Javascript code for the navbar. Copy the set of code here that most appeals to you, then make the following changes:

Replace my name with your name.
Replace my email address with your email address.
Replace my site ID with your site ID.
Replace the location of the images with your own location. (This you will have to do even with the customized code.)

I do not insist that you use webring graphics -- this is a readers ring, and the emphasis is on text content. If you want to use your own graphics, please check with me first -- I want to make sure visitors to the ring don't become confused about which ring they are on. I may make yours the standard graphics for the ring!

If you do choose to use my graphics, please copy them to your own server. The one change you will need to make to the customized code is to put the correct-for-you directory and filename in the logo image tag.

: Three-graphic table version:

This Writers Ring site is owned by Anitra.

: That's what it looks like. Here's the code:

<table width="400" align="center">
<tr>
<td align=CENTER colspan="3">
This <a href="http://X.webring.com/go?ring=medusa&home" TARGET="_top">Writers Ring</a>
site is owned by <a href="MAILTO:anitra@spamcop.net?subject=WritersRing">Anitra</a>.
</td>
</tr>
<tr>
<td align=CENTER valign=TOP>
<a href="http://X.webring.com/go?ring=medusa&id=3&prev" TARGET="_top">
<img src="images/writers3.prev.gif" alt="Previous Site" border="0" height="85" width="100"></a>
<br>
<a href="http://X.webring.com/go?ring=medusa&id=3&prev" TARGET="_top">Previous</a>
<p>
<a href="http://X.webring.com/go?ring=medusa&id=3&prev5" TARGET="_top">Previous 5 Sites</a></p>
<p>
<a href="http://X.webring.com/go?ring=medusa&random" TARGET="_top">Random Site</a>
</p>
</td>
<td align=CENTER valign=TOP>
<p>
<a href="http://X.webring.com/go?ring=medusa&home" TARGET="_top">
<img src="images/writers3.jpg" alt="Home Site" border="0" height="131"
width="175"></a>
<br>
<a href="http://X.webring.com/go?ring=medusa&home" TARGET="_top">Home</a></p>
</td>
<td align=CENTER valign=TOP>
<a href="http://X.webring.com/go?ring=medusa&id=3&next" TARGET="_top">
<img src="images/writers3.next.gif" alt="Next Site" border="0" height="85"
width="100"></a>
<br>
<a href="http://X.webring.com/go?ring=medusa&id=3&next" TARGET="_top">Next</a>
<p>
<a href="http://X.webring.com/go?ring=medusa&id=3&next5" TARGET="_top">Next 5 Sites</a></p>
<p>
<a href="http://nav.webring.com/hub?ring=medusa" TARGET="_top">List Sites</a>
</p>
</td>
</tr>
</table>

: Single-graphic table version:

This Writers Ring site is owned by Anitra
Previous		Next
Prev 5 Sites		Next 5 Sites
Random Site		List Sites

: That's what it looks like. Here's the code:

<table cellspacing=0 cellpadding=0 cols=3 width="343" ALIGN=center border="0">
<caption>This <a
href="http://X.webring.com/go?ring=medusa&home">Writers Ring</a> site
is owned by <a
href="MAILTO:anitra@spamcop.net"subject=WritersRing">Anitra</a></caption>
<tr>
<td valign="top" align="right" HEIGHT="40" width="84"> <a href="http://X.webring.com/go?ring=medusa&d=3&prev" TARGET="_top">Previous</a>
</td>
<td rowspan="3" width="170"><a
href="http://X.webring.com/go?ring=medusa&home"><img src="images/writers3.jpg" height="131" width="175" BORDER="0" ALT="Writers Ring Home Page"></a></td>
<td align="left" valign="top" width="84"> <a href="http://X.webring.com/go?ring=medusa&d=3&next" TARGET="_top">Next</a></td>
</tr>
<tr>
<td valign="middle" align="right" HEIGHT="40" width="84">
<a href="http://X.webring.com/go?ring=medusa&d=3&prev5" TARGET="_top">Prev 5 Sites</a>
</td>
<td height="54" align="left" valign="middle" width="84"> <a href="http://X.webring.com/go?ring=medusa&d=3&next5" TARGET="_top">Next 5 Sites</a></td>
</tr>
<tr>
<td align="right" valign="bottom" HEIGHT="40" width="84">
<div align=right><a href="http://X.webring.com/go?ring=medusa;random" TARGET="_top">Random
Site</a> </div>
</td>
<td valign="bottom" align="left" width="84"> <a href="http://nav.webring.com/hub?ring=medusa" TARGET="_top">List
Sites</a></td>
</tr>
</table>

: Non-table graphic version:

: That's what it looks like. Here's the code:

<p align="center">
This <a href="http://X.webring.com/go?ring=medusa&home">Writers Ring</a> site is owned by
<a href="MAILTO:anitra@spamcop.net"subject=WritersRing">Anitra</a> <br>
<a href="http://X.webring.com/go?ring=medusa&home">
<img src="../images/writers3.jpg" height="131" width="175" border="0" alt="Writers Ring Home Page"></a>
<b>
| <a href="http://X.webring.com/go?ring=medusa&d=3&prev" target="_top">Previous</a>
| <a href="http://X.webring.com/go?ring=medusa;random" TARGET="_top">Random</a>
| <a href="http://X.webring.com/go?ring=medusa&d=3&next" target="_top">Next</a>
| <a href="http://nav.webring.com/hub?ring=medusa&id=3&hub">List</a>
| <a href="http://X.webring.com/go?ring=medusa&home">Join</a> |
</b>
</p>

All-text version:

: That's what it looks like. Here's the code:

<p align="center">
This <a href="http://X.webring.com/go?ring=medusa&home">Writers Ring</a> site is owned by
<a href="MAILTO:anitra@spamcop.net"subject=WritersRing">Anitra</a> <br>
<b>
| <a href="http://X.webring.com/go?ring=medusa&d=3&prev" target="_top">Previous</a>
| <a href="http://X.webring.com/go?ring=medusa;random" TARGET="_top">Random</a>
| <a href="http://X.webring.com/go?ring=medusa&d=3&next" target="_top">Next</a>
| <a href="http://nav.webring.com/hub?ring=medusa">List</a>
| <a href="http://X.webring.com/go?ring=medusa&home">Join</a> |
</b>
</p>

: Some minimal links:

Graphic to ring hub (list):

: Code:

<P ALIGN = CENTER>Graphic to ring hub (list):<BR> <a href="http://nav.webring.com/hub?ring=medusa"> <img src="images/writers3.jpg" height="131" width="175" border="0" alt="Writers Ring"></a></P>

Text link to ring hub (list):
This Writers Ring site is owned by Anitra

: Code:

This <a href="http://nav.webring.com/hub?ring=medusa">Writers Ring</a> site is owned by <a href="MAILTO:anitra@spamcop.net"subject=WritersRing">Anitra</a>

Back to the Writers Ring Home Page
Anitra's Writing Page
Home Page