How to add Table of content in blogger [ 2 Methods ]

Table of content in blogger helps visitors to go to the exact point rather than reading a whole post which may save your visitors' time as well as your article looks professional. Then how to make a table of content for bloggers.

{tocify} $title={Table of Contents}

Google is upgrading and time to upgrade bloggers also As compare to WordPress there are a lot of drawbacks to bloggers. In WordPress, you can use different plugins but not on blogger.

How To Create Table Of Content In Blogger

To make a table of content you need to follow my steps and some lecture about the advantages and disadvantages of the table of content in your article.

Importance of table of content on blogger. 

• Helpful for your visitors.
• Professional look.
• Google rich content. [ Helps on ranking ]

The disadvantage of the table of content

• The automatic method may decrease your loading time.
• The automatic method will fail on AMP sites.
• The manual method is a little bit time-consuming.
• May loss in visitors' engagement time.

Today I am going to share with you two different methods to make a table of contents in the blogger easily.

Two Methods Of Making Table Of Content On Blogger

1.Automatic Method
2.Manual Method

Automatic Method To Make Table Of Content On Blogger.

As by the name automatic, here you need to choose h2 or h3 or h4 as your content and by default, it is set at H2. That means whatever you put on H2 the heading is automatically set as a table of content.

By default, the design isn't attractive but I modified by my own choice. You can make yourself as your own.

Advantage of Automatic Method To Make Table Of Content On Blogger

• It is automatic that all H2 Heading goes automatic to Table of content.
• Automatic table of content for blogger saves a lot of time than manual method.

Disadvantages of Automatic Method To Make Table Of Content On Blogger

• Automatic table of content use javascript that will affect your page loading speed.
• Cannot include subtopic like H3.
• It cannot use on the AMP template.

Manual Method To Make Table Of Content On Blogger

On the manual method, you can create a table of content manually means you can include anything in your table of content as well as you can include subtopic also.

Advantages Of Manual Method To Make Table Of Content On Blogger

• No need of javascript means you save more than 1.2s to load your page fully.
• You can use on AMP Template also.
• It can include subtopics also on your table of content.

Disadvantage Of Manual Method To Make Table Of Content On Blogger

• Lots of time needed as the process is manual.
• It needs some HTML skills.

I recommend the automatic method if you don't have time but if you have then using the manual method will be best.

Let's start with Automatic Method To Make Table Of Content On Blogger

Video Tutorial of Automatic table of contents in blogger

Step-Wise Process of How To add Automatic Table Of Contents In Google Blogger

Follow each and every step.

Note: I am using the old Blogger Dashboard. 

Step1: Go to your blogger dashboard then point your mouse towards the theme option.

Blogger Dashboard >Theme

Step2: Now click on edit HTML.

Edit HTML

Step3: Copy the code below:

Code Below

   <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>{codeBox}

Step4: Then return back to your blogger and press "CTRL + F" and find " <head> then place that code and press Enter.

Step 1

Step 2

Step 5: Now, on the HTML section of the blogger again search on the theme using "CTRL+F" for " ]]></b:skin> " and again copy the code below and paste code above " ]]></b:skin> ".

Code: 

     /*####Automatic TOC Plugin by MyBloggerTricks designed by Saroj-Tech####*/
        .mbtTOC {
            border: 3px solid #A2A9B1;
            box-shadow: 1px 1px 0 #EDE396;
            background-color: #F8F9FA;
            color: #830000;
            line-height: 1.4em;
            margin: 30px auto;
            padding: 20px 30px 20px 10px;
            font-family: Open Sans, arial;
            display: block;
            width: 70%;
            border-radius: 5px;
        }
        .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: none;
            font-family: Open Sans, arial;
            font-size: 20px;
            position: relative;
            outline: none;
            cursor: pointer;
            border: none;
            color: #707037;
            padding: 0 0 0 15px;
        }
        .mbtTOC button:after {
            content: "\f022";
            font-family: FontAwesome;
            position: relative;
            left: 10px;
            font-size: 20px;
        } {codeBox}

Step 1

Step 2

