rootring

rooted in blogs, linked in a ring

Platform guides

Bear Blog

Best placement: Settings → Header and footer directives → Footer directive (site-wide).

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

Steps

  1. Open your Bear Blog Dashboard.
  2. Click your blog name, then open Settings.
  3. Open Header and footer directives.
  4. Paste the snippet into Footer directive.
  5. Replace YOUR-SITE with the URL rootring should use for your blog.
  6. Save, then open your homepage to confirm the links appear.

If site-wide injection is unavailable

If you do not see Header and footer directives, your current plan or setup may not support site-wide injection. In that case, create a public page called Webring, paste the snippet there, and link to it from your homepage. Set your Ring page URL to that page for verification if needed.

Need a different look?

Once you know where to place the snippet, you can swap in a different design from the snippet gallery.

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.