How To Create Table Of Content On Blogger Websites

What Is Table Of Content (TOC) 

A table of contents, usually headed simply Contents and abbreviated informally as TOC, is a list, usually found on a page before the start of a written work, of its chapter or section titles or brief descriptions with their commencing page numbers.

Table Of Contents In Brief

A table of contents tells you what is contained in this 500-page book you have just taken off the library shelf.
Now if you want to know what is the purpose of a ‘ Table of Contents’ you can immediately go to the front of the book where the table of contents is listed and you will see ‘ Purpose of Table of Content's -Chapter 6 - Page 120.
Now you do not have to read 119 pages all about writing and printing a book, stuff you have no interest in before you get to the part you want to know about - You go straight to Chapter 6 and there it is Best way to eat an elephant - one mouthful at a time - a table of Contents allows you to read a 500-page elephant - one mouthful at a time.

How To Create TOC In Blogger

Follow the given steps to create a stylist table of content on your blogger websites. 

 - Go to blogger dashboard
 - Go to themes
 - Click on edit HTML
 - Copy code given below and paste above </head>

<!-- Table of contents Javascript start--> <script type='text/javascript'> //<![CDATA[ //*************TOC plugin by blogging375.blogspot.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> <!-- Table of contents Javascript end -->

 - Now Search ]]></b:skin> and paste given code above it

.mbtTOC{border:5px dashed dodgerblue;box-shadow:2px 0px 10px 4px silver;background-color:#f2f2f2;color:black;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:#f2f2f2; font-family:oswald, arial; font-size:20px;position:relative; outline:none;cursor:pointer; border:none; color:black;padding:0 0 0 15px;} .mbtTOC button:after{font-family:FontAwesome; position:relative; left:10px; font-size:20px;}

 - After that search for <data:post.body/>
 - Replace the code with

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

 - After this save your theme
 - Go to post click on html view
 - Find right place to show table of content
 - place given code where you want to show table of content

<div class="mbtTOC"> <button onclick="mbtToggle()">Table Of Contents ✓</button> <ul id="mbtTOC"></ul> </div></div>

 - After that, go to the bottom of the post by scroll down.
 - Be sure the post is in HTML view
 - Copy the java scripts
 - Paste the code under the post where the post will end.

<pre class="wp-block-code"><code><script>mbtTOC();</script></code></pre>

Everything Completed

Congrats your table of content was successfully created, this will help you to get attention of your audience

Final Words

I hope this article was helpful for you, if you facing any difficulty let me know in comments also join Telegram