Membuat Table Of Content (TOC) Multilevel Postingan Blogger

Blog Buttatoa | Menambahkan Table Of Content (TOC) - User experience atau pengalaman pengguna merupakan salah satu elemen penting yang perlu dipertimbangkan user blog dalam membuat suatu artikel, atau tutorial yang cukup panjang. Menambahkan Table Of Content (TOC) terutama untuk bacaan yang panjang, dapat meningkatkan pengalaman pengguna atau pembaca yang kemudian akan menjadi acuan apakah pembaca akan membaca artikel yang telah kalian posting.

{tocify} $title={Table of Contents}

Misalkan kalian membuat sebuah artikel atau tutorial yang berkisar 1.000 kata dan memiliki empat subjudul (H3) atau lebih, maka artikel tersebut sudah dapat dikategorikan sebagai bacaan yang panjang. Dengan bacaan yang panjang seperti itu, maka menambahkan Table Of Content (TOC) dapat mengatur isi, tema pokok atau bagian penting dari artikel yang dibuat untuk segera diketahui dan ditemukan oleh pembaca dan tentu saja hal tersebut dapat memotivasi pengunjung untuk terus membaca.

Apa Itu Table Of Content (TOC)?

Table Of Content atau dalam bahasa Indonesia berarti "Daftar Isi" adalah daftar terorganisir yang merupakan bagian dari postingan blog, buku, atau dokumen yang diberi label berupa label dengan angka, huruf atau kode lainnya.

Table Of Content (TOC) umumnya selalu ditempatkan di awal postingan, namun terkadang ada beberapa blogger yang juga menambahkan daftar isi dibagian tengah artikel. Dengan adanya daftar isi tersebut, pembaca akan segera mengetahui garis besar isi tentang artikel tersebut dengan hanya dengan melirik bagian yang terdaftar. Pembaca juga dapat melompat ke topik yang mereka minati hanya dengan mengklik bagian tertentu dari daftar yang ada dalam TOC.

Manfaat Menggunakan Table Of Content (TOC)

Ada banyak alasan yang dapat dikemukakan, tentang betapa pentingnya membuat dan menggunakan Table Of Content (TOC) di blog, diantaranya:

Navigasi Lebih Mudah
Dengan adanya TOC, maka konten atau artikel yang kita sajikan akan lebih terorganisir, sehingga saat pembaca mengunjungi blog kita untuk pertama kalinya baik melalui tautan rujukan ataupun kueri mesin telusur, maka pengunjung dapat menemukan informasi yang spesifik.
Table Of Content (TOC) yang dapat diklik juga dapat memudahkan pembaca untuk menavigasi postingan blog yang memiliki isi artikel yang panjang dengan banyak subjudul karena dapat mempersingkat pencarian informasi yang dicari tanpa harus menggulir halaman ke bawah.
Dengan adanya Table Of Content (TOC) ini, pembaca dapat langsung berpindah ke bagian manapun, bahkan sampai pada bagaina terakhir artikel. Apalagi ditambah navigasi tombol back to top, mereka dapat dengan mudah kembali ke bagian pertama.
Meningkatkan User experience dan Mengurangi Ratio Pentalan
Google peduli dengan kualitas desain dan Table Of Content (TOC) memberikan peningkatkan User experience (pengalaman pengguna) blog kalian. Pengunjung dapat menavigasi dengan mudah melalui posting blog dan menemukan informasi yang mereka butuhkan dengan cepat.
Konten yang berisi artikel yang cukup panjang sudah menjadi aturan wajib bagi sebuah blog. Blog yang memiliki artikel yang panjang relatiif lebih dihargai karena menyediakan informasi komprehensif tentang suatu topik dan memenuhi maksud pencarian orang.
Akan tetapi pencarian lebih banyak serta kunjungan organik untuk konten artikel yang panjang tidak boleh mengorbankan User experience. Jadi pastikan kalian menyediakan TOC untuk memudahkan pembaca mencari lebih cepat informasi yang diinginkan.
Memiliki Banyak Keyword (Kata Kunci)
Algoritma Google memberikan fokus kata kunci tambahan pada bagian yang berbeda dari blog kalian. Dengan bantuan Table Of Content (TOC) tersebut, akan memberikan keyword yang banyak dan berbeda yang dapat mempengaruhi blog kalian untuk tampil dan sering muncul di banyak pencarian sehingga peringkat blog kalian juga akan meningkat.
Meningkatkan Click Through Rate (CTR)
Jika blog kalian memiliki bagian yang berbeda, menggunakan Table Of Content (TOC) / daftar isi yang dapat diklik secara otomatis menghasilkan tautan yang dapat dibagikan untuk setiap bagian dan kalian dapat membagikan URL ini dengan siapa saja untuk membuat tautan balik ke bagian tersebut.
Bagian yang berbeda di blog kalian akan menghasilkan tautan balik jangkar yang dapat meningkatkan rasio Click Through Rate (klik tayang) kalian karena pengguna mungkin termotivasi untuk langsung membuka informasi yang mereka cari.

