A table of contents, also called a ToC, is one of the most important parts of your blog posts. It is a tool that makes it easy for readers to quickly navigate through different sections of your blog post. Table of contents displays the important points of the content and works as navigation.
Rather than keep on scrolling, the reader just clicks on the point in the TOC and reaches that point without scrolling.
In WordPress, you have multiple plugins that create a table of contents automatically. But in Blogger you have to use a different code.
Here is the easiest solution for a blogger.
How to Create a Table of Contents (TOC) in Blogger?
- Go to Blogger.com.
- Log in and access your blog.
- Click on "Theme."
- On the dropdown button, click on "Edit HTML."
- Now copy the following code and add it before the </body> tag, and save it.
<!--Table of Contents Script with Lazy Loading-->
<script>
(function() {
// Function to create the Table of Contents
function createTOC() {
var toc = document.createElement('div');
toc.id = 'table-of-contents';
toc.style.padding = '15px';
toc.style.backgroundColor = '#f4f4f4';
toc.style.border = '1px solid #ddd';
toc.style.marginBottom = '20px';
var tocTitle = document.createElement('p');
tocTitle.textContent = 'Table of Contents';
toc.appendChild(tocTitle);
var tocList = document.createElement('ul');
var postContent = document.querySelector('.post-body');
if (postContent) {
var headings = postContent.querySelectorAll('h2, h3, h4'); // Adjust the heading levels (h2, h3, h4...)
headings.forEach(function(heading, index) {
// Convert heading text to a valid ID (lowercase, spaces replaced with hyphens)
var id = heading.textContent.trim().toLowerCase().replace(/[^\w\s-]/g, '').replace(/\s+/g, '-');
heading.id = id; // Set the ID to the heading text
var listItem = document.createElement('li');
var link = document.createElement('a');
link.href = '#' + id;
link.textContent = heading.textContent;
listItem.appendChild(link);
tocList.appendChild(listItem);
});
if (tocList.children.length > 0) {
toc.appendChild(tocList);
postContent.insertBefore(toc, postContent.firstChild); // Insert TOC at the top of the post content
}
}
}
// Intersection Observer for lazy loading TOC
function lazyLoadTOC() {
var postContent = document.querySelector('.post-body');
if (!postContent) return;
var observer = new IntersectionObserver(function(entries, observer) {
entries.forEach(function(entry) {
if (entry.isIntersecting) {
// If the post body is in the viewport, create the TOC
createTOC();
observer.disconnect(); // Stop observing once TOC is created
}
});
}, { threshold: 0.1 }); // Trigger when 10% of the post content is in the viewport
observer.observe(postContent);
}
// Run lazy load function when the page is ready
window.onload = lazyLoadTOC;
})();
</script>
Now your Blogger blog has a lazy loading table of contents. Why I used lazy loading is to ensure that the code does not create issues with your core web vitals score.
If you still have any question, feel free to ask me.
