How to Add a Floating Table of contents in Blogger
Adding a floating Table of Contents (TOC) in Blogger not only enhances user experience but also helps with SEO by making your content easier to navigate. This feature is especially useful for long-form blog posts, tutorials, or guides.
In this tutorial, you’ll learn how to add a floating TOC (also known as a sticky TOC) that follows the reader as they scroll down the page.
📌 Step-by-Step Guide to Add Floating TOC in Blogger
Step 1: Open Blogger Theme Editor
- Go to Blogger Dashboard
- Select your blog.
- Click on Theme > Customize > Edit HTML
Step 2: Add HTML, CSS, JS for Floating TOC
<b:if cond='data:blog.pageType == "item"'>
<!-- 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)'>✖</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
Click the Save button in the top-right corner of the editor. Go back to one of your blog posts and refresh the page.
Ensure your blog posts use <h2> & <h3> tags properly to generate a clean TOC. You can adjust the top, right, width, or other CSS properties to better fit your theme.
Conclusion
A Floating Table of Contents is a great way to improve usability and navigation on your Blogger posts, especially for long-form content. It keeps users engaged and makes it easier for them to jump to the sections they care about.
If you found this helpful, consider sharing the post or leaving a comment below!
Read Also: How to Add Responsive HTML Table in Blogger.
