How to Add an Automatic Table of Contents in Blogger
How to Add an Automatic Table of Contents in Blogger
Description
If you're looking to add an automatic table of contents (ToC) to your Blogger posts, this guide will help you achieve that.
An automatic ToC helps readers navigate long posts more easily.
Follow these steps to set it up:
Step 1: Access Your Blogger Template
1. Log in to your Blogger dashboard.
2. Navigate to the Theme section on the left sidebar.
3. Click on Edit HTML to access your blog's HTML code.
Step 2: Add CSS for the Table of Contents
Add the following CSS to the <head> section of your template to style the ToC:
<style>
/* Table of Contents Styling */
#toc {
border: 1px solid #ddd;
background: #f9f9f9;
padding: 10px;
margin-bottom: 20px;
border-radius: 5px;
}
#toc ul {
list-style: none;
padding: 0;
}
#toc ul li {
margin: 5px 0;
}
#toc ul li a {
text-decoration: none;
color: #007BFF;
}
#toc ul li a:hover {
text-decoration: underline;
}
</style>
Step 3: Insert JavaScript for Automatic Table of Contents
Insert the following JavaScript code before the closing
<script>
document.addEventListener('DOMContentLoaded', function() {
var toc = document.createElement('div');
toc.id = 'toc';
toc.innerHTML = '<h2>Table of Contents</h2><ul>';
var headings = document.querySelectorAll('h2, h3, h4, h5, h6');
headings.forEach(function(heading, index) {
var id = 'toc_' + index;
heading.id = id;
var li = document.createElement('li');
var a = document.createElement('a');
a.href = '#' + id;
a.textContent = heading.textContent;
li.appendChild(a);
toc.querySelector('ul').appendChild(li);
});
toc.innerHTML += '</ul>';
document.body.insertBefore(toc, document.body.firstChild);
});
</script>
Step 4: Save and Preview
1. Save your changes by clicking the Save button.
2. Preview your blog to see the automatic table of contents in action.
Example of Table of Contents
Introduction
This is a simple demonstration of a Table of Contents.
Below you will find headings that will be included in the ToC.
Section 1
This is the first section of the content. It has a heading and some text below it.
Subsection 1.1
Details about subsection 1.1.
Section 2
This is the second section with another heading.
Subsection 2.1
Details about subsection 2.1.
By following these steps, you should now have a functional and stylish automatic table of contents on your Blogger blog.
This feature enhances the readability of long posts and improves user experience.
If you encounter any issues, double-check your code and ensure that all changes have been saved correctly.