Step6: Now again press " CTRL + F " and Search for " <data:post.body/> " and replace code with " <div id="post-toc"><data:post.body/></div> " then hit on "save theme" .

Step 1

Step 2

Step 3

Step7: Now go to the post where you want to show a table of content and click on HTML view at the top and paste the below code.

Code:

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

Paste Code

Note: You can use bullets on the list by replacing "ul" to "ol".

Step8: Place the code at the end of all HTML.

Code:

<script>mbtTOC();</script>{codeBox}

Paste Code At End

Update your post now you will see the working table of contents for the blog post.

Works Perfectly

Awesome

Comment below if you like my updated design.

Originally published at Mybloggingtricks

Video Tutorial of Manual table of contents in blogger

Step-Wise Process for Manual Method To Make Table Of Content On Blogger

As the manual method is a little bit time consuming as well as you need to familiar with some HTML.

Let's start the step-wise method of adding a table of contents in the blogger.

Step1: Go to your blogger dashboard then point your mouse towards the theme option.

Blogger Dashboard >Theme

Step2: Now click on edit HTML.

Edit HTML

Step 3: Now, on the HTML section of the blogger again search on the theme using "CTRL+F" for " ]]></b:skin> " and again copy the code below and paste code above " ]]></b:skin> ".

Code:

/*Created by https://www.pkbaniya.com.np/ [Saroj-Tech ] */
.toc {border: 3px solid #A2A9B1;background-color: #F8F9FA;display: block;line-height: 1.4em;width: 70%;display: block;padding: 20px 30px 10px;}.toc ul li {list-style-type: none;}.toc a {text-decoration: none;}.toc strong {font-size: 20px;}.toc a:hover {text-decoration: underline;}{codeBox}

Step 1

Step 2

Step4: Now return to the post section and click on HTML to goto HTML section then paste the code below to make it work well.

Code:

<div class="toc">
 <strong>Contents [ hide ] </strong>
 <ul>
 <li> <span>1.</span><a href="#point1">Heading </a></li>
 <ul>
 <li><span>1.1.</span><a href="#sub1">Sub-Heading 1</a></li>
 <li><span>1.2.</span><a href="#sub2">Sub-Heading 2</a></li>
 <li><span>1.3.</span><a href="#sub3">Sub-Heading 3</a></li>
 </ul>
 <li><span>2.</span><a href="#point2">Heading 2 </a></li>
 <li><span>3.</span><a href="#point3">Heading 3 </a></li>
 <li><span>4.</span><a href="#point4">Heading 2 </a></li>
 <li><span>5.</span><a href="#point5">Heading 3 </a></li>
 </ul>
 </div>{codeBox}

Place Where You Want Table Of Contents

Step5: Now give id to your headings that you want to include in your table of contents on blogger post.

Example: [ id="post1" ] for my first heading.

Give Id

Step6: Give id to your sub-headings if there are any Sub-Headings in your post.

Example: [ id="sub1" ] for first sub-heading.

Give Id to Sub-Headings

Step7: Now, Change your "Headings" and "Sub-Headings" according to your id and headings.

Change Heading1 to your first heading

Update your post now you will see the working table of contents for the blog post.

Worked :)

Test Auto table of content vs Manual Table of content in Blogspot site.

Normal Pagespeed

Automatic Table of contents

Manual Table of Content

Manual Table of content is best but it has lots of disadvantages as well as the whole process is time-consuming.

FAQs

How do you add a table of contents to Blogger's post?

Answer: You can add a table of contents to the blogger by using some HTML CSS and javascript in your blogger theme.

How to add a table of contents widget for blogger?

Answer: To add a table of contents widget for blogger follow my instructions to add codes in your post.

How can I add a table of content in Blogger?

Answer: Table of content helps in SEO so you can add table of content in blogger by adding a few codes.

Does the table of contents help in ranking on Google?

Answer: Yes, table of contents helps in google ranking as you see "Jump To " snippets in google.

Conclusion

Follow each and every instruction then you can easily add a table of contents in blogger. The manual method of making a table of content is best for page speed. I suggest using the automatic table of content if you don't have a lot of time and a manual method of making a table of content if you have time.