How to Add Table of Contents in Blogger in 2024 | Complete Guide
A Table of Contents (TOC) is a great addition to your blog posts, especially for longer articles. It not only enhances user experience by making navigation easier, but it also helps with SEO, improving your blog’s visibility. If you're using Blogger in 2024 and want to add a Table of Contents to your posts, this guide will show you how to do it in just a few steps.
.webp)
Table of Contents
Why Add a Table of Contents?
Before
we dive into the tutorial, it's important to understand the benefits of adding
a TOC to your blog posts:
1.
Improved Readability: Readers can easily find the section they
are interested in.
2.
Better User Experience: A TOC allows for smooth navigation,
particularly in long-form content.
3.
SEO Boost: Search engines often rank pages higher if they are
well-structured with internal links (like those in a TOC).
4.
Professional Appearance: It gives your blog a polished,
organized look.
Now, let's get into how to add a TOC to your Blogger posts.
Step-by-Step Guide to Adding a Table of Contents in Blogger
Step 1: Log into Your Blogger Account
-
Head over to [Blogger.com](https://www.blogger.com/) and log in using your
Google account.
-
Select the blog where you want to add the Table of Contents.
Step 2: Create a New Post or Edit an Existing Post
-
Navigate to the post where you'd like to add the TOC.
-
If you’re working on a new post, make sure to structure your headings (e.g.,
H2, H3) properly.
Step 3: Add HTML for the Table of Contents
In
order to create a Table of Contents, you will need to add a small HTML snippet
that will automatically generate the TOC based on your headings.
a) Go to the "HTML" Mode
-
In the post editor, switch to "HTML view" by clicking on the "Pen"
icon and then selecting HTML from the dropdown.
b) Insert the TOC Code
-
Paste the following HTML code at the top of your blog post where you want the
Table of Contents to appear:
<details class="k2Toc toc">
<summary data-hide="Hide all" data-show="Show all">Table of Contents</summary>
<div class="toc" id="toContent"></div>
</details>
How it Works:
-
The script automatically creates a list item (`li`) for each heading (`h2`,
`h3`).
-
It adds links that allow readers to jump to specific sections within the blog
post.
Step 4: Structure Your Headings Correctly
To
ensure your Table of Contents works correctly, it’s important to structure your
blog post using proper headings. Use:
-
H2 for main headings.
-
H3 for sub-headings.
This hierarchy helps the TOC script to distinguish between different sections and subsections of your content.
Step 5: Preview and Publish Your Post
-
Once you have inserted the TOC code and structured your post with headings,
switch back to the Compose view.
-
Use the Preview button to check how your Table of Contents looks and functions.
-
When you're satisfied, click Publish.
Style Your TOC with CSS
You
can further customize the appearance of your Table of Contents by adding some
custom CSS. To do this, follow these steps:
1.
Go to Theme > Customize > Advanced > Add CSS.
2.
Add the following CSS to style your TOC:
<b:if cond="data:view.isPost">
<style>
html{scroll-behavior:smooth;overflow-x:hidden}
details summary{list-style:none;outline:none} details summary::-webkit-details-marker{display:none}
details.k2Toc{padding: 10px 15px;background: #f3f3f3;color: black;font-weight: 600;margin: 10px 0px; border:2px solid; border-radius: 5px;box-shadow: rgb(0 0 0 / 15%) 1.95px 1.95px 2.6px;} details.k2Toc summary{display:flex;justify-content:space-between;align-items:baseline} details.k2Toc summary::after{content:attr(data-show);font-size:12px; opacity:.7;cursor:pointer} details.k2Toc[open] summary::after{content:attr(data-hide)} details.toc a:hover{text-decoration: none; color: #fe6c6c;}details.toc a:active{text-decoration: none; color: #fe6c6c;}details.toc a{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden; color:inherit} details.toc ol{list-style:none;padding:0;margin:0; line-height:1.6em; counter-reset:toc-count} details.toc ol ol ol ol{display:none} details.toc ol ol, .tocIn li:not(:last-child){margin-bottom:5px} details.toc li li:first-child{margin-top:5px} details.toc li{display:flex;flex-wrap:wrap; justify-content:flex-end} details.toc li::before{flex:0 0 23px; content:counters(toc-count,'.')'. ';counter-increment:toc-count} details.toc li a{flex:1 0 calc(95% - 23px)} details.toc li li::before{flex:0 0 28px; content:counters(toc-count,'.')} details.toc li li a{flex:1 0 calc(100% - 28px)} details.toc li li li::before{flex:0 0 45px} details.toc li li li a{flex:1 0 calc(100% - 45px)} details.toc .toc >ol{margin-top:1em} details.toc .toc >ol >li >ol{flex:0 0 calc(100% - 23px)} details.toc .toc >ol >li >ol ol{flex:0 0 calc(100% - 45px)} details.toc .toc >ol >li >ol ol ol{flex:0 0 calc(100% - 35px)}
</style>
<script>/*<![CDATA[*/ /* Table of Contents */
class TableOfContents { constructor({ from, to }) { this.fromElement = from; this.toElement = to; this.headingElements = this.fromElement.querySelectorAll("h1, h2, h3, h4, h5, h6"); this.tocElement = document.createElement("div"); }; getMostImportantHeadingLevel() { let mostImportantHeadingLevel = 6; for (let i = 0; i < this.headingElements.length; i++) { let headingLevel = TableOfContents.getHeadingLevel(this.headingElements[i]); mostImportantHeadingLevel = (headingLevel < mostImportantHeadingLevel) ? headingLevel : mostImportantHeadingLevel; } return mostImportantHeadingLevel; };
static generateId(headingElement) { return headingElement.textContent.trim().toLowerCase().replace(/[^ws-]+/g, "").replace(/s+/g, "-");}; static getHeadingLevel(headingElement) { switch (headingElement.tagName.toLowerCase()) { case "h1": return 1; case "h2": return 2; case "h3": return 3; case "h4": return 4; case "h5": return 5; case "h6": return 6; default: return 1; } }; generateToc() { let currentLevel = this.getMostImportantHeadingLevel() - 1, currentElement = this.tocElement; for (let i = 0; i < this.headingElements.length; i++) { let headingElement = this.headingElements[i], headingLevel = TableOfContents.getHeadingLevel(headingElement), headingLevelDifference = headingLevel - currentLevel, linkElement = document.createElement("a"); if (!headingElement.id) { headingElement.id = TableOfContents.generateId(headingElement); } linkElement.href = `#${headingElement.id}`; linkElement.textContent = headingElement.textContent; if (headingLevelDifference > 0) { for (let j = 0; j < headingLevelDifference; j++) { let listElement = document.createElement("ol"), listItemElement = document.createElement("li"); listElement.appendChild(listItemElement); currentElement.appendChild(listElement); currentElement = listItemElement; } currentElement.appendChild(linkElement); } else { for (let j = 0; j < -headingLevelDifference; j++) { currentElement = currentElement.parentNode.parentNode; } let listItemElement = document.createElement("li"); listItemElement.appendChild(linkElement); currentElement.parentNode.appendChild(listItemElement); currentElement = listItemElement; } currentLevel = headingLevel; } this.toElement.appendChild(this.tocElement.firstChild); } } /*]]>*/</script>
<script>document.addEventListener('DOMContentLoaded', () =>
new TableOfContents({
from: document.querySelector('#postBody'),
to: document.querySelector('#toContent')
}).generateToc()
);</script>
</b:if>
Conclusion
Adding
a Table of Contents to your Blogger posts in 2024 is simple and brings numerous
benefits. By following the steps above, you can improve user experience, boost
SEO, and make your posts more organized. Whether you're running a personal blog
or a professional website, a TOC can enhance readability and navigation,
keeping your audience engaged for longer.
By
consistently using a TOC in your blog posts, you’ll also signal to search
engines that your content is well-structured and user-friendly, which can lead
to better rankings over time.
Post a Comment