Cara membuat Table Of Content Otomatis Di Blogspot
Table of Content atau yang biasa disingkat TOC menjadi salah satu elemen SEO on page yang jarang orang tahu. Di Wordpress ada banyak plugin yang bisa digunakan untuk membuat TOC secara otomatis. Lalu bagaimana dengan di Blogspot ?
 |
| cara membuat TOC di blogspot |
Manfaat Table Of Content
TOC sendiri pada dasarnya akan membuat pengunjung website kalian merasa terbantu ketika membaca artikel yang cukup panjang. TOC akan secara otomatis membagi artikel sesuai dengan heading / subjudul mulai H1,H2,H3, dst. Mirip seperti makalah yang mungkin sudah pernah kalian buat.
Dengan menggunakan Table of Content, cukup dengan mengeklik subjudul yang ada maka mereka akan langsung diarahkan ke bagian artikel yang sesuai dengan subjudul tersebut. Jadi mereka tidak perlu terlalu banyak scroll untuk menemukan apa yang dicari.
Dari segi SEO pun sepertinya Google juga menyukai konten artikel yang mengandung TOC di dalamnya. Terbukti dari search engine mereka yang juga mengindeks bagian TOC di halaman pencarian mereka.
Cara membuat TOC otomatis di blogspot
Pada contoh kali ini saya menggunakan template VIOMAGZ. Yang kebetulan sudah ada settingan layout untuk custom css dan custom javascript di footer. Untuk template lainnya kalian bisa menyesuaikan karena intinya sama saja.
Langsung aja tanpa basa basi silahkan kalian simak langkah-langkah berikut ini :
- Buka dashboard blogger kalian, lalu pilih blog yang ingin kalian buatkan TOC
- Klik menu Layout
- Edit pada bagian Custom CSS lalu pastekan kode berikut ini lalu save
/* original by igniel.com, modified by trivusi.web.id */
html {
scroll-behavior: smooth;
}
.toc {
background-color: #f8f9fa;
border: 1px solid #d1d5db;
padding: 10px 20px;
display: table;
line-height: 1.6em;
}
.toc strong {
display: inline-block;
font-size: 1.25rem;
margin: 8px 25px 8px 0;
}
.toc a {
text-decoration: none;
}
.toc a:hover {
text-decoration: underline;
}
.toc ol {
counter-reset: item;
padding-left: 0.5em;
}
.toc li {
display: block;
}
.toc li:before {
content: counters(item, ".") ". ";
counter-increment: item;
}
.toc ol li a {
margin-left: 0.2em;
}
.toc ol li ol {
margin-left: 0.2em;
}
.toctogglelabel {
cursor: pointer;
color: #0645ad;
}
:not(:checked)>.toctoggle {
display: inline !important;
position: absolute;
opacity: 0;
}
:not(:checked)>.toctogglespan:before {
content: "[";
}
.toctoggle:not(:checked)+.toctitle .toctogglelabel:after {
content: "sembunyikan";
display: inline;
}
.toctoggle:checked+.toctitle .toctogglelabel:after {
content: "tampilkan";
}
:not(:checked)>.toctogglespan:after {
content: "]";
}
.toctoggle:checked~ol {
display: none;
}
:target::before {
content: "";
display: block;
height: 75px;
margin-top: -75px;
visibility: hidden;
}
- Selanjutnya pada bagian Custom Javascript Footer silahkan pastekan kode berikut ini lalu save
<script>
// prepare the array by adding level
function prepare(array) {
let idt, level, t;
for (let i = 0, n = array.length; i < n; i++) {
t = array[i];
t.el = t;
level = parseInt(t.tagName[1], 10);
t.level = level;
t.idt = i + 1;
if (level <= 1) t.parent = 0;
if (i) {
if (array[i - 1].level < level) {
t.parent = array[i - 1].idt;
} else if (array[i - 1].level == level) {
t.parent = array[i - 1].parent;
} else {
for (let j = i - 1; j >= 0; j--) {
if (array[j].level == level - 1) {
t.parent = array[j].idt;
break;
}
}
}
}
}
return array;
}
// transform a flat array in a hierarchical array
function hierarchical(items) {
const hashTable = Object.create(null);
items.forEach(item => hashTable[item.idt] = {
...item,
subitems: []
});
const tree = [];
items.forEach(item => {
if (item.parent)
hashTable[item.parent].subitems.push(hashTable[item.idt]);
else
tree.push(hashTable[item.idt]);
});
return tree;
}
// return an UL containing each title
function add_list(titles) {
let li, a, anchor;
const ol = document.createElement("ol");
if (titles && titles.length) {
for (t of titles) {
anchor = make_slug(t.el.textContent);
if (!anchor) anchor = "toc";
anchor = anchor.replace(/W/g, "");
t.el.id = anchor;
li = document.createElement("li");
a = document.createElement("a");
a.href = `#${anchor}`;
a.innerHTML = t.el.textContent;
li.append(a);
if (t.subitems && t.subitems.length) {
li.append(add_list(t.subitems));
}
ol.append(li);
}
}
return ol;
}
function make_slug(str) {
return str.toLowerCase()
.replace(/[^w ]+/g, '')
.replace(/ +/g, '_');
}
//get the toc element
const divtoc = document.getElementById("toc");
// get the article element
const article = document.querySelector(".post-body-artikel");
function createToc() {
if (divtoc && article) {
let titles = article.querySelectorAll("h2, h3, h4, h5, h6");
titles = prepare(titles);
titles = hierarchical(titles);
const ol_racine = add_list(titles);
divtoc.append(ol_racine);
}
}
document.addEventListener('DOMContentLoaded', () => {
createToc();
});
</script>
Atau cukup dengan menggunakan javascript dibawah ini :
<script src='https://cdn.statically.io/gh/sarjanamalas/aqm/main/toc2.js' type='text/javascript'></script>
Untuk memanggil Table of contentnya silahkan tambahkan pastekan kode berikut di lokasi kalian ingin memunculkannya. Ini bisa kalian lakukan dengan mengubah mode penulisan ke mode HTML saat membuat post baru di blogger.
<div class="toc" id="toc">
<input type="checkbox" role="button" id="toctoggle" class="toctoggle">
<div class="toctitle">
<strong>Daftar Isi</strong><span class="toctogglespan"><label class="toctogglelabel" for="toctoggle"></label></span>
</div>
</div>