How to Create Automatic TOC in Blogger

Have you ever seen someone’s article with a Table Of Contents (TOC)? In the Table of Contents you see, there is a link that directs you directly to the main point of the problem in the table of contents or TOC. Perhaps some of you have already implemented it in your articles. But have you ever thought about creating an automatic Table of Contents in articles in Blogger?

Understanding Table Of Contents (TOC)

Table Of Contents (TOC) is a list of points that show what is being discussed in an article or book. Its function is as a shortcut to the point the reader is looking for. In a web, the Table of Contents is a link that leads directly to the header of the content point. In a book, you can see the page number of that header.

Introduction to the TOC Plugin

This TOC plugin was created by MyBloggerTrick in 2017. This plugin functions to create an automatic Table of Contents without manual typing. This TOC plugin uses pure JavaScript, so it loads quickly and is easily crawled by search engines.

Why Use TOC?

For webmasters and bloggers who write long articles and divide them into several sections, readers may find it difficult to read such long posts without navigation to important points. The solution to make readers comfortable is to include a table of contents in the article.

The Effect of TOC on SEO

TOC provides a basic summary to search engines of all your articles. The hash links ‘#’ within the TOC offer additional benefits to your SEO efforts. Google likes hash links, especially when these links are meaningful and provide better navigation and understanding of your blog content.

TOC Plugin Features

Coded in pure JavaScript - only 10 lines of code!
Lightweight and fast.
SEO Friendly
Automatically adds unique IDs to each section.
Creates ordered or unordered lists
Includes a Toggle button
Shows in any location you choose
Easily Customizable
Mobile responsive
Script only runs when called!

How to Install the TOC Plugin

To install this automatic TOC plugin, please follow these steps:

Go to Blogger > Theme
Back up your template first in case of errors.
Click on the 3 dots next to your theme and select Edit HTML
Find the </head> code and copy-paste the following code above it.

<link href='http://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.css' rel='stylesheet'/>           
<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'/>

        
<script type='text/javascript'>              
//<![CDATA[           
//*************TOC plugin by MyBloggerTricks.com           
function mbtTOC() {var mbtTOC=i=headlength=gethead=0;           
headlength = document.getElementById("post-toc").getElementsByTagName("h2").length;for (i = 0; i < headlength; i++)           
{gethead = document.getElementById("post-toc").getElementsByTagName("h2")[i].textContent;document.getElementById("post-toc").getElementsByTagName("h2")[i].setAttribute("id", "point"+i);mbtTOC = "<li><a href='#point"+i+"'>"+gethead+"</a></li>";document.getElementById("mbtTOC").innerHTML += mbtTOC;}}function mbtToggle() {var mbt = document.getElementById('mbtTOC');if (mbt .style.display === 'none') {mbt .style.display = 'block';} else {mbt .style.display = 'none';}}           
//]]>              
</script>

Now find the ]]></b:skin> code and paste the following code above it.

/*####Automatic TOC Plugin by MyBloggerTricks####*/          
.mbtTOC{border:5px solid #f7f0b8;box-shadow:1px 1px 0 #EDE396;background-color:#FFFFE0;color:#707037;line-height:1.4em;margin:30px auto;padding:20px 30px 20px 10px; font-family:oswald, arial;display: block;width: 70%;}           
.mbtTOC ol,.mbtTOC ul {margin:0;padding:0;}           
.mbtTOC ul {list-style:none;}           
.mbtTOC ol li,.mbtTOC ul li {padding:15px 0 0; margin:0 0 0 30px;font-size:15px;}           
.mbtTOC a{color:#0080ff;text-decoration:none;}           
.mbtTOC a:hover{text-decoration:underline; }

        
.mbtTOC button{background:#FFFFE0; font-family:oswald, arial; font-size:20px;position:relative; outline:none;cursor:pointer; border:none; color:#707037;padding:0 0 0 15px;}           
.mbtTOC button:after{content: "\f0dc"; font-family:FontAwesome; position:relative; left:10px; font-size:20px;}

Next, change the <data:post.body> code to the following code:

<div id="post-toc"><data:post.body/></div>

How to Apply the TOC Plugin to Posts

To display the automatic Table of Contents in your blog posts, you need to call it as follows:

In each post, add the following code by clicking on “Show HTML” or the <> button next to the post title, usually after the first paragraph. This code functions as the place where the Table of Contents or TOC will appear in the post.

<div class="mbtTOC"> 
<button onclick="mbtToggle()">Table of Contents</button> 
<ol id="mbtTOC"></ol> 
</div>

Add the calling code at the end of the post so that the TOC script runs.

<script>mbtTOC();</script>

Conclusion

Hopefully, this Table of Contents (TOC) Plugin or Automatic Table of Contents can help you. Also read How to Create Multi-Level Automatic Table of Contents in Blogger

TOC Plugin by MyBloggerTricks (MBT) is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License. From Automatic Table of Contents With Javascript

Menu