Installing Automatic Table Of Contents on Blogger

Table of Contents

Table Of Contents is a list consisting of the main sections contained in an article. You can use the table of content as a detail of the contents of the article in the form of a link so that it will make it easier for readers to select information on the subject matter they are reading.

This article, I will give tips on how to easily install Automatic Table Of Contents on Blogger like Arlina Design.

Installing Automatic Table Of Contents on Blogger

In order to install it, please follow the steps below:

1. Open Blogger > Click the Themes menu > Click Edit HTML

2. Add this CSS code before </head> or &lt;/head&gt;&lt;!--<head/>--&gt;

Edit the marked code as needed

<b:if cond='data:view.isPost'>
<style>
/* Table of Content */
@media screen and (min-width:1024px){::-webkit-scrollbar{-webkit-appearance:none;width:4px;height:5px}::-webkit-scrollbar-thumb{background-color:rgba(0,0,0,.15);border-radius:10px}::-webkit-scrollbar-track{background-color:transparent}::-webkit-scrollbar-thumb:hover{background-color:rgba(0,0,0,.25)}}
svg.line,svg .line{fill:none!important;stroke:#48525c;stroke-linecap:round;stroke-linejoin:round;stroke-width:1}
.post-body h1:target,.post-body h2:target,.post-body h3:target,.post-body h4:target,.post-body h5:target,.post-body h6:target{padding-top:20px;margin-top:0;transition:all .6s}
html{scroll-behavior:smooth;overflow-x:hidden}.artToc{position:fixed;top:25px;right:-355px;bottom:0;left:0;width:355px;max-height:450px;margin-left:auto;transition:all .1s ease;display:flex;align-items:center;justify-content:flex-end;z-index:2;border-radius:6px;box-shadow:0 5px 2rem -1rem rgb(0 0 0 / 15%)}.tableOfContainer{width:100%;height:100%;background-color:#fff;border-radius:6px;transition:all .1s ease;display:flex;position:relative;z-index:3}.tableOfHeader{background:rgba(255,255,255,.98);border-radius:6px 6px 0 0;display:flex;align-items:center;justify-content:space-between;padding:15px 20px;font-size:14px;font-weight:400;position:absolute;top:0;right:0;left:0;border-bottom:1px solid rgba(0,0,0,0.07);z-index:1;transition:inherit;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}.tableOfHeader svg{width:20px;height:20px;cursor:pointer}.tableOfHeader span:before{content:attr(data-text)}.tableOfIcon{width:55px;height:40px;display:flex;align-items:center;justify-content:center;cursor:pointer;background-color:#fefefe;border-radius:50px 0 0 50px;border:1px solid #eceff1;border-right:0;box-shadow:0 5px 2rem -1rem rgb(0 0 0 / 15%);position:absolute;top:10px;left:-55px}.tableOfIcon:before{content:&#39;&#39;;display:block;width:12px;height:12px;background-color:#1b5fb9;border:2px solid #fefefe;border-radius:50%;position:absolute;top:8px;left:15px}.tableOfInner{margin-top:30px;padding:45px 25px;width:100%;overflow-y:auto}.tableOfContent a{color:inherit;display:flex}.tableOfContent ol{margin:0}.tableOfContent li &gt;a:before{opacity:.5}.post .tocInner li,.tableOfContent li{display:flex;flex-wrap:wrap}.post .tocInner li ol,.post .tocInner li ul,.tableOfContent li ol{width:100%;padding-left:26px;margin-bottom:10px;margin-top:5px}.post .tocInner li &gt;*:before,.tableOfContent li &gt;a:before{content:counters(toc-count,&#39;.&#39;)&#39;. &#39;;counter-increment:toc-count;display:inline-block;min-width:20px;margin-right:5px;flex-shrink:0;font-weight:400}.post .tocInner{border:1px solid rgba(0,0,0,0.07);border-left:0;border-right:0;padding:15px 15px;margin:30px 0;font-size:14px}.post .tocTitle{outline:0;font-weight:700;line-height:1.8em;display:flex;align-items:center}.post .tocTitle:after{content:&#39;Hide all&#39;;font-weight:400;font-size:85%;font-family:Google Sans;margin-left:auto}.post .tocContent{max-height:1000vh;transition:all .4s ease;overflow:hidden}.post .tocInput:checked ~ .tocContent{max-height:0}.post .tocInput:checked ~ .tocTitle:after{content:&#39;Show all&#39;;overflow:hidden}.post .tocInner a{display:flex;color:inherit}.post .tocInner ol,.post .tocInner ul,.tableOfContent ol{padding:0;list-style:none;font-size:inherit;font-weight:400;counter-reset:toc-count;line-height:1.75em}.tocMenu:checked ~ .artToc{right:25px}.tocMenu:checked ~ .artToc .tableOfIcon{opacity:0;visibility:hidden}
@media screen and (max-width:896px){.artToc{right:0;width:75%;max-width:480px;margin-right:-480px}.tableOfContainer{}.tableOfHeader,.tableOfIcon{}.tableOfInner{}.tocMenu:checked ~ .artToc{z-index:10;margin-right:0}.tocMenu:checked ~ .artToc .fullClose{background:rgba(0,0,0,.25);opacity:1;visibility:visible}}
@media screen and (max-width:480px){.artToc{margin-right:-75%}.tableOfHeader,.tableOfInner{padding-left:20px;padding-right:20px}}
</style>
</b:if>

3. Next, add the code below before </body> or &lt;!--</body>--&gt;&lt;/body&gt;

<b:if cond='data:view.isPost'>
<script>
//<![CDATA[
// Table of Content
class TableOfContents{constructor({from:a,to:b}){this.fromElement=a,this.toElement=b,this.headingElements=this.fromElement.querySelectorAll("h1, h2, h3, h4, h5, h6"),this.tocElement=document.createElement("div")}getMostImportantHeadingLevel(){let a=6;for(let b=0;b<this.headingElements.length;b++){let c=TableOfContents.getHeadingLevel(this.headingElements[b]);a=c<a?c:a}return a}static generateId(a){return a.textContent.replace(/\s+/g,"_")}static getHeadingLevel(a){switch(a.tagName.toLowerCase()){case"h1":default:return 1;case"h2":return 2;case"h3":return 3;case"h4":return 4;case"h5":return 5;case"h6":return 6}}generateToc(){let g=this.getMostImportantHeadingLevel()-1,a=this.tocElement;for(let d=0;d<this.headingElements.length;d++){let b=this.headingElements[d],h=TableOfContents.getHeadingLevel(b),e=h-g,c=document.createElement("a");if(b.id||(b.id=TableOfContents.generateId(b)),c.href=`#${b.id}`,c.textContent=b.textContent,e>0){for(let i=0;i<e;i++){let j=document.createElement("ol"),k=document.createElement("li");j.appendChild(k),a.appendChild(j),a=k}a.appendChild(c)}else{for(let l=0;l< -e;l++)a=a.parentNode.parentNode;let f=document.createElement("li");f.appendChild(c),a.parentNode.appendChild(f),a=f}g=h}this.toElement.appendChild(this.tocElement.firstChild)}};
//]]>
</script>
</b:if>

4. Next, add the code below

<b:includable id='post-Toc' var='post'>
   <b:if cond='data:view.isPost'>
      <input class='tocMenu hidden' id='offtoc-nav' type='checkbox'/>
      <div class='artToc'>
      <div class='tableOfContainer'>
         <label class='tableOfHeader' for='offtoc-nav'>
            <span class='tableOfIcon'>
               <svg class='line' viewBox='0 0 24 24'>
                  <g transform='translate(3.610000, 2.750100)'>
                     <line x1='11.9858' x2='4.7658' y1='12.9463' y2='12.9463'/>
                     <line x1='11.9858' x2='4.7658' y1='9.1865' y2='9.1865'/>
                     <line x1='7.521' x2='4.766' y1='5.4272' y2='5.4272'/>
                     <path d='M7.63833441e-14,9.25 C7.63833441e-14,16.187 2.098,18.5 8.391,18.5 C14.685,18.5 16.782,16.187 16.782,9.25 C16.782,2.313 14.685,0 8.391,0 C2.098,0 7.63833441e-14,2.313 7.63833441e-14,9.25 Z'/>
                  </g>
               </svg>
            </span>
            <span data-text='Table of contents'/>
            <svg class='line' viewBox='0 0 24 24'>
               <g transform='translate(12.000000, 12.000000) rotate(-90.000000) translate(-12.000000, -12.000000) translate(5.000000, 8.500000)'>
                  <path d='M14,0 C14,0 9.856,7 7,7 C4.145,7 0,0 0,0'/>
               </g>
            </svg>
         </label>
         <div class='tableOfInner'>
            <div class='tableOfContent' id='tocContent'/>
            </div>
            <script>/*<![CDATA[*/ document.addEventListener('DOMContentLoaded', () => new TableOfContents({from: document.querySelector('#animated-thumbnail'), to: document.querySelector('#tocContent')}).generateToc() ); /*]]>*/</script>
         </div>
      </div>
      <label class='fullClose' for='offtoc-nav'/>
   </b:if>
</b:includable>

5. Right below the code

<b:includable id='post' var='post'>...</b:includable>

Replace #animated-thumbnail with the appropriate ID on your blog theme. Example on the ID in the article content wrapper post-body

<div class='post-body entry-content' id='animated-thumbnail' itemprop='articleBody'>

The complete result is as shown below.

Then so that this table of contents appears on the posting page, save the code below right before the code </article>

<b:if cond='data:view.isPost'>
<b:include data='post' name='post-Toc'/>
</b:if>

Complete result like this.

6. Done! Save the theme

For a demo and display you can see in the image post above this article. That's how to install Automatic Table Of Content on Blogger.