Guide: Adding a Floating Table of Contents in Blogger

Incorporating a floating Table of Contents (TOC) within your Blogger posts not only enriches the user experience but also boosts SEO optimization by allowing for easier navigation through your content. This functionality proves particularly beneficial for lengthy blog posts, tutorials, or informative guides.

This guide will walk you through the process of implementing a floating TOC, alternatively known as a sticky TOC, that remains visible as readers scroll down the page.

 Step-by-Step Instructions for Adding a Floating TOC in Blogger

Step 1: Access the Blogger Theme Editor

• Navigate to the Blogger Dashboard

• Choose your blog

• Click on Theme > Customize > Edit HTML

Step 2: Integrate HTML, CSS, JS for the Floating TOC

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<!-- TOC Button & Panel -->
<div class='sticky-toc-wrapper'>
  <button class='toc-toggle-button' onclick='toggleBottomTOC()'>
    
    <svg class='toc_icon' fill='white' height='20' viewBox='0 0 24 24' width='20' xmlns='http://www.w3.org/2000/svg'><g stroke-width='0'/><g stroke-linecap='round' stroke-linejoin='round'/><g><path d='M3 9h14V7H3v2zm0 4h14v-2H3v2zm0 4h14v-2H3v2zm16 0h2v-2h-2v2zm0-10v2h2V7h-2zm0 6h2v-2h-2v2z'/></g></svg> Table of Contents</button>
  <div class='toc-panel' id='bottomTOC'>
    <div class='toc-panel-header'>
      <span>Table of Contents</span>
      <button onclick='toggleBottomTOC(true)'>&#10006;</button>
    </div>
    <ul id='bottomTOCList'/>
  </div>
</div>

<style>
/* === Wrapper Sticky Bottom on Mobile === */
.sticky-toc-wrapper {
  position: fixed;
  bottom: 0;
  width: 100%;
  z-index: 9999;
  display: flex;
  justify-content: center;
  pointer-events: none;
}

/* === Button Style === */
.toc-toggle-button {
  background: #004aad;
  color: white;
  border: none;
  font-weight: 600;
  font-size: 15px;
  padding: 15px 20px;
  border-radius: 0;
  width: 100%;
  max-width: 100%;
  cursor: pointer;
  pointer-events: all;
  box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
  transition: background 0.3s ease;
  display: flex;
  justify-content: center;
  align-items: center;
}
.toc-toggle-button:hover {
  background: #003a90;
}
  
svg.toc_icon {
    margin-right: 5px;
}

/* === TOC Panel === */
.toc-panel {
  position: fixed;
  bottom: -100%;
  left: 0;
  right: 0;
  width: 100%;
  max-height: 80vh;
  background: #fff;
  box-shadow: 0 -3px 15px rgba(0,0,0,0.2);
  overflow-y: auto;
  transition: bottom 0.4s ease;
  pointer-events: all;
  border-radius: 12px 12px 0 0;
}
.toc-panel.open {
  bottom: 48px; /* Height of the sticky button */
}
.toc-panel-header {
  background: #f2f2f2;
  padding: 12px 16px;
  font-weight: 600;
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #e0e0e0;
}
#bottomTOCList {
  padding: 16px;
  margin: 0;
  list-style: none;
}
#bottomTOCList li {
  padding: 8px 0;
}
#bottomTOCList li.h3 {
  padding-left: 16px;
  font-size: 14px;
}
#bottomTOCList a {
  text-decoration: none;
  color: #004aad;
}
#bottomTOCList a:hover {
  text-decoration: underline;
}

/* === Desktop Styling === */
@media (min-width: 769px) {
  .sticky-toc-wrapper {
    width: auto;
    left: 16px;
    right: auto;
    justify-content: flex-end;
  }
  .toc-toggle-button {
    width: auto;
    border-radius: 0px;
    padding: 15px 30px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
  }
  .toc-panel {
    width: 320px;
    left: 16px;
    right: auto;
    border-radius: 12px;
  }
  .toc-panel.open {
    bottom: 60px;
  }
}
</style>

<script>
//<![CDATA[
function toggleBottomTOC(forceClose = false) {
  const toc = document.getElementById("bottomTOC");
  if (forceClose) {
    toc.classList.remove("open");
  } else {
    toc.classList.toggle("open");
  }
}

function generateBottomTOC() {
  const container = document.getElementById("bottomTOCList");
  const content = document.getElementById("post-toc") || document.querySelector(".post-body");
  if (!container || !content) return;

  const headings = content.querySelectorAll("h2, h3");
  let count = 0;

  headings.forEach(h => {
    const id = "toc-item-" + count++;
    h.setAttribute("id", id);

    const li = document.createElement("li");
    li.className = h.tagName.toLowerCase();

    const link = document.createElement("a");
    link.href = "#" + id;
    link.textContent = h.textContent;

    link.addEventListener("click", () => toggleBottomTOC(true));

    li.appendChild(link);
    container.appendChild(li);
  });
}

document.addEventListener("DOMContentLoaded", generateBottomTOC);
//]]>
</script>

</b:if>

Step 3: Save Your Theme

Select the Save option at the top right corner of the editor. Proceed to revisit one of your blog posts and refresh the page.

Make sure your blog posts appropriately utilize <h2> & <h3> tags to automatically generate a well-structured TOC. Tweak the CSS properties such as top, right, width, etc., to align with the aesthetics of your theme.

In Conclusion

Implementing a floating table of contents significantly enhances the usability and navigation experience of your Blogger posts, especially those featuring comprehensive content. It promotes user engagement and facilitates swift navigation to the relevant sections.