Add Automatic Table Of Contents Plugin with JavaScript on Blogger

Automatic TOC Script

A table of contents is a list that was usually found on a page before the start of an article and is abbreviated as TOC. Clicking the components or headings of this list will lead you to the post on the heading-link you have clicked on. These list points are usually hyperlinks to < div > tags that bring you to the div Ids when you click them.

If you have longer articles, TOC can be useful for readers. By introducing the content table, you give them the chance to view the part of an article they wanted to read.

What is ToC?

Tables of contents are said to be a map for any of your larger document. I mean is an indication for your writing article which allow your visitors or users to navigate to some aspect on your content with the help of the table.
If any of you have read an article about Wikipedia, you’ve seen ToC of course, which makes it much easier for you to go to a particular section of the article. That’s about Content Table.

In short a ToC plugin is a table displaying the fundamental headings or subheadings in a document or post which work as jump link for a post. It make thing easy for your visitors to jump to the part of the post they which to read in matter of a single click.

What are the Impact of a Table of Content Plugin (TOC) On SEO?

TOC is said to be necessary for SEO, that is for blog that depend on organic search for living. The TOC will become site link in organic search as you can see below.

Google shows a ‘ Jump to section link ‘ from the ToC on that web-page to indicate the most appropriate result to the visitor.

While this improves the click-through rate to a site, it can also assist to attain greater rankings.

Benefit of ToC Plugin for Blogger Post

It’s Coded in pure JavaScript and short CSS
It’s super fast, No issue with your site speed
It will boost your ranking and your CTR
It will be added automatically to your post, No need adding code each time you want to publish article as mentioned earlier.
Creates both ordered or unordered list
The TOC plugin contains a Toggle Button
Easily Customized by changing the font and color.
It is Mobile responsive

How Can I Install or Add Automatic Table of Content Plugin on Blogger/ Blogspot

Let start, login to your blogger set H3 (subheading) and H4 (minor subheading) as your tag  that you wish to display as TOC in any of your published or about to create post. Why I decided that is to get perfect heading so that you will not have wrong heading tag and you will also not be penalize for ranking

Just follow the steps below:

Login to your blogger
Navigate to theme and click on it
Now click on EDIT HTML to make installation of the JavaScript and CSS codes for automatic Table of Contents plugin.
After you have clicked on edit html, now press CTR+F and paste the following code and hit enter button.
]]></b:skin>

Before the end of ]]></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;}

Step two; we have install the TOC plugin by using JavaScript which will help you to create table of content automatically  in Blogspot articles.
Press CRTL+F and search for the following code  </head> some cases the code of your html might be parse. If you can’t find </head> then copy the following code and search for it in your HTML &lt;/head&gt;&lt;
Now paste the below code before </head>  or &lt;/head&gt;&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>

When you are done with the above installation. Let move to next step by activating it in the post-body so that it display automatically whenever you publish article.
Under same edit html press CRTL+F and search for the following code in your blogger template <data:post.body/>  This code can appear in three times depend on your template. Remember the first code you see on your template is not the right code, then press enter to display another <data:post.body/>. in some cases it can be second code or the last code. If you have any problem about the code try to use our comment box.
If you have located the <data:post.body/> then replace it with this 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>

1. Edit # FFFFE0 to change the background color of the TOC box
2. Edit # f7f0b8 to change the border color of the TOC box
3. Edit # 707037 to modify the font color of the TOC headline section
4. Edit # 0080ff to amend the anchor link color
5. To amend font size of anchor links edit 15px
6. To change font size of TOC headline text edit 20px
7. Now click on save.

How to activate your TOC or create post will automatic TOC

The given JavaScript will scan H3 and H4 heading tags in your published articles, which will then become the table of contents of your article. I mean try to use H3 and H4 tag in any of your post.
That’s all for TOC plugin.