rootring

rooted in blogs, linked in a ring

Platform guides

Static sites

Best placement: Add the snippet to your site-wide footer, layout, or shared component, then redeploy.

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

Common steps

  1. Find the file that renders your site-wide footer, layout, or shared component.
  2. Paste the snippet there so it appears on every page.
  3. Replace YOUR-SITE with the URL rootring should use for your blog.
  4. Build or redeploy your site and check your homepage.

Where to put it

Need a different look?

Static sites are a good fit for both the default snippet and more styled versions. Browse the snippet gallery if you want something more branded or more visual.

Recommended snippet

Replace YOUR-SITE with the URL rootring should use for your blog. Usually this is your homepage. If your ring links live on a separate public page, use that page URL instead.

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>

Want a different look? Browse the snippet gallery.

Next.js / React snippet

Replace BASE_URL with https://rootr.ing.

<nav aria-label="Webring" className="webring webring--default">
  <span className="webring-label">rootring</span>
  <a href="BASE_URL/prev?site=YOUR-SITE">← Prev</a>
  <a href="BASE_URL/random">Random</a>
  <a href="BASE_URL/next?site=YOUR-SITE">Next →</a>
  <a href="BASE_URL/directory">Directory</a>
</nav>

Verification tip

Site-wide placement is strongly recommended. If you only add the snippet to one page, verification may fail if a different page is checked. If your site uses a subpath, make sure the URL in YOUR-SITE matches the public canonical URL you applied with.