331A96E0-3037-43FC-8D93-543B900B11C9

๐Ÿ˜ Loving this theme? Download

Please enter at least 3 characters.

Create an automatic Table of Content (TOC) in Blogger Blog

A simple script that automatically adds table of content at the starting of every articles in blogger blog. TOC helps users navigate through contents.
Create an automatic Table of Content (TOC) in Blogger Blog

Create an automatic Table of Content (TOC) in Blogger Blog
Ever went through long articles and wished ๐Ÿค” there was an option to jump through? 

Or return to previous sections?

Want to provide that experience ๐Ÿงช to your readers?

I will show you a trick that automatically displays table of content in your blogger blog

Yes, you heard it right, automatic generation of TOC. ๐Ÿคฉ

You do not need to add any code while writing your content. This script will auto add IDs (if not present) in your heading tags and displays TOC at the top of article. 

What is Table of Content (TOC)?

TOC is a simple jump link that enables users to jump within the article. It displays all heading tags and readers can navigate to sections they want to read. 

Why automatic table of Contents for your blogger?

The reason is simple - no manual coding. Manually adding ids in heading and inserting table of contents code in every article is exhausting and time consuming.

Anyways, I will mention some extra benefits of using this auto toc script for blogger.

  • SEO friendly - Google loves when article is divided into sections.
  • Auto insert table of content at the top of every article.
  • No headache of adding IDs to heading tags - this script auto adds IDs if not present.
  • Does not show up for small articles with less than 2 headings. Lets be honest, it makes no sense to display table of content in small articles.
  • No external dependencies. 
  • Very easy to install.
  • And many more...


Adding TOC in Blogger blog

I told you earlier, its very simple to install. Add this javascript code before closing body tag and it automatically appends TOC at the top of article. No need to do anything. Yes, of course, you can style your TOC with CSS.

<script>/*<![CDATA[*/
// Automatic TOC code shared by TwistBlogg.com
// Do not share without permission and keep credit intact.
const tocContainer = document.querySelector(".post-body");
const headings = tocContainer.querySelectorAll("h2, h3, h4, h5, h6");

// Checking if there are more than 2 headings
if (headings.length > 2) {
	const details = document.createElement("details");
	details.setAttribute("class", "toc-content");
	const summary = document.createElement("summary");
	summary.innerHTML = "<strong>Table of Contents</strong>";
	details.append(summary);

	headings.forEach((el) => {
  // Generate IDs if they don't exist - optional
		el.id = el.id || el.textContent.toLocaleLowerCase().replace(/\W/g, "-");
		const p = document.createElement("p");
  // Add a class to the p tag with the heading like "toc-h2"
		p.setAttribute("class", "toc-" + el.tagName.toLocaleLowerCase());
		const a = document.createElement("a");
  // Add a link to the section in the text
		a.setAttribute("class", "toc-link");
		a.textContent = el.textContent;
		a.href = "#" + el.id;
		p.append(a);
		details.append(p);
	});
 // Add TOC to the beginning of the article
	tocContainer.prepend(details);
}
/*]]>*/</script> 

If you want to know how this code works, check further in this article.

Styling Automatic Table of Content for Blogger blog

This is very plain CSS code that does the work. Customize the classes accordingly. 

And please let me know if you want a more sophisticated design, I can create something amazing.

/* Reduce the size and line-height of the TOC */
.toc-content {
  font-size: 1em;
  line-height: 1.1;
  cursor: pointer;
}

.toc-content a {
  text-decoration: none;
}

.toc-content a:hover{
  text-decoration: none;
}

/* Indent headings based on their level */
.toc-h3 {
  padding-left: 1em;
}
.toc-h4 {
  padding-left: 2em;
}
.toc-h5 {
  padding-left: 3em;
}
.toc-h5 {
  padding-left: 4em;
}


Understanding how our auto Table of Content works

If you are a geek and wants to know how the code works, here it is.

This code selects .post-body class and finds all heading tags.

const tocContainer = document.querySelector(".post-body");
const headings = tocContainer.querySelectorAll("h2, h3, h4, h5, h6");

Our headings variable now holds all heading tags. Checking if there are more than 2 headings, if yes, run the script.

if (headings.length > 2) {
    // Create table of contents
}

Let's create a toggle button. We create a <details> tag element and insert classes. That way we can use browser native support for dropdown toggle button. The <details> element includes a <summary> tag where you can insert the text that displays even when the toggle is closed. In our case, it is 'Table of Contents'. We are doing so as to hide TOC until it's wanted.

const details = document.createElement('details');
details.setAttribute('class', 'toc-content'); 
const summary = document.createElement('summary');
summary.innerHTML = '<strong>Table of Contents</strong>';
details.append(summary);

Generate IDs if they don't exist. IDs are important for table of content to navigate through so we check if your heading tags have IDs, if not we use regex to auto generate ids and append them to our heading tags.

headings.forEach((el) => {
	// Generate IDs if they don't exist
    el.id = el.id || el.textContent.toLocaleLowerCase().replace(/\W/g,"-");
    
    // Rest of the loop
}

Settings classes and links in p and a tags.

const p = document.createElement("p");

    // Add a class to the p tag with the heading like "toc-h2"
    p.setAttribute("class", "toc-" + el.tagName.toLocaleLowerCase());
    const a = document.createElement("a");
    a.setAttribute("class", "toc-link");
    a.textContent = el.textContent;

    // Add a link to the section in the text
    a.href = "#" + el.id;
    p.append(a);
    details.append(p);

Insert TOC at the beginning of the article.

articleContainer.prepend(details);

That is all. We successfully created auto generating table of contents(TOC) for our blogger blog. I hope you were able to install it in your site. Do leave a comment if you want customized TOC. Happy Blogging. ๐Ÿ˜€๐Ÿ’ช

Hey, got a minute?

Here are some handpicked articles for your to read next.

Share this post

Explore more articles by Aman Bhattarai

2 comments

Please leave comments related to the content. All comments are highly moderated and visible upon approval.

Comment Shortcodes

  • To insert an image, add [img]image_link[/img]
  • To insert a block of code, add [pre]parsed_code[/pre]
  • To insert a link, add [link=your_link]link_text[/link]
  • To insert a quote, add [quote]quote_text[/quote]
  • To insert a code, add [code]parsed_code[/code]
  1. Thanks so much I guess this is the best blogger plugin of 2023
    I never thought I'd be needing it nor that it is possible. Ive been using custom templates to and MBT to but this is more direct and gives room to focus on other things , just a one-time installation.

    Thanks once again but how can I exclude this to function on particular pages
    Would
    ( Style> .toc-content{ display: none; }) be enough. I haven't had the need to try it yet tho
    1. Hey S David,

      Thank your for the response. I am glad it worked for you. Yes, you can hide TOC on any specific page by simply disabling .toc-content{display:none}

      Happy Blogging
Post a Comment