Cara Menambahkan Table Of Content (TOC) Multilevel

Table Of Content (TOC) blog yang dibuat kali ini saya edit untuk digunakan pada template Redesign VioMagz v4.9.0👀. Namun juga dapat digunakan pada template lain jika belum memiliki TOC bawaan. Table Of Content (TOC) ini memiliki beberapa keunggulan, diantaranya:

Table Of Content (TOC) dibuat secara multilevel yang tersusun secara berjenjang sesuai dengan judul dan subjudul yang dibuat.
Kalian dapat dengan bebas menentukan posisi penempatan Table Of Content (TOC) / daftar isi didalam postingan sesuai keinginan kalian.
Kalian tidak perlu masuk ke tampilan html postingan untuk menempatkan script TOC. Kalian cukup tempatkan dalam tampilan menulis seperti saat menulis artikel.
Dapat di tampilkan dan disembunyikan (show/hide).

Untuk membuat Table Of Content (TOC) tersebut, kalian ikuti dengan seksama langkah-langkah dibawah ini:

Menambahkan Code HTML dan JavaScript (JS)

1. Copy kode script dibawah ini dan pastekan kedalam HTML tema blog dibagian atas kode </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. Cari <div class='post-body-artikel'> lalu tambahkan id='post-body' ke kode script tersebut sehingga menjadi seperti dibawah ini.

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

3. Selanjutnya cari code </body> dan pastekan kode java script (JS) dibawah ini diatas kode </body> tersebut.

<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js' type='text/javascript'/>
<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>

Menambahkan Cascading Style Sheets (CSS)

4. Copy paste kode CSS dibawah ini dan letakkan diatas kode ]]></b:skin>.

Untuk kode CSS Table Of Content (TOC) ini, ada 2 (dua) jenis yang bisa kalian gunakan yaitu Table Of Content (TOC) Multilefel Tanpa List Marker Heading dan Table Of Content (TOC) Multilevel Menggunakan List Marker Heading. Silahkan pilih salah satu jenis tampilan yang ingin digunakan, terserah sesuai minat kalian.

Table Of Content (TOC) Multilevel Tanpa List Marker Heading

Untuk Table Of Content (TOC) Multilevel Tanpa List Marker Heading, saya buat kembali menjadi 2 jenis yang berbeda. Masing-masing memiliki tampilan, kelebihan maupun kekurangan yang berbeda.

Jenis yang pertama, yaitu menggunakan daftar multilevel yang mengikuti dan menurun dari Judul (H2) ke sub Judul (H3) dan seterusnya. Tampilannya bisa kalian lihat seperti gambar dibawah.

Seperti yang kalian lihat pada gambar diatas bagian kiri, kalian cukup menambahkan Judul (H2), Sub Judul (H3) dan seterusnya dalam artikel postingan kalian, dan secara otomatis Table Of Content (TOC) Multilevel akan terbuat secara otomatis seperti gambar diatas bagian kanan.

