rootring

Best placement: Layout → Add a Gadget → HTML/JavaScript (footer or sidebar; site-wide).

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

Mobile view note: On Blogger, sidebar or footer gadgets often do not appear in mobile view, even when they work correctly on desktop. For rootring, desktop visibility is enough. If you also want the links to appear on mobile, consider putting them on a dedicated public page instead.

Steps

Open your blog in Blogger and go to Layout.
In the area you want, click Add a Gadget. A footer is ideal, but a sidebar also works.
Select HTML/JavaScript.
Paste the snippet and replace YOUR-SITE with the URL rootring should use for your blog.
Click Save in the gadget dialog.
Back on the Layout page, click Save arrangement.
Open your homepage and confirm the links appear.

If your theme has no footer gadget area

If your theme does not show a footer gadget area, use the sidebar instead. The important part is that the links are visible on a stable public page.

Need a different look?

The placement stays the same even if you use a different design. Browse the snippet gallery and use whichever version fits your blog best.

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.