Konten artikel yang panjang memiliki beberapa keunggulan di mesin pencari Google. Tapi bagi pengunjung bisa sedikit melelahkan untuk membaca konten dengan banyak sub-judul untuk dijelajahi.
Karena itu diperlukan yang namanya fitur Daftar Isi atau Table of content (TOC) untuk menavigasi seluruh sub-judul agar pengunjung dapat langsung diarahkan ke topik yang mereka cari.
Nah, diartikel kali ini kita akan berbagi tutorial membuat table of contenct otomatis (TOC) atau yang sering disebut daftar isi di postingan blogger.
Table of Contents
Table Of Content (TOC) Otomatis di Blogger
Ada banyak cara membuat table of content blogger, dimana penerapannya sendiri yaitu bisa secara manual, otomatis dan semi otomatis.
Agar lebih mudah tanpa perlu menandai banyak bagian penting subjudul, kita akan menerapkan table of content otomatis menggunakan TocBot.
Apa itu TocBot?
TocBot merupakan library javascript yang bisa digunakan untuk membuat daftar isi (TOC) otomatis yang dinamis dari judul dalam halaman postingan blog.
Yang menarik adalah table of content dapat menyesuaikan posisi pengunjung saat pengunjung melewati setiap judul. TocBot juga mudah disesuaikan dan mendukung seluruh browser.
Memasang Table Of Content (TOC) Blogger
Langkah pertama salin dan pase kode berikut DI ATAS TAG </head>.
<b:if cond='data:view.isSingleItem'> <script src='https://cdnjs.cloudflare.com/ajax/libs/tocbot/4.18.2/tocbot.min.js'></script> </b:if>
Kemudian copy kode berikut dan pasang tepat DI ATAS TAG </body>
<b:if cond='data:view.isSingleItem'>
<script>/*<![CDATA[*/ var content=document.querySelector(".post-body"),headings=content.querySelectorAll("h2, h3, h4, h5, h6, h7"),headingMap={};Array.prototype.forEach.call(headings,function(e){var t=e.id?e.id:e.textContent.toLowerCase().replace(/[^a-z -]/gi,"").trim().split(" ").join("-").replace(/--/g,"-");headingMap[t]=isNaN(headingMap[t])?0:++headingMap[t],headingMap[t]?e.id=t+"-"+headingMap[t]:e.id=t}),tocbot.init({tocSelector:".Toc",contentSelector:".post-body",headingSelector:"h2, h3, h4, h5, h6, h7",hasInnerContainers:!0,listItemClass:"toc-list-item",orderedList:!1,headingsOffset:1}); /*]]>*/</script>
</b:if>
Catatan: Ganti KODE CLASS .post-body yang di tandai dengan CLASS Body template kamu jika dirasa berbeda
Di sini kita buat 2 versi, pertama menampilkannya dengan mode fixed dan ke dua di sidebar blog seperti contoh tampilan daftar isi wikipedia.
Contoh setiap versi bisa kamu cek di bawah.
Table of Content Melayang (Fixed)
Tambahkan CSS berikut DI ATAS TAG penutup </style> atau ]]></b:skin>.
/* tocbot */ .hidden{display:none;}.tocI:checked~.tocL{right:0;z-index:9999;}.tocI:checked~.tocL .tocC{opacity:0;visibility:hidden;}.tocI:checked~.tocL .fCls{background:rgba(0,0,0,.25);opacity:1;visibility:visible;}@-webkit-keyframes indicator{0%{opacity:0;}50%{opacity:1;}100%{opacity:0;}}@keyframes indicator{0%{opacity:0;}50%{opacity:1;}100%{opacity:0;}}.fixH .c::after{content:'\2715';line-height:18px;font-size:14px;}@media screen and (min-width:768px){.tocC{top:40px;}.tocI:checked~.tocL{z-index:9999;}}.fCls{display:block;position:fixed;top:-50%;left:-50%;right:-50%;bottom:-50%;z-index:1;transition:all .1s ease;background:transparent;opacity:0;visibility:hidden;}.tocL{position:fixed;top:0;bottom:0;right:-280px;width:280px;transition:all .1s ease;z-index:9999;}.tocLi{width:100%;height:100%;position:relative;background:#fff;box-shadow:0 5px 30px 0 rgba(0,0,0,.05);z-index:2;border-radius:12px 0 0 12px;}.tocLs{position:relative;top:20px;background:inherit;}.fixH{display:flex;background:inherit;position:absolute;top:0;left:0;right:0;padding:0 10px;z-index:2;}.tocC{position:absolute;left:-45px;top:105px;transition:all .1s ease;}.tocC span{display:flex;align-items:center;justify-content:center;width:45px;height:40px;border-radius:15px 0 0 15px;background:#fff;box-shadow:0 0 10px 0 rgba(0,0,0,.1);transition:inherit;z-index:1;}.tocC span svg{opacity:.95;width:22px;height:22px;}.tocT{display:flex;width:100%;}.fixT::before{content:attr(data-text);flex-grow:1;padding:16px 10px;font-size:90%;opacity:.7;}.fixH .cl{padding:0 10px;display:flex;align-items:center;justify-content:flex-end;position:relative;flex-shrink:0;min-width:40px;}.tocIn{padding:50px 0 0;overflow-y:scroll;overflow-x:hidden;width:100%;height:calc(100vh - 60px);}.tocIn>ol{padding:0 20px 20px;}.tocIn ol{list-style:none;padding:0;margin:0;line-height:1.5em;}.tocIn ol ol,.tocIn li:not(:last-child){margin-bottom:5px;}.tocIn li a{flex:1 0 calc(100% - 23px);}.tocIn a{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;color:inherit;text-decoration:none;}.toc-list{width:100%;position:relative;box-shadow:2px 0 0 0 #0000001a inset;}.toc-list.is-collapsible .toc-link{padding-left:2.25rem;}.toc-list.is-collapsed{display:none;}.toc-link{display:block;color:#495057;padding:.75rem 1rem .75rem 1.5rem;transition:.5s;}.toc-link.is-active-link{background-color:#eceff1;font-weight:500;box-shadow:2px 0 0 0 #495057 inset;}.docs-toc{--bg-scrollbar-thumb:#ced4da;--bg-scrollbar-track:transparent;}
Jika semua sudah selesai klik SAVE/SIMPAN
Terakhir memasang HTML table of content nya, Buka TATA LETAK Blogger > TAMBAH GADGET > Pilih HTML/JAVASCRIPT
Tambahkan kode HTML berikut ini, kemudian SIMPAN
<input class='tocI hidden' id='forTocJs' type='checkbox' />
<div class='tocL'>
<div class='tocLi'>
<div class='tocLs'>
<label aria-label='Tutup' class='tocH fixH' for='forTocJs'>
<div class='tocC'>
<span>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-card-list" viewBox="0 0 16 16">
<path d="M14.5 3a.5.5 0 0 1 .5.5v9a.5.5 0 0 1-.5.5h-13a.5.5 0 0 1-.5-.5v-9a.5.5 0 0 1 .5-.5h13zm-13-1A1.5 1.5 0 0 0 0 3.5v9A1.5 1.5 0 0 0 1.5 14h13a1.5 1.5 0 0 0 1.5-1.5v-9A1.5 1.5 0 0 0 14.5 2h-13z"></path>
<path d="M5 8a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7A.5.5 0 0 1 5 8zm0-2.5a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5zm0 5a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5zm-1-5a.5.5 0 1 1-1 0 .5.5 0 0 1 1 0zM4 8a.5.5 0 1 1-1 0 .5.5 0 0 1 1 0zm0 2.5a.5.5 0 1 1-1 0 .5.5 0 0 1 1 0z"></path>
</svg>
</span>
</div>
<div class='tocT fixT' data-text='Daftar Isi'>
<span class='c cl' data-texxt='Tutup'></span>
</div>
</label>
<div class='Toc tocIn scroll' id='tocAuto'>
</div>
</div>
</div>
<label class="fCls" for="forTocJs"></label>
</div>
See the Pen TOC Sidebar Blogger by inputekno (@inputekno) on CodePen.
Table of Content Sidebar Blogger
Tambahkan CSS berikut DI ATAS TAG penutup </style> atau ]]></b:skin>.
.toc-list{width:100%;position:relative;box-shadow:2px 0 0 0 #0000001a inset}.toc-list.is-collapsible .toc-link{padding-left:2.25rem}.toc-list.is-collapsed{display:none}.toc-link{display:block;color:#495057;padding:.75rem 1rem .75rem 1.5rem;transition:.5s}.toc-link.is-active-link{background-color:#eceff1;font-weight:500;box-shadow:2px 0 0 0 #495057 inset}.docs-toc{--bg-scrollbar-thumb:#ced4da;--bg-scrollbar-track:transparent}@media (min-width:992px){.docs-toc .scroll{max-height:calc(100vh - 3.5rem - 44px)}}@media (max-width:991px){.docs-toc{display:none}}ol.toc-list,ul.toc-list{list-style:none;padding:0}
Jika semua sudah selesai klik SAVE/SIMPAN
Terakhir memasang HTML table of content nya, Buka TATA LETAK Blogger > TAMBAH GADGET > Pilih HTML/JAVASCRIPT
Tambahkan kode HTML berikut ini, kemudian SIMPAN
<div class="docs-toc scroll"> <div class="Toc"> </div> </div>
See the Pen TOC Sidebar Blogger by inputekno (@inputekno) on CodePen.
Jika semua langkah di atas sudah selesai, sekarang kamu bisa lihat hasilnya di halaman postingan blog
Optimalisasi TOC dengan API TocBot
TocBot juga menyediakan API untuk melakukan optimalisasi table of content yang sudah tadi kita buat.
API dilengkapi dengan banyak fitur yang dapat kamu edit juga:
- Daftar item yang dapat diciutkan.
- Subjudul dalam tabel.
- Offset untuk navigasi tabel.
- Memperbaiki nav atau statis.
- Tautan ekstra untuk ditambahkan ke navigasi.
Baca dokumentasi TocBot untuk lebih detailnya terkait API TocBot untuk edit table of content
Penutup
Nah itu tadi Cara Membuat Table Of Content (TOC) Otomatis di Postingan Blogger. Semoga artikel ini bisa bermanfaat dan jika ada pertanyaan silakan tanyakan melalui komentar. Kamu juga bisa share dan rekomendasikan ke teman-teman yang membutuhkan.