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.


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.


Also Read: How to Add Custom Table of Contents & Smooth Scroll On WordPress {alert-info}

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.

table of contents template for blogger
Blogger Dashboard >Theme

Step2: Now click on edit HTML.

table of contents template for blogger
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>code-box
Step4: Then return back to your blogger and press "CTRL + F" and find " <head> then place that code and press Enter.

table of contents template for blogger
Step 1


table of contents template for blogger
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;
        } code-box
easy table of contents
Step 1

easy table of contents for blogger
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" .

easy table of contents for blogger
Step 1

html table of contents
Step 2

html table of contents
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>code-box

website table of contents
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>code-box



website table of contents
Paste Code At End



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

website table of contents
Works Perfectly


website table of contents
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.
website table of contents
Blogger Dashboard >Theme

Step2: Now click on edit HTML.
table of contents code
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;}code-box

table of contents code
Step 1


table of contents code
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>code-box


bootstrap table of contents
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.


bootstrap table of contents
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.





bootstrap table of contents
Give Id to Sub-Headings


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

floating table of contents html
Change Heading1 to your first heading




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

floating table of contents html
Worked :)


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


How to add Table of content in blogger
Normal Pagespeed

How to add Table of content in blogger
Automatic Table of contents

Manual Table of content
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.

Post a Comment

Previous Post Next Post