Namun script CSS yang digunakan untuk Table Of Content (TOC) Multilevel tersebut memiliki kekurangan yaitu apabila didalam postingan, kalian membuat atau menambahkan daftar berbutir (list bullet) atau daftar bernomor (list number) dengan format heading selain "Normal (H6)" seperti gambar dibawah ini, maka hasil outputnya akan bergeser kebawah.

Daftar berbutir (list bullet) atau daftar bernomor (list number) secara otomatis akan berformat heading "Normal (H6)", namun terkadang saya misalnya akan mengubahnya ke "Paragraf (H5)" dikarenakan akan menambahkan gambar dibagian bawah daftar dan jika tidak mengubah format headingnya ke "Paragraf (H5)", maka justru akan membuat otomatis daftar yang baru.

Jadi kalian perhatikan dengan baik setiap kalian membuat postingan. Apabila kalian menggunakan daftar berbutir (list bullet) atau daftar bernomor (list number) dengan format heading "Paragraf (H5)", maka script CSS ini tidak cocok. Kalian bisa menggunakan jenis Table Of Content (TOC) Multilevel Tanpa List Marker Heading yang kedua.

Berikut code CSS yang digunakan untuk jenis Untuk Table Of Content (TOC) Multilevel Tanpa List Marker Heading jenis yang pertama.

