How To Add Automatic Table Of Contents In Blogger Post

 

How To Add Automatic Table Of Contents In Blogger Post



What is Table Of Contents or TOC? 


In sites, a chapter by chapter guide condensed as TOC or ToC, is a connection list, normally found on a page put just after the principal passage. Each anchor interface inside a TOC takes you to a particular segment of the page. 


A HTML TOC gives a speedy method to leap to the ideal part of a page. It normally incorporates the titles of the main level headers (headings) or second level headers(subheadings). 


In printable work, a TOC alludes to the record page of the book which contains the page number to every part. TOC for books are more top to bottom and complete, containing area titles as well as depictions, writer names, and subheadings. 


What Is TOC Plugin? 


TOC module created by MBT, is a programmed answer for the monotonous strategy for making a chapter by chapter guide physically for each page. It auto-creates an easy to use TOC for your protracted blog articles. It is coded in unadulterated JavaScript and burdens easing up quick. Substance table created utilizing TOC module is effortlessly slithered and ordered via search robots. 


Website design enhancement ALERT: Just minutes after this post was distributed. Google ordered the TOC anchor Links as well as added a “Leap to” name to recognize that it is an anchor interface that leaps to a specific segment. See it to trust it. 🙂 


I have excluded lower level heading labels (for example h3/h4/h5/h6) in TOC module in light of the fact that a blog entry is neither a wiki nor a long extensive book, it is ideal to show just significant features for effortlessness and availability. Adding subheadings or lower levels inside a TOC list just makes it longer long subsequently pushing down your fundamental substance and obliterating perceivability. 


So far numerous designers have composed a powerful ToC content yet a large portion of these contents are either coded in jQuery or they are render-impeding JS gobbling up your page load time. You may even discover TOC generator however these contents again need adaptability and simplicity of customization. 


TOC ought to be added distinctly to those articles which are extensive or contain in any event four headings. On opposite, some TOC generators will include the rundown every one of your pages whether containing a few headings or simply a solitary heading, which obviously is certainly not something reasonable to do. 


jQuery list of chapters is much more slow contrasted with this module worked with conventional unadulterated JS. JavaScript is executed a lot quicker by programs contrasted with a JS library (jQuery) that should be imported first. 


Highlights of TOC Plugin: 


It is the principal JavaScript module of its sort that is extraordinary in a few different ways as referenced beneath: 


Coded in unadulterated JavaScript – only 10 lines of code! 


Lightweight and quick. 


Website optimization Friendly 


Adds exceptional ID to each part consequently. 


Makes both arranged or unordered rundown 


Contains a Toggle button 


Show on any area you pick 


Effortlessly Customized 


Portable responsive 


Executes just when conjured! 


Pseudo Code Of TOC Plugin 


See how the TOC Script functions in plain English. The numbered list beneath is the pseudo code for our TOC module. It is an improved on portrayal of the JavaScript code we composed.


Make a capacity to print feature joins 


Tally the quantity of heading areas on a page 


Run a circle identical to the quantity of heading areas 


Concentrate text content from the heading titles 


Give each heading an alternate ID 


Convert the heading text into an anchor interface 


Print the heading anchor joins inside a projectile rundown 


Discover the area by TOC ID to show the rundown 


End the circle 


Trigger the capacity just when conjured inside the page 


Following is the pseudo code for the switch button which shows or shrouds the TOC. 


Make another capacity to show/shroud the TOC. 


Show the TOC naturally 


Utilize a contingent assertion to check if TOC is covered up or noticeable. 


Use CSS to show or conceal the TOC 


Trigger the capacity just when catch is clicked 


How To Install TOC Plugin in Blogger Blogs? 

I’m sharing beneath the strategy for adding TOC module in Blogspot writes however you can apply practically precisely the same technique for introducing this module on any site you need, may it be facilitated on WordPress or elsewhere. 


Follow these means to introduce it in BlogSpot: 


Sign in Blogger > Template 


Reinforcement your format 


Snap “Alter HTML” 


Simply above </head> label glue the accompanying source joins:

  1. <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:

    • To change background color of TOC box edit #FFFFE0
    • To change border color of TOC box edit #f7f0b8
    • To change font color of TOC headline text edit #707037
    • To change anchor link color edit #0080ff
    • To change font size of anchor links edit 15px
    • 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>
  4. Save your template and you are all done!
  5. Show Table Of Contents Automatically in Blog Posts

    Each time you may want to display TOC inside a specific post, follow these two steps.

    Step #1  Mention Location Of TOC Container

    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.

    Add Table Of Contents automatically in blog posts

    Step #2    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>

    Invoke TOC plugin

    Publish your post and see the magic! 🙂

Need Help With TOC Plugin?
I tried my best making this tutorial as easy as possible but if there is anything you could not understand then please feel free to post your queries below in the comment section. I would love to answer as soon as possible.
I hope it adds a positive impact on your SERPS ranking and help you in making your content more search-friendly. I will develop the plugin with time, adding more features and functionalities if required. Till then, I would love to hear your feedback on this.  🙂

Leave a Comment

Your email address will not be published.