Cara Membuat Table Of Content (TOC) Di Postingan Blog

Cara membuat Table Of Content (TOC) multilevel dan otomatis di postingan Blog pada platform Blogger yang responsif dan dapat ditempatkan dimana saja sesuai keinginan. Multilevel yang dimaksud disini adalah susunan heading (judul) bertingkat dimana setiap heading (judul) bisa saja mempunyai Sub Heading (Sub Judul) dan semuanya akan ditampilkan dalam Table Of Content tersebut.

{tocify} $title={Table of Contents}

Table Of Content (TOC) ini akan berfungsi bilamana didalam artikel telah dibuat susunan daftar Heading yang terdiri dari H1, H2 dan H3 dan seterusnya. Untuk itu sebelumnya kalian harus membuat judul pada artikel menggunakan format heading tersebut. Sebaiknya kalian menggunakan susunan heading yang SEO yang jelas dan bertingkat.

A. Pengertian Table Of Content ( TOC)

Table Of Content ( TOC)  bila diterjemahkan kedalam bahasa Indonesia adalah daftar Isi yang berarti susunan daftar yang menjabarkan isi seluruh artikel dan dirangkum menjadi ide pokok dalam bentuk judul. Jadi Table Of Content (TOC) ini akan menampilkan daftar heading (judul) yang ada dalam artikel yang dibuat.

Table Of Content (TOC) pada tutorial kali ini merupakan daftar isi multilevel yang akan menampilkan setiap Sub Heading berada dibawah Heading dan memiliki inden (jarak) yang tidak sama dengan Heading tersebut, sehingga tampilan lebih jelas dan menarik dan berstruktur rapi.

B. Manfaat Table Of Content ( TOC)

Membuat Table Of Content ( TOC) dalam postingan Blog memiliki beberapa manfaat diantaranya:

1. Table Of Content sangat memudahkan pembaca untuk mencari ide pokok dari artikel yang ingin dibaca hanya cukup dengan mengklik link heading (judul) yang telah disediakan;

2. Table Of Content membantu pembaca yang mengunjungi Blog kita agar lebih mudah mengetahui point serta ide pokok apa saja yang ingin disampaikan oleh pemilik Blog melalui postingan tersebut;

3. Table Of Content memudahkan mesin perayap Google untk mengenali postingan artikel kita, karena Google menganggap artikel tersebut memiliki nilai informatif yang besar bagi pembaca;

4. Table Of Content membuat tampilan postingan artikel lebih rapi dan lebih mudah diakses dan dipahami oleh pembaca karena memilki struktur yang jelas;

C. Cara Membuat Table Of Content ( TOC)

Untuk membuat Table Of Content ( TOC) ini dangat mudah, kalian ikuti langkah-langkah dibawah ini dengan benar:

1. Copy lalu pastekan script dibawah dan letakkan di atas/sebelum </head>.

<link href='https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet'/>
<b:tag href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/fontawesome.min.css' name='link' rel='stylesheet'/>
<b:tag cond='data:blog.languageDirection == &quot;rtl&quot;' href='https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700&amp;display=swap' name='link' rel='stylesheet'/>

2. Lakukan pencarian kode post-body entry-content atau langsung saja mencari kode <div class='post-body-artikel'>. Untuk template VioMagz v4.7.0 kalian akan menemukannya pada posisi kedua pencarian. Lalu tambahkan kode id='post-body' pada <div class='post-body-artikel'> tersebut sehingga nanti menjadi

<div class='post-body-artikel' id='post-body'>

3. Copy script code yang ada dalam Syntax Highligter👀 dibawah dan letakkan diatas/sebelum kode ]]></b:skin>.

