Officialhelplines

How to Add Automatic Table of Contents in Blogger Posts

html automatic table of contents blogger blog

Having an html table of contents included in your blog posts is one of few minor efforts that impacts your blog SEO positively and helps your blogger blog rank higher on Google.


While some premium blogger templates are designed with table of contents widget for blogger pre-installed in them, for bloggers not using such blogger template; this tutorial explains how to add automatic table of contents in Google blogger such that by including a simple javascript in your blog post, you can automatically create and insert table of contents in that blogger post.


    In this tutorial, I walk you through the step by step guides of how to create table of contents in an html document such as your blogger posts. But before we go into the details, as usual, let us discuss some key facts about html table of contents


    what is html automatic table of contents

    What is HTML Table of Contents?

    HTML table of contents which is also commonly referred to as ToC in blogger blog posts or simply Table of Contents in blog posts or article is a box or section within the blog post wherein contents of the blog post are segmented mostly in either numeric, bulleted or alphabetical order.


    Usually, html table of contents of blog post or article in a particular page are grouped by their headings or subheadings within the table of contents such that when clicked on in the table of contents, takes the reader straight to that particular heading or subheadings in the post body.


    For this reason, some websmasters prefer to use the term clickable table of contents than just html table of contents.


    Meanwhile, on a further note, the headings and subheadings in the blog post or article refer to the h2, h3 and sometimes the h4 tags present within the blog post in their respective order.


    how to insert automatic html table of contents

    How Can You Insert Clickable HTML Table of Contents in Blogger Posts?

    Basically, you can manually or automatically insert html table of contents within your blogger posts.


    Which method best suits your blogger posts, automatic or manual, is often based on the lenght of your blog posts and or how your blog posts are formatted.


    How Does Automatic Table of Contents Work?

    By making use of some codes such as javascript, vue, jquery or other similar codes; you can automatically discover, arrange and make your targeted headings or subheadings within the blog post into a nice table of contents placed within the blog post, usually before or after the first paragraph where the readers can spot and navigate the blogger post content easily.


    So that instead of manually inserting the html table of contents in html document such as blogger posts, using javascript table of contents for example; you can automatically output html table of contents in blog posts by simply inserting a simple table of contents javascript in the blog post body.


    How Does Manual Table of Contents Work?

    Exactly as the automatic method works.


    The only difference here is, just as the name implies, manual means having to do it manually; by yourself.


    Therefore, the process of inserting the clickable html table of contents within your blog post by yourself is referred to as the manual insertion.


    SEO benefits of html table of contents

    Benefits of Using HTML Table of Contents in Blogger Posts

    1. It gives your blog post a professional look as well as good impression.
    2. It makes navigating your blog post easy for your readers.
    3. It helps organise your blog post in a systemic manner such that your post focus points are easily identified.
    4. It makes readers stay longer in your blog.

    As it is, clickable html table of contents is advantageous in so many ways as it helps improve your blog post users experience and its SEO.


    Other than for the SEO reasons, above are listed other reasons for which you should have html table of contents present within your blogger posts.


    SEO Benefits of Having HTML Table of Contents in Blogger Posts

    1. It adds up your blog post content

      This is a good thing because most search engines including Google use length of a particular blog post as part of their ranking factors. With clickable table of contents in your blog posts, you have a longer post which is directly equal to a better chance of ranking higher in search engine results pages.

    2. It improves your blog post keyword density

      Because clickable table of contents uses your headings and subheadings, it most likely lists your keywords, giving your blog post another heads up in terms of SEO ranking.

    3. It gives your blog post better ranking

      Speaking of the chance of ranking higher in search engine results pages, html table of contents can add up your blogger posts ranking factors.

    4. It ensures improved CTR in SERPs

      It improves your blog click through rate in the search results pages.


    SEO benefits of html table of contents

    How to Automatically Generate HTML Table of Contents in Blogger Post

    1. Login your Blogger Account

      Visit blogger.com and login your blogger account.

      how to automatically generate html table of content for blogger post - step 1

    2. Prepare your Blogger Blog by Backing Up your Blogger Template:

      Before you can be able to automatically insert clickable table of contents in your blogger post, you need to tweak your blog template a little bit.


      Using the tutorial set forth, I would be guiding you on how to tweak your blogger blog so that you may be able to automatically insert clickable table of contents in your blog posts.

      how to automatically generate html table of content for blogger post - step 2

      Please, be sure to backup your blogger template before you proceed.


    3. View your Blog Source Codes

      After backing up your blogger template, you may now proceed to modifying the source codes of your blog template.


      When logged in, from the blogger main menu to your left, locate and click on Theme. The next page that opens shows you the source code of your blogger template.


      To proceed, click on the button in the image below and select Edit HTML.

      how to automatically generate html table of content for blogger post - step 3

      The page that appears next shows you the source codes of your blog template.


    4. Search for the head Tag within your Blog Source Codes

      Now, click within the source codes and then press CTRL + F keys together and at once. Once pressed, a search widget should appear in upper-left corner of the source codes. This widget allows you search from within the source codes only.


      how to automatically generate html table of content for blogger post - step 4a

      Now, search for </head within the source codes through the search widget that just popped up.


      how to automatically generate html table of content for blogger post - step 4a

      You may copy the </head from below and paste it in the search widget.


    5. </head
    6. Paste Table of Contents Javascript Just Above Head Tag

      Once you found the </head tag you searched for from above, copy the table of contents javascript in the codes block below and paste it just above the </head tag.

      how to automatically generate html table of content for blogger post - step 5

    7. <script type='text/javascript'>      
        //<![CDATA[      
        //*************TOC plugin by ivtemplates.com      
        function ivTOC() {var ivTOC=i=headlength=gethead=0;      
        headlength = document.getElementById("iv-toc").getElementsByTagName("h2").length;for (i = 0; i < headlength; i++)      
        {gethead = document.getElementById("iv-toc").getElementsByTagName("h2")[i].textContent;document.getElementById("iv-toc").getElementsByTagName("h2")[i].setAttribute("id", "point"+i);ivTOC = "<li><a href='#point"+i+"'>"+gethead+"</a></li>";document.getElementById("ivTOC").innerHTML += ivTOC;}}function ivToggle() {var ivt = document.getElementById('ivTOC');if (ivt .style.display === 'none') {ivt .style.display = 'block';} else {ivt .style.display = 'none';}}      
        //]]>     
        </script>

    8. Paste the Table of Contents CSS in your Blog Template

      Next you should copy CSS codes in the code block below and paste it just above ]]></b:skin> within your blogger template source codes.


      To do this, copy ]]></b:skin> and paste it in the Search Widget again. Just like you did when you searched for the head tag.


      ]]></b:skin>

      Then press the Enter key on your keyboard.


      how to automatically generate html table of content for blogger post - step 6a

      Just above the code you copied from above, copy the entire CSS code from the codes block below and paste it there.


      .ivTOC{display: flex; flex-wrap: wrap; height: auto; max-height: 220px; width: 300px; border:1px dashed #ddd; background-color: #f8f8f8; color: #000; line-height:1.4em; margin: 10px 15px 10px 0; padding: 15px 10px; font-family:Roboto, arial; overflow-x: hidden; overflow-y: auto;}
      .ivTOC ol, .ivTOC ul {margin: 0; padding: 0;}      .ivTOC ul {list-style: none;}
      .ivTOC ol li, .ivTOC ul li {padding: 15px 0 0;  margin:0 0 0 30px; font-size: 15px; font-weight: 500; }      
      .ivTOC a{color: #0080ff; text-decoration: none;}
      .ivTOC a:hover{text-decoration: underline; }     .ivTOC button{background: #FFFFE0; font-family:Roboto, arial; font-size:20px; position: relative; outline:none; cursor: pointer; border:none; color: #660099; padding: 0 0 0 15px;}
      .ivTOC button:after{content: "\f0dc"; font-family:FontAwesome; position:relative; left:10px; font-size:20px;}

      how to automatically generate html table of content for blogger post - step 6b

      NOTE: you may customize the look and feel of the clickable html table of contents to fit the style of your blogger template by modifying the CSS code as highlighted below:

      • To change background color: modify #f8f8f8
      • To change border color: modify #ddd
      • To change font color: modify #000
      • To change link color: modify #0080ff
      • To change link anchor text size: modify 15px

    9. Modify Blogger Blog data:post.body Tag

      Again in the search widget, type data:post.body and press the enter key to search for the data:post.body tag.

      You can also copy data:post.body from the codes block below and paste it directly in the search widget.


      <data:post.body/>

      Once found, replace the data:post.body with the codes in the codes block below:

      <div id="iv-toc"><data:post.body/></div>
      how to automatically generate html table of content for blogger post - step 7

      NOTE: You may find several occurrences of the data:post.body. Simply replace all of the occurrences of the data:post.body tag with the line copied from the codes block above.


    10. Save your Blog Theme

      Finally, you can click Save to effect the changes made on your blog theme.


      how to automatically generate html table of content for blogger post - step 8

      Having completed the steps from above successfully, you now have a fully functional clickable automated html table of contents widget for blogger blog installed on your blogger template.


    11. How to Automatically Insert HTML Table of Contents in your Blog Post

      As earlier noted, the aim of these whole modification process is to enable you automatically insert table of contents in your blogger posts.


      And to do just that, there are a few other simple steps you need to follow each time you create or edit any blog post you wish to insert the clickable html table of contents in.


      To automatically insert table of contents in your blogger posts:

      1. Create New Blog Post or Edit Published Blog Post

        Either you have a new post to publish and you wish to insert clickable table of contents in it or you wish to insert the clickable table of contents in your already published post, simply start by creating a new post or edit the published post.

        insert blogger post table of contents - step 1

      2. Switch to Post HTML Editor View

        From the New Post Edit screen, switch to HTML Edit view.


      3. Insert Blogger Blog Post Table of Content - step 2
      4. Paste this HTML Tag Where you Want Clickable Table of Content Box Appear in your Blogger Post

        Copy the HTML tag in the codes block below and paste it within your blog post body precisely where you want the clickable table of contents box appear within your blog post body.


      5. <div class="ivTOC">
        <button onclick="ivToggle()">On this Page:</button>
        <ol id="ivTOC"></ol>
        </div>

        insert blogger post table of contents - step 3
      6. Past the Table of Contents Javascript within your Blogger Post Body

        Next, copy and paste the table of contents javascript in the codes block below and paste it after the last end of your post edit space.


        <script>ivTOC();</script>

        insert blogger post table of contents - step 4

        NOTE: ensure that nothing appears after the JS Code copied from above in your post edit screen.


      7. Finally, Publish Your Blog Post

        Finally, you may now click Publish or Update to effect the changes in your blog post.

        insert blogger post table of contents - step 5

      8. Final Thought on Clickable Table of Contents

        As tiny or tideous as these procedures may seem to you, it is extremely beneficial for your blogger post both in your blogger post SEO optimizations aspects and the user experience.


        Therefore, in every blog post you write always make sure you have clickable table of contents present within the post body.


        And if you can, you may include it in all your already published post. It may be a tasky task, but it is extremely recommended.


    0 Comments

    to top