How to add Automatic Table of Contents in Blogger Post

TIAL WIZARDS

17 May, 2022

A+ A-

Hi to all, In this article I am going to tell you all about how to add automatic table of contents in blogger post easily in just few minutes and increase your blogger user experience.

So read the below provided steps carefully and completely, if you miss any one step then you will get issue while saving code, and also backup your code before adding the code, if any issues occurs then you can replace your code without any damage.

What are the main features of automatic table of contents ?

There are various features of table of contents in blogger website and some are as follows:

It is SEO Friendly.
It loads fast.
It is Responsive.
It decrease your website loading speed.
It will show, where yo want to place.
Adds unique ID in each headings.

Read the below steps completely to get clear idea about adding the code in your theme.

How to add Automatic Table of Contents in Blogger Post

Steps to add Automatic Table of Contents in Blogger Post

Step-1: Login to your blogger website dashboard by using your login credentials.

Step-2: Now choose your blog -> Theme option -> Customize -> Backup Theme code.

Step-3: Click on Customize -> choose Edit HTML -> Proceed to theme.

Step-4: Press CTRL + F and search for </head> tag and copy the below given code and paste it above the </head> tag.

The below provided code works for h2 headings, if you are using h3 headings then you need to replace h2 with h3 from the below code.


<!--[ Paste TOC Plugin Code Above </head> Tag  ]-->

<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[           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>

Step-5: Now again press CTRL + F and search for ]]></b:skin> tag and copy the below code and paste it above the ]]></b:skin> tag.


<!--[ Paste TOC CSS Code Above ]]></b:skin> Tag ]-->

.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;}

Step-6: Now again search for <data:post.body/> and replace this code with the below given code.


<!--[ Replace <data:post.body/> tag ]-->

<div id="post-toc"><data:post.body/></div>

Step-7: Click on save button.

Step-8: Now go to your post and paste the below provided code

Note: Here you can see two codes i.e. CSS and JavaScript codes, you need to add CSS code, where you want to show Table of Contents, and JavaScript code at the last of your post.


<!--[ Search for <body>  and just below/after it paste the following coding. if you don't find <body> then search for <body expr:class='data:blog.pageType'> ]-->



 <div class="mbtTOC">     <button onclick="mbtToggle()">Table of Contents</button>     <ol id="mbtTOC"></ol>     </div>
 
 <!--[ Script ]-->
 
 <script>mbtTOC();</script>

Step-9: Now after adding the two codes update your post.

Step-10: You have successfully added automatic table of contents in your blogger website.

Note:

If you get any issue while saving the code, then you need to backup your old code and follow the same steps again.

If you need to change the background color then you, need to edit the code provided in step-2.

If you want to customize automatic table of contents then you can search various html color codes from google and add them in the code provided in the step-2.

Conclusion:

If you follow all the above provided steps then you can easily add automatic table of contents in your blogger website easily in just few minutes.

How to add Automatic Table of Contents in Blogger Post

Steps to add Automatic Table of Contents in Blogger Post

Conclusion:

Subscribe

Oops! No Internet!

Cookies Consent

Steps to add Automatic Table of Contents in Blogger Post

Conclusion:

Subscribe

Follow by Email

Oops! No Internet!

Cookies Consent

Disclaimer

Disclaimer