/* TOC Kode */
@font-face{font-family:"Font Awesome 5 Brands";font-display:swap;font-style:normal;font-weight:400;font-display:block;src:url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/webfonts/fa-brands-400.eot);src:url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/webfonts/fa-brands-400.eot?#iefix) format("embedded-opentype"),url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/webfonts/fa-brands-400.woff2) format("woff2"),url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/webfonts/fa-brands-400.woff) format("woff"),url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/webfonts/fa-brands-400.ttf) format("truetype"),url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/webfonts/fa-brands-400.svg#fontawesome) format("svg")}.fab{font-family:"Font Awesome 5 Brands";font-weight:400}
@font-face{font-family:"Font Awesome 5 Free";font-display:swap;font-style:normal;font-weight:400;font-display:block;src:url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/webfonts/fa-regular-400.eot);src:url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/webfonts/fa-regular-400.eot?#iefix) format("embedded-opentype"),url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/webfonts/fa-regular-400.woff2) format("woff2"),url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/webfonts/fa-regular-400.woff) format("woff"),url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/webfonts/fa-regular-400.ttf) format("truetype"),url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/webfonts/fa-regular-400.svg#fontawesome) format("svg")}.far{font-family:"Font Awesome 5 Free";font-weight:400}
@font-face{font-family:"Font Awesome 5 Free";font-display:swap;font-style:normal;font-weight:900;font-display:block;src:url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/webfonts/fa-solid-900.eot);src:url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/webfonts/fa-solid-900.eot?#iefix) format("embedded-opentype"),url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/webfonts/fa-solid-900.woff2) format("woff2"),url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/webfonts/fa-solid-900.woff) format("woff"),url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/webfonts/fa-solid-900.ttf) format("truetype"),url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/webfonts/fa-solid-900.svg#fontawesome) format("svg")}.fa,.far,.fas{font-family:"Font Awesome 5 Free"}.fa,.fas{font-weight:900}
.tocify-wrap{display:flex;width:100%;clear:both;margin:0}
.tocify-inner{position:relative;max-width:100%;background-color:rgba(128, 135, 136, 0.1);display:flex;flex-direction:column;overflow:hidden;font-size:13px;color:#4169E1;line-height:1.6em;border:1px solid;border-color:#B1B1B1;border-radius:5px}
.tocify-inner a:hover{color:#FFA500;}
a.tocify-title{position:relative;height:38px;font-size:15px;color:#4169E1;font-weight:600;display:flex;align-items:center;justify-content:space-between;padding:0 15px;margin:0;border-radius:5px}
a.tocify-title.is-expanded{border-bottom:1px solid;border-color:#ADADAD;border-radius:5px 5px 0 0}
.tocify-title-text{display:flex}
.tocify-title-text:before{content:'\f0cb';font-family:'Font Awesome 5 Free';font-size:13px;font-weight:900;margin:0 6px 0 0}
.rtl .tocify-title-text:after{margin:0 0 0 6px}
.tocify-title:after{content:'\f078';font-family:'Font Awesome 5 Free';font-size:12px;font-weight:900;margin:0 0 0 25px}
.rtl .tocify-title:after{margin:0 25px 0 0}
.tocify-title.is-expanded:after{content:'\f077'}
a.tocify-title:hover{text-decoration:none}
#tocify{display:none;padding:8px 15px;margin:0}
#tocify ol{padding:0 0 0 20px}
.rtl #tocify ol{padding:0 20px 0 0}
#tocify li{font-size:13px;margin:7px 0}
#tocify li a{color:#4169E1;}
.tocify-inner ol>li{counter-increment:ify;list-style:none}
.tocify-inner ol>li:before{display:inline-block;margin:0 5px 0 0}
#tocify li a:hover{color:#FFA500;text-decoration:underline}
@media (max-width: 350px) {
.tocify-inner{min-width:100%}
}

Script diatas sudah support warna background untuk Dark Mode Tempate VioMagz👀 sehingga tidak perlu lagi menambahkan sript untuk menyesuaikannya bila kalian menggunakan Dark Mode.

4. Salin script kode dibawah ini dan paste diatas/sebelum kode </body>.

<script type='text/javascript'>
//<![CDATA[
!function(t){"use strict";var n=function(n){return this.each(function(){var e,i,a=t(this),o=a.data(),c=[a],r=this.tagName,d=0;e=t.extend({content:"body",headings:"h1,h2,h3"},{content:o.toc||void 0,headings:o.tocHeadings||void 0},n),i=e.headings.split(","),t(e.content).find(e.headings).attr("id",function(n,e){return e||function(t){0===t.length&&(t="?");for(var n=t.replace(/\s+/g,"_"),e="",i=1;null!==document.getElementById(n+e);)e="_"+i++;return n+e}(t(this).text())}).each(function(){var n=t(this),e=t.map(i,function(t,e){return n.is(t)?e:void 0})[0];if(e>d){var a=c[0].children("li:last")[0];a&&c.unshift(t("<"+r+"/>").appendTo(a))}else c.splice(0,Math.min(d-e,Math.max(c.length-1,0)));t("<li/>").appendTo(c[0]).append(t("<a/>").text(n.text()).attr("href","#"+n.attr("id"))),d=e})})},e=t.fn.toc;t.fn.toc=n,t.fn.toc.noConflict=function(){return t.fn.toc=e,this},t(function(){n.call(t("[data-toc]"))})}(window.jQuery);
//]]>
</script>
<script type='text/javascript'>
//<![CDATA[
function shortCodeIfy(t,i,o){for(var e=t.split("$"),c=/[^{\}]+(?=})/g,n=0;n<e.length;n++){var a=e[n].split("=");if(a[0].trim()==i)return null!=(o=a[1]).match(c)&&String(o.match(c)).trim()}return!1}$(".post-body b").each(function(){var t=$(this),i=t.text();i.toLowerCase().trim().match("{tocify}")&&(i=0!=shortCodeIfy(i,"title")?shortCodeIfy(i,"title"):"Table of Contents",t.replaceWith('<div class="tocify-wrap"><div class="tocify-inner"><a href="javascript:;" class="tocify-title" role="button" title="'+i+'"><span class="tocify-title-text">'+i+'</span></a><ol id="tocify"></ol></div></div>'),$(".tocify-title").each(function(t){(t=$(this)).on("click",function(){t.toggleClass("is-expanded"),$("#tocify").slideToggle(170)})}),$("#tocify").toc({content:"#post-body",headings:"h2,h3,h4"}),$("#tocify li a").each(function(t){(t=$(this)).click(function(){return $("html,body").animate({scrollTop:$(t.attr("href")).offset().top-20},500),!1})}))});
//]]>
</script>

5. Selanjutnya ketahap membuat TOC di postingan kalian cukup copy dan pastekan script kode dibawah kedalam postingan mode compose (tampilan menulis) dimana saja yang kalian inginkan. Setelah itu beri format Font Bold (huruf tebal) untuk mengaktifkan fungsi Table Of Content ( TOC) tersebut.

{tocify} $title={Table of Contents}

D. Kelebihan Script Table Of Content ( TOC) Butta Toa

Script kode Table Of Content ( TOC) diatas mempunyai kelebihan dan yang membedakannya dengan Table Of Content ( TOC) yang lain yaitu:

1. Table Of Content diatas sangat responsive untuk semua perangkat baik dekstop maupun mobile;

2. Sudah menyediakan daftar isi multilevel yang dapat menampilkan Heading dan Sub Heading secara otomatis dan multilevel heading;

3. Dapat di tempatkan dimana saja didalam postingan artikel sesuai yang kita inginkan;

4. Kalian bisa membuat marker (daftar urut) sesuai keinginan karena Table of Content (TOC) tersebut diatas tidak diberikan daftar urut secara otomatis. Hal ini membuat penulis bisa memberi urutan daftar heading secara manual sesuai keinginan.

   Selain itu, artikel juga tampil lebih menarik dan membuat artikel terlihat jelas susunan dan struktur level headingnya karena adanya pemberian daftar urut (marker) pada setiap heading (judul) tersebut.
   

5. Tidak perlu membuat script HTML atau bolak balik penulisan scrip code Table Of Content ( TOC) pada editing postingan karena kalian cukup copy Script HTML point (...) diatas kedalam Tampilan Menulis (Compose) dan pastekan dimana saja kalian ingin tempatkan Table Of Content ( TOC) tersebut.

Bila kalian ingin melihat dalam bentuk video, silahkan berkunjung ke Butta Toa Youtube Channel👀, dan bila memiliki pertanyaan atau mengalami masalah seputar Table Of Content ( TOC) diatas silahkan berkomentar atau kirimkan pertanyaan kalian melalui form kontak yang tersedia dibawah. Semoga tutorial kali ini kembali membawa manfaat, Wassalam.

Share :