Cara memasang Table of Contents Secara Otomatis di Blogger

Cara memasang Table of Contents Secara Otomatis di Blogger

Snippet Tips Blogger

Arlina

7/13/2022

Table of Contents adalah daftar yang terdiri dari poin-poin atau bagian-bagian pokok bahasan yang terdapat pada sebuah artikel. Table of Contents bisa kita gunakan sebagai rincian dari isi artikel yang berupa link sehingga akan memudahkan pembaca untuk memilih informasi bagian pokok bahasan apa yang akan dibacanya. Table of Contents ini sering kita temui pada situs Wikipedia, Ensiklopedia, dan juga file PDF dari E-Book yang biasanya diletakkan setelah tulisan kata pengantar atau ide pokok dari sebuah artikel.

Baiklah, di sini Arlina Code akan memberikan tips tentang bagaimana Cara memasang Table of Contents Secara Otomatis di Blogger dengan mudah.

Cara memasang Table of Contents Secara Otomatis di Blogger

Untuk memasangnya silakan sobat ikuti langkah-langkah berikut ini.

Buka Blogger > Klik menu Tema > Klik tombol Edit HTML > Kemudian tambahkan kode CSS ini sebelum </head> atau &lt;/head&gt;&lt;!--<head/>--&gt;

Edit kode yang ditandai sesuai kebutuhan

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

Langkah selanjutnya, tambahkan kode di bawah ini sebelum </body> atau &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>

Selanjutnya tambahkan kode di bawah ini

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

Tepat di bawah kode

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

Ganti #animated-thumbnail dengan ID yang sesuai pada tema blog sobat. Contohnya seperti ini pada ID di pembungkus isi artikel post-body

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

Jadi hasilnya seperti ini

Kemudian agar Table of Contents ini muncul di halaman postingan, simpan kode di bawah ini

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

Tepat sebelum kode ini

</article>

Jadi hasilnya seperti ini

Jika sudah, klik tombol Simpan tema dan selesai.

Untuk hasilnya bisa sobat klik tombol di bawah ini

• Result

Demikian tips Cara memasang Table of Contents Secara Otomatis di Blogger, semoga bermanfaat dan wassalam.

Arlina