Cara Membuat Table of Contents Melayang di Blogger

Arsipbiru.com - Daftar isi atau Table of Contents (TOC) merupakan sebuah daftar yang terdiri dari gagasan utama yang tersusun secara sistematis dalam sebuah artikel. Table of Contents (TOC) dapat dipergunakan sebagai rincian dari isi artikel yang berupa link yang memudahkan pengunjung untuk memilih bahasan apa yang akan dibaca. Table of Contents biasanya diletakkan setelah tulisan pengantar suatu artikel. Anda dapat menjumpai Table of Contents seperti ini di situs Wikipedia.

Sebelumnya, saya juga telah membagikan tutorial serupa, yaitu Cara Membuat Daftar Isi di Postingan Blogger. Namun, pada pertemuan kali ini, saya akan membagikan tutorial bagaimana cara membuat table of contents melayang di blogger.

Jika biasanya Table of Contents diletakkan setelah kata pengantar suatu artikel, maka beda halnya dengan Table of Contents yang akan saya bagikan ini. Table of Contents kali ini dapat melayang di samping postingan dengan fitur hide and seek. Sehingga tidak terlalu mengganggu konten yang lainnya.

Table of Contents ini biasa dijumpai pada template Median UI buatan JagoDesain. Jika Anda pernah melihat atau menggunakan template tersebut, tentunya Anda akan menjumpai Table of Contents yang melayang di samping postingan.

Bagi Anda yang tertarik ingin membuat Table of Contents melayang di Blogger, silahkan simak baik-baik langkah-langkahnya di bawah ini.

Cara Membuat Table of Contents Melayang di Blogger

1. Pertama, masuk ke akun Blogger masing-masing.

2. Lalu, pilih tab menu Tema > klik tanda panah ke bawah Sesuaikan > klik Edit HTML.

3. Kemudian cari kode </head> atau &lt;/head&gt;&lt;!--<head/>--&gt; dan masukkan kode berikut ini di atas kode </head>.

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

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

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

<b:if cond='data:view.isPost'>

<b:include data='post' name='post-Toc'/>

</b:if>