Breaking

Tuesday 1 August 2017

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



    21 comments:

    1. Forr most up-to-date news you have to go to seee thhe web and onn wweb
      I fouind tthis website as a bestt website
      for hottest updates.

      ReplyDelete
    2. I don't even know the wayy I ended up here,
      but I believed this puut upp was once great. I don't understand who you're however definitely you are going tto a well-known blogger if
      you happen to are not already. Cheers!

      ReplyDelete
    3. Hi, this weekend iss pleasant designed for me, because this poiunt in time
      i am reading this impressive informative paragraph here
      att my house.

      ReplyDelete
    4. I constantly spent my half an hour to resad this weblog's posts daily along with
      a cup of coffee.

      ReplyDelete
    5. Asking questions are truly fastidious tthing if youu are not understanding
      somethng entirely, except this post gives good understanmding even.

      ReplyDelete
    6. There's definately a lot to know about this issue.
      I like all the points you've made.

      ReplyDelete
    7. Thanks for the auspucious writeup. It in reality used to bee a enjoment account it.
      Loook advanced tto more added agreeable fom you!
      However, how could we keep uup a correspondence?

      ReplyDelete
    8. Hi there this is kinbd of of ooff topic but I was wondering
      if blogs use WYSIWYG editors or if you have to manually code
      with HTML. I'm starting a blog soon but have no coding knowledge so I wanted to get advice from someonee with experience.
      Any help wiuld be enormously appreciated!

      ReplyDelete
    9. It's hard to find experienced people for this
      subject, however, you sound like you know
      what you're talking about! Thanks

      ReplyDelete
    10. Hey There. I found your blog using msn. This iis a really werll written article.
      I'll make sure to bookmark it and come back to read more of your
      useful information. Thanks for the post. I'll definitely return.

      ReplyDelete
    11. Hi, I do believe this is a great site. I stumbledupkn it ;
      ) I will return yet again since I bookmarked it.
      Money and freedom is tthe best waay to change, may
      you bbe rich and continue too help others.

      ReplyDelete
    12. It is in point of fact a nice and helpful piece of information.
      Iam glad that you shared this useful information with us.
      Please kkeep us upp to dqte like this. Thankls for sharing.

      ReplyDelete
    13. If you are going for best contents like I do, simpl pay a visit this website daily for the reason that itt gives quality contents, thanks

      ReplyDelete
    14. Wonderful work! Thiss is thee type of information that are supposed to
      be shared across tthe net. Disgrafe on the seek engines for not positioning this submit
      upper! Comme on over and seek advjce from my website .
      Thanks =)

      ReplyDelete
    15. Fantastic goods frrom you, man. I've understand your stuff
      previous to and you are just too great. Iactually like what you've acquired here,
      really like what you're saying and the way in which you say it.
      You make it entertaining and you still take care of to keep it smart.

      I can not waiut to readd ffar more from you. Thiss is really a great
      site.

      ReplyDelete
    16. Great article! That is the kind of information that are supposed to be shared
      acrfoss the internet. Shame on the sarch engines for not positioning this
      submit upper! Comme on over and consult with my web site .

      Thanks =)

      ReplyDelete
    17. Piece of writing writing is also a fun, if you know after that you can write
      or elose iit is complicated to write.

      ReplyDelete
    18. What's up, its nice paragraph concerning media print, we
      all be familiar with media is a wonderful source of data.

      ReplyDelete
    19. I have been surfing online more than three hours nowadays, but I never discovered any attention-grabbing article like yours.
      It is lovely worth enough for me. In my view, if all webmasters and bloggers made excellent content material as you did,
      the net will be much more helpful than ever before.

      ReplyDelete
    20. Howdy! This is kind of off topic but I need some advice from an established blog.
      Is it very hard to set up your own blog? I'm not very techincal but I
      can figure things out pretty quick. I'm thinking about creating my own but I'm not sure where to start.

      Do you have any points or suggestions? Appreciate it

      ReplyDelete
    21. I would like to thank you for the efforts you've put in writing this site.
      I'm hoping to view the same high-grade blog posts by you in the future
      as well. In truth, your creative writing abilities has inspired me to
      get my own, personal site now ;)

      ReplyDelete

    Want to get all latest updates from DbencoPlanet.com?

    Subscribe to DbencoPlanet to get all the latest updates free!