How To Create Automatic Table Of Content Generator On Blogger Blog

In this tutorial we are going to be looking at how to generate table of content automatically on your blogger blog.But before we do this let first of all understand what table of content is all about.

DEMO:Below is the demo of Table of Content generated with this procedures.

What is Table Of Contents(TOC)?

In websites, a table of contents abbreviated as TOC or ToC, is a link list, usually found on a web page placed right after the first paragraph. Each anchor link inside a TOC takes you to a specific section of the web page.

An HTML TOC provides a quick way to jump to the desired section of a page. It usually includes the titles of the first-level headers (headings) or second level 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.

Today we are going to be using a Plugin to generate our table of content which was developed by MBT . It auto-generates a user-friendly TOC for your lengthy blog articles. It is coded in pure JavaScript and loads lightening fast.

Features of TOC Plugin:

It is the first JavaScript plugin of its kind that is unique in several ways as mentioned below:
•    Coded in pure JavaScript
•    Lightweight and fast.
•    SEO Friendly
•    Adds unique ID to each section automatically.
•    Creates both ordered or unordered list
•    Contains a Toggle button
•    Show on any location you choose
•    Easily Customized
•    Mobile responsive
•    Executes only when invoked!

Procedure To Install TOC Plugin in Your Blogger Blogs

•    Before you start make sure that you backup your template
•    Login into your Blogger Dashboard
•    Click on Theme
•    Proceed by Clicking Edit HTML
•    Press CTRL+F to search for </head> and then press enter
•    Just before </head> copy and paste the below code

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

•    Search for in your template ]]></b:skin> and just above it paste the following CSS code:
     

/*####Automatic TOC Plugin by MBT####*/          
.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;}

    
To modify some of the features to your taste do the following:
o    Change the background color of TOC box by editing #FFFFE0 to your desired colour
o    Change the border color of TOC box by editing  #f7f0b8 to suite your taste
o    Change the font color of TOC headline text by editing  #707037
o    Change the anchor link color by editing  #0080ff to your preferred colour
o    Change the font size of anchor links by editing 15px
o    Change the font size of TOC headline text by editing 20px
o   
o    Still in your theme edit search for <data:post.body/> and replace it with the code below:

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

o    Then you can now save your template and that all on how to install the Automatic Table of Content
How To Use Table Of Contents Automatically in Blog Posts
To display table of content in any of your blog post,follow the following steps.

Note: It is best to display TOC right after your starting paragraph or show it before the first heading on your blog post.
o    Whenever your writing a blog post and you want to input table of content automatically,just switch to your HTML edit and add the below code.

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

Note:
o    You may replace the text "Contents" with any other text you want.
o    If in case your headings already contain numbers in beginning then replace ol with ul.
o    Finally still in your HTML edit paste the following JS code at the bottom of your blogger editor where your post ends:

<script>mbtTOC();</script>

After this step then you have generated an automatic table of content on your bolg post.

   

Get our updates delivered to your inbox