rootring

rooted in blogs, linked in a ring

Platform guides

Blot.im

Best placement: Templates → fork an editable template → add the snippet in footer.html or another shared layout file.

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

Steps

  1. Open your Blot dashboard.
  2. Go to Templates.
  3. If your current template is not editable, click Fork to create a copy you can edit.
  4. Open the template editor. You will usually see files like index.html, entry.html, footer.html, and style.css.
  5. Open footer.html and paste the snippet there so it appears on every page.
  6. Replace YOUR-SITE with the URL rootring should use for your blog and save.
  7. Open your homepage and a post page to confirm it appears.

If your template has no separate footer file

Some templates do not have a separate footer.html. In that case, add the snippet near the bottom of the main layout file, often entry.html for posts and index.html for the homepage. A shared layout is better than placing it on only one page.

Need a different look?

Once you have the snippet in the right template file, you can use a different version 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.