Create Automatic Table Of Contents In JavaScript - TOC Plugin for Blogger

---

---

Wikipedia loves adding an automatic table Of Contents listing for every article it publishes because it engages readers more by way of imparting extra accessibility and better navigation. Google prefers exquisite content which is well organized and formatted. Including factors like tables, numbered sections, and an auto-generated TOC is a huge bonus for ranking high in search engines.

In this article, we will share a lightweight TOC plugin written in pure JavaScript to generate an automatic table of contents from the section headings of a web page.

WHAT IS TABLE OF CONTENTS OR TOC?

In websites/blog, a table of contents abbreviated as TOC or ToC, is a link list, usually determined on a web webpage placed right after the primary paragraph. Each anchor hyperlink inside a TOC takes you to a specific segment of the web page.

An HTML TOC affords a quick way to jump to the preferred segment of a page. It generally includes the titles of the primary-stage headers (headings) or 2nd stage headers (subheadings).

In printable work, a TOC refers to the index page of the book which contains the page number to each chapter. TOC for books are more in-depth and comprehensive, containing not only section titles but descriptions, author names, and subheadings.

WHAT IS TOC PLUGIN?

TOC plugin developed by MBT, is an automated strategy to the tedious approach of creating a table of contents automatically for every internet web page. It auto-generates a person-pleasant TOC in your prolonged webpage/blog articles. It's miles coded in pure JavaScript and masses lightening speedy. Contents desk generated the use of TOC plugin is effortlessly crawled and indexed by using search robots.

I have not included lower level heading tags (i.e. h3/h4/h5/h6) in TOC plugin because a blog post is neither a wiki nor a long lengthy book, it is best to show only major headlines for simplicity and accessibility. Adding subheadings or lower levels inside a TOC list only makes it longer in length thus pushing down your main content and destroying visibility.

So far many developers have written a dynamic ToC script but most of these scripts are either coded in jQuery or they are render-blocking JS eating up your page load time. You may even find TOC generator but these scripts again lack flexibility and ease of customization.

TOC should be added only to those articles which are lengthy or contain at least four headings. On contrary, some TOC generators will add the list on all your pages whether containing several headings or just a single heading, which of course is not a sensible thing to do.

jQuery table of contents is much slower compared to this plugin built with traditional pure JS. JavaScript is executed much faster by browsers compared to a JS library (jQuery) that needs to be imported first.

FEATURES OF TOC PLUGIN:

1. Coded in pure JavaScript - just 10 lines of code!
2. Lightweight and fast.
3. SEO Friendly
4. Adds unique ID to each section automatically.
5. Creates both ordered or unordered list
6. Contains a Toggle button
7. Show on any location you choose
8. Easily Customized
9. Mobile responsive
10. Executes only when invoked!

PSEUDO CODE OF TOC PLUGIN:

Understand how the TOC Script works in plain English. The numbered list below is the pseudo code for our TOC plugin. It is a simplified description of the JavaScript code we wrote.

1. Create a function to print headline links
2. Count the number of heading sections on a page
3. Run a loop equivalent to the number of heading sections
4. Extract text content from the heading titles
5. Give each heading a different ID
6. Convert the heading text into an anchor link
7. Print the heading anchor links inside a bullet list
8. Find the location by TOC ID to display the list
9. End the loop
10. Trigger the function only when invoked inside the page

Following is the pseudo code for the toggle button which shows or hides the TOC.

1. Create a new function to show/hide the TOC.
2. Show the TOC by default
3. Use a conditional statement to check if TOC is hidden or visible.
4. Use CSS to show or hide the TOC
5. Trigger the function only when button is clicked

HOW TO INSTALL TOC PLUGIN IN BLOGGER BLOGS?

I'm sharing the method of adding TOC plugin in Blogspot blogs however you may practice almost the precise identical method for putting in this plugin on any website you need, may it be hosted on Wordpress or everywhere else.

1. Follow these steps to install it in BlogSpot:

1. Sign in Blogger > Template
2. Backup your template
3. Click "Edit HTML"
4. Just above </head> tag paste the following source links:

<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>

Note that I am adding source links to Oswald font and Font-Awesome for styling purposes. You may or may not wish to add them. The code inside purple highlighted lines is the major TOC script in no more than 10 lines!

Make this change only if needed:

The major heading tag in blogger is H2 but if you are selecting the subheading tag in blogger editor then your default tag would be H3. If you are using the subheading tag as your main heading in your blog posts then please replace h2 with h3 thrice in the code above.  TOC plugin will not work if your heading tag is not correct.

2. Next search ]]></b:skin> and just above it paste the following CSS code:

    /*####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;}

Make these color changes if you want:

1. To change background color of TOC box edit #FFFFE0
2. To change border color of TOC box edit #f7f0b8
3. To change font color of TOC headline text edit #707037
4. To change anchor link color edit #0080ff
5. To change font size of anchor links edit 15px
6. To change font size of TOC headline text edit 20px

3. Finally search for <data:post.body/> and replace it with the code below:

Note: You will find two or more occurrences of this code so replace all its instances with the code below. TOC Plugin will not work if you replace <data:post.body/>  just once.

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

Save your template and you are all done!

SHOW TABLE OF CONTENTS AUTOMATICALLY IN BLOG POSTS:

It is best to display TOC right after your starting paragraph or show it before the first heading on your blog post.

To do this, switch to "HTML" mode of blogger editor and then paste the following HTML code just before the first heading or anywhere else you may want.

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

You can replace the text "Contents" with any other text you may like.

If in case your headings already contain numbers in beginning then replace ol with ul.

ACTIVATE TOC PLUGIN:

Finally, its time to invoke the plugin so that it could auto-generate a TOC on page load,

To do this, paste the following JS code at the bottom of your blogger editor where your post ends:

<script>mbtTOC();</script>

Publish your post and see the magic! :)