Table of Contents, which can be abbreviated as TOC or in Indonesian, is called Table of Contents, which is often found on blogs. For Wordpress, there is a TOC plugin that can create multi-level tables of contents automatically without the need to be complicated, but for blogger plugins such as table of contents are not available, aka you have to create them manually. That reason is what makes me want to share how to automatically create a table of contents in blogger.
What are the advantages of implementing a Multi Level Table of Contents on Blogger?
By adding Multi Level Table of Contents on Blogger will make it easier for readers to access your content. Why? When the Table of Contents is on your blog, visitors just need to click on the link in the Table of Contents if they want to read the point the reader wants, so readers don't have to navigate up and down manually because there are already points they can access. in the table of contents.
By adding a table of contents you can also increase your SEO score because Googlebot will crawl the link to the point of the blog discussion.
Why Should You Use Multi Level Table of Contents on Blogger?
This depends on my friend who wants to install, whether it's because you want to beautify your blog with a multi-level table of contents widget or want to make navigation easier so that visitors are comfortable. There is nothing wrong with you trying to implement this widget.
How the Multi Level Table of Contents Blogger Widget Works
This code or script will take all heading tags from h2 to h4 and will retrieve any text from that tag, if the taken heading tag has an id, for example
<h2 id="lorem">Lorem Ipsum</h2>then the id will be taken and used as a jump link to the heading tag. However, if there is no id attribute in the retrieved heading it will create an id with id section_1 then section_2 and so on.
How to Apply Multi Level Table of Contents Widget in Blogger
Before the steps below are done, make sure to back up the template you are using, and to apply this widget you must open blogger and then enter html mode, see the video below how to edit the template in html mode.
Now you can find the code
</body>at the bottom, you can use a shortcut and copy and paste the following code above it.CTRL+End<b:if cond='data:view.isPost'>
<script>
// Table of Contents. Licensed in GPL
//<![CDATA[
if(1==toc){function $get(e){return document.querySelector(e)}function $all(e){return Array.prototype.slice.call(document.querySelectorAll(e))}function buildTOC_ul(e){var t=[document.createElement("ol"),null,null];t[0].style;var n=0,l=0;return e||(e="h2, h3, h4"),$all(e).forEach(function(e){e.id||(e.id="section_"+ ++l);for(var i="H2"==e.tagName?0:"H3"==e.tagName?1:2;n<i;n++)t[n].appendChild(t[n+1]=document.createElement("ul"));n=i;var r=document.createElement("li");r.innerHTML="<a href='#"+e.id+"'></a>",r.firstChild.innerHTML=e.innerHTML,t[n].appendChild(r)}),t[0]}function addTOC(e,t,n){void 0===t&&(t=e.firstChild);var l="",i=e.className;i&&(l="."+(-1==i.indexOf(" ")?i:i.substr(0,i.indexOf(" ")))+" ");var r=l+"h2, "+l+"h3, "+l+"h4",d=document.createElement("div");d.className=n||"sidebox my-3",d.appendChild(document.createTextNode("Contents")),d.appendChild(buildTOC_ul(r)),e.insertBefore(d,t)}var _post_=$get(".post-body");addTOC(_post_,_post_.firstChild.nextSibling.nextSibling)}
//]]>
</script>
</b:if>
To call toc you can add the following code in each post.
<script>var toc=true;</script>
But if you want each post to have a multi-level table of contents widget without calling it, you can do the following.
Look for the code
</head>and paste the following code right above it.<b:if cond='data:view.isPost'><script>var
toc=true;</script></b:if>
Note that if you want to exclude the table of contents in the post, you must apply the following code at the end of each post that you don't want to display the table of contents widget.
<script>var toc=false;</script>Style Floating Next to Posts
If you want a multi-level table of contents to be displayed beside text then add the following code above the code
</head><style>
.sidebox {
border: 1px dotted rgb(127, 127, 127);
padding: 4px 3px 4px 6px; /* top right bottom left */
min-width: 100px ! important;
float: right ! important;
font-size: 90%;
margin-top: 1px;
margin-bottom: 1px;
margin-left: 6px;
visibility: visible;
max-width: 50%;
width: 35%;
}
.sidebox ul { padding:0em 0em 0em 1.3em; margin:0em; }//TRBL
</style>
The final word
The multi-level table of contents script is sourced from http://loyc.net/2014/javascript-toc.html. There is also a simple version that you can see How to Create an Automatic Table of Contents on Blogger Articles