@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}
.post-body li{margin:5px 0;padding:0}
.post-body ol ul li,.post-body ul li{list-style:none}
.post-body ul li:before{display:inline-block;content:'\2022';margin:0 5px 0 0}
.rtl .post-body ul li:before{margin:0 0 0 5px}
.post-body ol{counter-reset:ify;padding:0 0 0 15px;margin:10px 0}
.rtl .post-body ol{padding:0 15px 0 0}
.post-body ol>li{counter-increment:ify;list-style:none}
.post-body ol>li:before{display:inline-block;content:counters(ify, '.') '.';margin:0 5px 0 0}
.rtl .post-body ol>li:before{margin:0 0 0 5px}
.tocify-wrap{display:flex;width:100%;clear:both;margin:0}
.tocify-inner{position:relative;max-width:100%;background-color:#F4F4F4;display:flex;flex-direction:column;overflow:hidden;font-size:14px;color:#2F353B;line-height:1.6em;border:1px solid;border-color:#B1B1B1;border-radius:5px}
a.tocify-title{position:relative;height:38px;font-size:16px;color:#23282C;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:14px;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 15px}
.rtl #tocify ol{padding:0 15px 0 0}
#tocify li{font-size:14px;margin:7px 0}
#tocify li a{color:#1087FF}
#tocify li a:hover{color:#2292FF;text-decoration:underline}
@media (max-width: 350px) {
.tocify-inner{min-width:100%}
}

Jenis yang kedua, yaitu menggunakan daftar multilevel, namun untuk Sub Judul (H3) dan seterusnya tidak mengikuti seperti jenis yang pertama. Saya mengubahnya menjadi seperti gambar dibawah, namun script CSS ini tidak memiliki kontra masalah bila kalian memiliki daftar berbutir (list bullet) atau daftar bernomor (list number) dengan format heading "Paragraf (H5)".

Berikut code CSS yang digunakan untuk jenis Untuk Table Of Content (TOC) Multilevel Tanpa List Marker Heading jenis yang kedua.

/* CSS Table Of Content */
@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-inner{position:relative;max-width:100%;background-color:rgba(191, 186, 186, 0.15);display:flex;flex-direction:column;overflow:hidden;font-size:14px;color:#4169E1;line-height:1.6em;border:1px solid;border-color:#B1B1B1;border-radius:5px}
.tocify-title-text:before{content:'\f0cb';font-family:'Font Awesome 5 Free';font-size:14px;font-weight:900;margin:0 6px 0 0}
.tocify-title:after{content:'\f078';font-family:'Font Awesome 5 Free';font-size:12px;font-weight:900;margin:0 0 0 25px}
a.tocify-title{position:relative;height:38px;font-size:16px;color:#FFA500;font-weight:600;display:flex;align-items:center;justify-content:space-between;padding:0 15px;margin:0;border-radius:5px;border:0.5px solid #B1B1B1;text-decoration:none}
a.tocify-title.is-expanded{border-bottom:1px solid;border-color:#B1B1B1}
.tocify-title.is-expanded:after{content:'\f077';color:#FFA500}
.tocify-wrap{display:flex;width:100%;clear:both;margin:0}
#tocify ol{padding:0 0 0 15px}
#tocify{display:none;padding:10px 10px 10px 25px;margin:0 0 0 5px}
#tocify li{padding:0 0 0 5px;}
#tocify li>ol{margin:0px}
#tocify ol>li{list-style:lower-alpha;padding:0 0 0 5px;}
#tocify ol>li>ol>li{list-style:circle;}
@media (max-width: 350px) {
.tocify-inner{min-width:100%}
}

Table Of Content (TOC) Multilevel Menggunakan List Marker Heading

Untuk Table Of Content (TOC) model kedua ini, kalian harus menambahkan List Marker pada setiap heading, dan sebaiknya kalian buat menjadi susunan multilevel yang rapi seperti contoh pada gambar dibawah bagian kiri. Ini umumnya digunakan oleh blogger yang rapi dalam penyajian materi konten, karena akan memudahkan pembaca melihat bagian perbagian judul maupun subjudul dengan lebih jelas dan rapi.

Berikut code CSS yang digunakan untuk jenis Untuk Table Of Content (TOC) Multilevel Menggunakan List Marker Heading.

/* 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%}
}

Menambahkan Code HTML Dalam Postingan

5. Tahapan terakhir, copy script dibawah dan letakkan kedalam postingan artikel kalian. Kalian masukkan dalam postingan dam mode tampilan menulis seperti biasa saat kalian menulis artikel, tidak perlu mengubah kedalam mode tampilan HTML. Letakkan bebas pada posisi atau tempat yang kalian inginkan, lalu beri efek huruf Tebal/Bold (B), untuk mengaktifkan Table Of Content (TOC).

{tocify} $title={Table of Contents}

Demo Click here

Kesimpulan

Ada beberapa pemilik blog mengklaim bahwa Table Of Content (TOC) yang dapat diklik membuat blog mereka loading lebih lambat, namun tidak ada bukti kuat yang menunjukkan hal ini. Selain itu, ada banyak cara untuk meningkatkan kecepatan loading, mulai dari menerapkan pemuatan lambat hingga menggunakan plugin yang ringan.

Beberapa yang lainnya menyatakan bahwa dengan menggunakan Table Of Content (TOC), dapat mengurangi waktu yang dihabiskan oleh pengunjung untuk membaca seluruh isi artikel. Pengunjung mungkin menghabiskan lebih sedikit waktu di halaman karena mereka tidak harus membaca keseluruhan isi artikel. Tapi di sisi lain, mereka pergi dengan bahagia.

Para pengunjung bisa saja akan lebih tertarik untuk berkunjung kembali dan yang lebih penting lagi, mereka cenderung tidak mengunjungi situs lain untuk menemukan informasi mirip yang dapat mereka temukan di blog kalian. Poin terakhir ini sangat penting karena menunjukkan apakah blog kalian bermanfaat bagi pembaca atau tidak.

Pembaruan algoritma terbaru Google, Helpful Content Update, memperjelas bahwa Google ingin hasil pencarian menjadi yang pertama. Google belum secara eksplisit menyatakan bahwa mereka menggunakan waktu tunggu untuk menentukan peringkat. Bisa jadi halaman dengan waktu tinggal yang tinggi unggul di banyak bidang.

Alasan lain yang telah disebutkan diatas adalah bahwa daftar isi yang dapat diklik menghasilkan tautan bagian yang dapat dibagikan. Dan Google dapat menampilkan tautan sebagai tautan lompat ke dalam hasil pencarian, sehingga meningkatkan RKPT. Semoga bermanfaat, Wassalam.