Code

(I cribbed large sections of this from the photoblogring, so please visit some of their sites as thanks.)
Below you can see some examples of the webring code that needs to be included somewhere on your photoblog. (If not the index page then somewhere logical such as a "links" page, please) Examples 1 & 2 have the minimum set of links required for inclusion of a site into the FTOTZ Webring. The way the links will appear using this code appears above the box containing the code. Copy the code above and paste it into your html where you want the links to show. These are just a few variations, and if you are familiar with html and css styles you can customise the look of your ring code even more, to suit your site. If you need help inserting your code, leave a comment.

Code Example 1: HTML

FTOTZ Webring | Join | Random| List

<div align="center"><div style="margin-top:4px; text-align:center;color:#BBBBBB;font-family:Trebuchet ms, Tahoma, Verdana, Georgia, Arial, sans-serif;font-size:11px; "><a href="http://ftotzwebring.blogspot.com/">FTOTZ Webring</a> | <a href="http://www.ringsurf.com/netring?ring=FTOTZWebring;action=addform">Join</a> | <a href="http://www.ringsurf.com/netring?ring=FTOTZWebring;action=rand">Random</a> | <a href="http://www.ringsurf.com/netring?ring=FTOTZWebring;action=list">List</a></div></div>

Explanation of the code: The div align="center" tag simply centers the links on the page. You can remove or change it if you wish to position the webring links differently. The div style tag is a handy way of specifying the look of your links. You can change the margin, alignment of text, font variety, size and color very easily using the style tag. Examine the code and change the values such as the color or text size to see the flexibility of the div style tags and to suit the look of the page you are placing the code in. The div style tag has similarities to using css (see next example), but is not as involved.

---

Code Example 2: CSS

<FTOTZ Webring | Join | Random | List

The css code: Insert this between your < head>< /head> tags.

<style type="text/css"> <!-- # FTOTZWebring { margin:4px; text-align:center; color:#BBBBBB; font-family:Trebuchet ms, Tahoma, Verdana, Georgia, Arial, sans-serif; font-size:11px; } #FTOTZWebring a, #FTOTZWebring a:link, #FTOTZWebring a:visited { color:#666666; text-decoration: none; font-weight:normal; } #FTOTZWebring a:active, #FTOTZWebring a:hover { color:#333333; } --> </style>

This is the HTML that goes with the CSS. Insert it where you want the code to appear on the page.

<div align="center"><div style="margin-top:4px; text-align:center;color:#BBBBBB;font-family:Trebuchet ms, Tahoma, Verdana, Georgia, Arial, sans-serif;font-size:11px; "><<a href="http://ftotzwebring.blogspot.com/">FTOTZ Webring</a> | <a href="http://www.ringsurf.com/netring?ring=FTOTZWebring;action=addform">Join</a> | <a href="http://www.ringsurf.com/netring?ring=FTOTZWebring;action=rand">Random</a> | <a href="http://www.ringsurf.com/netring?ring=FTOTZWebring;action=list">List</a></div></div>

Explanation of the code: The div id refers to a css id called "FTOTZWebring" which outlines how anything within the div tag specified with the id "FTOTZWebring" will look. For this to work you need to have a css style defined between your head and /head tags at the top of your html document.

---

Code Example 3:

FTOTZ Webring Join | List | Previous | Next | Random | Previous 5 | Next 5 | Skip Previous | Skip Next

<table border=0><tr><td><div style="{padding: 5px; border: solid 1px #0000aa;}"><center><b><a href="http://ftotzwebring.blogspot.com/">FTOTZ Webring<br><img src="http://www.Yourhost.com /FTOTZWebring.gif"></a></b><br></center><a href="http://www.ringsurf.com/netring?ring=FTOTZWebring;action=addform">Join</a> | <a href="http://www.ringsurf.com/netring?ring=FTOTZWebring;action=list">List</a> | <a href="http://www.ringsurf.com/netring?ring=FTOTZWebring;id= ***YourSiteID***;action=prev">Previous</a> | <a href="http://www.ringsurf.com/netring?ring=FTOTZWebring;id= ***YourSiteID***;action=next">Next</a> | <a href="http://www.ringsurf.com/netring?ring=FTOTZWebring;action=rand">Random</a> | <a href="http://www.ringsurf.com/netring?ring=FTOTZWebring;id= ***YourSiteID***;action=prev5">Previous 5</a> | <a href="http://www.ringsurf.com/netring?ring=FTOTZWebring;id= ***YourSiteID***;action=next5">Next 5</a> | <a href="http://www.ringsurf.com/netring?ring=FTOTZWebring;id= ***YourSiteID***;action=sprev">Skip Previous</a> | <a href="http://www.ringsurf.com/netring?ring=FTOTZWebring;id= ***YourSiteID***;action=skip">Skip Next</a></div></td></tr></table>

Explanation of the code:This example gives you all possible link options. Remember to replace ***YourSiteID*** with the site number you were provided when you registered and replace www.Yourhost.com with the address of your image host site. (Feel free to use my icon just upload it to your own hard drive or server first. If you're graphically inclined, feel free to make your own.)