rootring

rooted in blogs, linked in a ring

Platform guides

Tumblr

Best placement: Settings → your blog → Custom theme → Edit theme → Edit HTML → paste near </body>.

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

Steps

  1. Open Tumblr and go to Settings.
  2. Select the blog you want to edit.
  3. Under Custom theme, click Edit theme.
  4. Click Edit HTML.
  5. Paste the snippet just above the closing </body> tag.
  6. Replace YOUR-SITE with the URL rootring should use for your blog and click Save.
  7. Check your homepage and a post page.

Notes

If your theme has a clear <footer> section, you can place it there instead. The end of the theme near </body> is usually the most reliable spot.

Need a different look?

After you know where the snippet belongs in your theme, you can use any 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.