How to Create Table of Content For Your Website - Automatically insert Table to your Blog Post

Hello guys, are you on blogger platform and you wish to use automatic table of content for any post you published?
It's possible to setup automatic table of contents on Blogspot just like WordPress but you will need to add some HTML code on your template before it work.
When you add the code that will be given at the end of this article, TOC will be available on all post you publish.

Insert Table,add table ,blog post, technical bishnuji

What's is Table of contents

Table of contents is just a jump to tag that are used to break any pic on content and it also help blog post to rank on Google search results.
Table of contents is just like a navigation, if you do visit Wikipedia for research, you will noticed that their blog content are classified and when you click on some text it will take you to the contents without reloading the page.
That's just the function of table of contents.

Short definition of Table of contents: It's the one that display your subheadings or heading of any content, it function as jump link to main heading or subheadings of the article.

Benefits of using table of content on blogger platform

Table of content is highly required for SEO, only if your blog traffic depend on organic traffic, but if you are on entertainment you still need it to make your blog post neat.
Have you ever search on Google and you see jump to link as shown on this image;

That's the benefits of SEO it exposed your content to search engine and that will surely increase your organic traffic.

That jump to link on Google will surely boost your CTR, because search engine can understand your website better with the help of Automatic table of contents.

Other benefits of Automatic table of contents are listed below
After adding that code to your HTML, any time you publish an article, it will add TOC to your blog post on blogger.
It will increase your organic traffic, because it let google bot understand your website better.
It does not reduce your page speed.

How can I install Automatic TOC plugin on Blogspot
To install that is pretty cool, all you need is to follow this procedure carefully.

Go to your blogger dashboard, edit one of your blog post and but. Subheading (H3) and minor heading which is h4.
Publish the post and move to next step

Go to edit theme section and click on edit hmtl.
This is where we will enter some JavaScript that will work for automatic table of content.

Once you are on your HTML page, press this shortcut key CTR+F, when the box pop up, paste this following code and click on enter button to search for the code
]]></b:skin>

When you see the code, paste the following code before the end of this code ]]></b:skin>

/*####Automatic TOC Plugin ####*/
.TOC {
line-height: 1.4em;
padding: 20px 30px 20px 10px;
display: block;
width: 90%;
margin: 0 auto;
background: #f0f3f4;
border: 1px solid #ccc;
box-shadow: 1px 1px 2px #fff inset, -1px -1px 2px #fff inset;
border-radius: 3px/6px
}
.TOC ol,
.TOC ul {
margin: 0;
padding: 0;
}
.TOC ul {
list-style: none;
}
.TOC ol li,
.TOC ul li {
padding: 15px 0 0;
margin: 0 0 0 30px;
font-size: 15px;
}
.TOC a {
color: #0080ff;
text-decoration: none;
}
.TOC 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;}

Once you have paste the first code, let move to next step.

Press CRTL+F again to look for the following code </head> if you don't see that code, search for this one </head>&lt
Now paste the following code before the end of your head tag </head>&lt or </head>

If your blog use this </head> paste the following code before the end of </head>. Secondly, If your blog use this </head>&lt paste the following code before the end of </head>&lt

<script type=’text/javascript’>
//<![CDATA[
function TOC() {
var TOC = i = headlength = gethead = 0;
headlength = document.getElementById(“post-toc”).querySelectorAll(“h3, h4”).length;
for (i = 0; i < headlength; i++) {
gethead = document.getElementById(“post-toc”).querySelectorAll(“h3, h4”)[i].textContent;
document.getElementById(“post-toc”).querySelectorAll(“h3, h4”)[i].setAttribute(“id”, “point” + i);
TOC = “<li><a href=’#point” + i + “‘>” + gethead + “</a></li>”;
document.getElementById(“TOC”).innerHTML += TOC;
}
}
function mbtToggle() {
var mbt = document.getElementById(‘TOC’);
if (mbt.style.display === ‘none’) {
mbt.style.display = ‘block’;
} else {
mbt.style.display = ‘none’;
}
}
//]]>
</script>

Once you have paste the code successfully, let go to the next procedure on activating automatic table of contents for all your blog post.

Before the next step, save your template and move to next step.

On your HTML, Click on CRTK+F and search for this code <data:post.body/>
Noted that this code will appear twice on your blog html.
The first <data:post.body/> is not the real code you have to deal with, press enter to search for another code.
Some blogger template used htbe second code and some blogger template use the last code means you have to try the second and third code.

Try second code maybe it will work
On the second <data:post.body/>, just highlight it and replace it with the following code

<div id=”post-toc”>
<div class=’TOC’>
<button onclick=’mbtToggle()’>Table of Contents <i class=”fa fa-caret-down”></i> </button>
<ol id=’TOC’ />
</div>
<data:post.body/>
<script>
TOC();
</script>
</div>

After, click on save and reload the blog post use edit, incase you don't have any blog post you use heading and subheadings for, quickly create a blog post and published it maybe the code work. Incase it don't show, try the third <data:post.body/>. It will surely work.

Edit # FFFFE0 to change the color of your background the TOC box
After that hit on save button.

How to use automatic table of contents on blogger template

The above JavaScript install on your blogger template will look for H3 tag and H4 tag in any article you published as the TOC.

Author Credit : Written By Flashints

https://www.flashints.com/table-of-contents-plugin-blogspot/

How to Create Table of Content For Your Website - Automatically insert Table to your Blog Post