rootring

rooted in blogs, linked in a ring

Setup

Add the ring snippet to a public page on your site so readers can move through the ring.

Add the snippet to your footer, sidebar, or shared layout. At minimum, it should appear on your homepage or another stable public ring page. Ideally, it appears on every page.

In most cases, rootring should use your homepage URL. If your ring links live on a separate public page, use that page's URL instead.

Verification checks that your ring links are visible on the public page rootring should use for your blog.

Platform guides WordPress, Ghost, Substack, static sites, and more. Snippet gallery Browse alternate styles and copy the version you like.

This replaces YOUR-SITE in the examples on this page.

Quick start

  1. Copy the snippet below.
  2. Replace YOUR-SITE with the URL rootring should use for your blog.
  3. Usually this is your homepage. If your ring links live on a separate public page, use that page URL instead.
  4. Paste the snippet into your footer, sidebar, or shared layout.
  5. Check that it appears on the public page you want rootring to use.

Recommended snippet

Branded, compact, theme-friendly, and easy to understand at a glance.

Show code 
<nav class="webring webring--rail-default" aria-label="Webring">
  <span class="webring-label"><a href="https://rootr.ing/">rootring</a></span>
  <div class="webring-links">
    <a href="https://rootr.ing/prev?site=YOUR-SITE">Prev</a>
    <a href="https://rootr.ing/random">Random</a>
    <a href="https://rootr.ing/directory">Directory</a>
    <a href="https://rootr.ing/next?site=YOUR-SITE">Next</a>
  </div>
</nav>

<style>
  .webring--rail-default {
    margin-top: .5rem;
    display: flex;
    gap: .9rem 1rem;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    padding-top: .45rem;
    border-top: 1px solid color-mix(in srgb, currentColor 24%, transparent);
    font: inherit;
  }
  .webring--rail-default .webring-label {
    opacity: .78;
    letter-spacing: .04em;
    text-transform: lowercase;
    font-size: .84rem;
  }
  .webring--rail-default .webring-links {
    display: flex;
    gap: .8rem;
    flex-wrap: wrap;
  }
  .webring--rail-default a {
    text-decoration: none;
  }
  .webring--rail-default a:hover {
    text-decoration: underline;
  }
</style>

Alternate default

A slightly more visible widget if you want the ring to stand out more clearly.

rootring
webring nav
Prev Random Directory Next
Show code 
<div class="webring webring--split-default" aria-label="Webring">
  <div class="webring-left">
    <div class="webring-name"><a href="https://rootr.ing/">rootring</a></div>
    <div class="webring-note">webring nav</div>
  </div>
  <div class="webring-right">
    <a href="https://rootr.ing/prev?site=YOUR-SITE">Prev</a>
    <a href="https://rootr.ing/random">Random</a>
    <a href="https://rootr.ing/directory">Directory</a>
    <a href="https://rootr.ing/next?site=YOUR-SITE">Next</a>
  </div>
</div>

<style>
  .webring--split-default {
    margin-top: .5rem;
    display: flex;
    gap: 1rem;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    padding: .75rem .9rem;
    border: 1px solid color-mix(in srgb, currentColor 25%, transparent);
    border-radius: .9rem;
    background: color-mix(in srgb, currentColor 6%, transparent);
    font: inherit;
  }
  .webring--split-default .webring-name {
    font-weight: 700;
  }
  .webring--split-default .webring-note {
    opacity: .75;
    font-size: .9rem;
  }
  .webring--split-default .webring-right {
    display: flex;
    gap: .85rem;
    flex-wrap: wrap;
    align-items: center;
  }
  .webring--split-default a {
    text-decoration: none;
    border-bottom: 1px solid color-mix(in srgb, currentColor 45%, transparent);
  }
  .webring--split-default a:hover {
    border-bottom-color: currentColor;
  }
</style>

Want a different look? Browse the snippet gallery.

Want to style it yourself?

You can use any snippet here as a starting point, or write your own. The important part is that the links stay visible on the public page rootring should use for your blog, and that the site=YOUR-SITE value matches that page URL.