rootring

rooted in blogs, linked in a ring

Platform guides

Squarespace

Best placement: Site-wide footer code injection when available, or a footer code block.

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

Option A: Site-wide code injection

  1. Open your Squarespace site editor.
  2. Find the site-wide Code Injection area. The exact menu wording may vary by version.
  3. Paste the snippet into the Footer field and save.
  4. Replace YOUR-SITE with the URL rootring should use for your blog, then check your homepage.

Option B: Footer code block

  1. Edit your site footer section, or add a footer block if your template supports it.
  2. Add a Code block and paste the snippet.
  3. Replace YOUR-SITE with the URL rootring should use for your blog and save.

If code injection is unavailable

Some Squarespace plans do not include site-wide code injection. If you cannot find it, use the footer code block method. If menu names differ from older guides, search your settings for Code Injection.

Need a different look?

After you have the placement sorted out, you can swap in 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.