Membuat Table of Contents (TOC) Di Dalam Postingan Blogger Kita
Ngad ID - Wikipedia terkenal dengan satu fitur yang disebut tabel konten atau juga dapat disebut daftar isi. Tapi itu bukan hanya daftar konten biasa, karena ketika Anda mengklik secara otomatis melompat ke menu yang merupakan tautan lompat alias yang dimaksudkan. Tentu saja ini memudahkan pengunjung karena Anda dapat langsung ke menu yang Anda cari. Apalagi jika artikelnya super panjang yang membuatnya menjadi pegel jika gulir berlanjut.
Dan daftar konten Wikipedia dapat dibuat untuk blogger. Bukan hanya gaya dan membuat tampilan lebih menarik, tetapi ada satu manfaat besar dari sisi SEO. Menu-menu ini akan diindeks dan muncul dalam hasil pencarian. Inilah yang disebut tautan lompat.
Script sangat ringan karena hanya dibuat menggunakan CSS dan HTML. Tidak perlu JavaScript sehingga tidak menambah muatan saat memuat.
Misalnya adalah artikel dengan judul. Di dalamnya ada daftar isi untuk blogspot seperti Wikipedia. Tidak hanya itu, perhatikan gambar berikut.
Ini adalah contoh hasil pencarian saat mencari google. Blog Ighiel memiliki tautan tambahan di bagian bawah tautan lompatan yang diindeks dari daftar isi Wikipedia dalam artikel. Berbeda dengan blog di atas (posisi satu) yang tidak memiliki tautan lompatan. Meskipun blog Igniel berada di posisi kedua, ini akan menarik lebih banyak perhatian kepada pengunjung karena mereka menemukan satu hal yang berbeda yang tidak ada di blog lain.
Pernahkah Anda tertarik menggunakannya? Ayo pergi langsung ke tutorial.
Membuat Table of
Contents (TOC) Di Dalam Postingan Blogger Kita
Pada dasarnya akan membaca id heading yang ada di dalam struktur
HTML dan langsung loncat ke bagian heading yang dipilih. Bingung? Sekalian
praktek saja biar lebih gampang dipahami.
Untuk mepercantik tampilan, tambahkan dulu kode CSS berikut DI
ATAS tag penutup </style> ATAU ]]></b:skin>.
/* Table of Contents
by igniel.com */
.toc {background-color:#f8f9fa; border:1px solid #a2a9b1; padding:10px 13px;
display:table; line-height:1.6em;}
.toc h2 {display:inline-block; margin-right:10px}
.toc a {text-decoration:none}
.toc a:hover {text-decoration:underline}
.toc ul {list-style-type:none; list-style-image:none; margin:0px; padding:0px;
text-align:left}
.toc ul li {list-style-type:none;}
.toc ul li a {margin-left:.5em}
.toc ul li ul {margin-left: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 ~ ul{display:none}
:target::before {content:''; display:block; height:0px; margin-top:0px;
visibility:hidden}
Perhatikan deretan
kode terakhir yaitu :target::before. Jika kamu memakai menu sticky header /
navigasi, ubah height dan margin-top sesuai dengan
ukuran header / navigasi yang dipasang. Misal ukurannya 50px, maka ubah
menjadi height:50px dan margin-top:-50px.
Sekarang masuk ke bagian utamanya yaitu membuat daftar
isi table of content di dalam postingan Blogger. Ketika membuat post baru,
pastikan memilih mode HTML, BUKAN Compose. Lalu simpan kode ini di
paragraf awal.
<div
class="toc">
<input type="checkbox"
role="button" id="toctoggle"
class="toctoggle"><div
class="toctitle"><h2>Daftar isi</h2><span
class="toctogglespan"><label class="toctogglelabel"
for="toctoggle"></label></span></div>
<ul>
<li>1 <a
href="#toc1" title="Judul Satu">Judul
Satu</a></li>
<li>2 <a
href="#toc2" title="Judul Dua">Judul
Dua</a></li>
<li>3 <a
href="#toc3" title="Judul Tiga">Judul
Tiga</a></li>
<li>4 <a
href="#toc4" title="Judul Empat">Judul
Empat</a></li>
<li>5 <a
href="#toc5" title="Judul Lima">Judul Lima</a>
<ul>
<li>5.1 <a
href="#toc5_1" title="Sub Judul Lima ke Satu">Sub Judul
Lima ke Satu</a></li>
<li>5.2 <a
href="#toc5_2" title="Sub Judul Lima ke Dua">Sub Judul
Lima ke Dua</a></li>
</ul>
</li>
<li>6 <a href="#toc6"
title="Judul Enam">Judul Enam</a></li>
</ul>
</div>
#toc1 dan #toc lain adalah elemen
pemanggilnya. Kamu bisa menambahkan atau mengurangi sesuai kebutuhan.
Selanjutnya atur penulisan heading atau judul di artikel dengan
menyertakan id yang sama dengan table of contents. Contohnya seperti ini.
<h2
id="toc1">Judul Satu</h2>
...isi paragraf satu
<h2 id="toc2">Judul Dua</h2>
...isi paragraf dua
<h2 id="toc3">Judul Tiga</h2>
...isi paragraf tiga
<h2 id="toc4">Judul Empat</h2>
...isi paragraf empat
<h2 id="toc5">Judul Lima</h2>
...isi paragraf lima
<h3 id="toc5_1">Sub Judul Lima ke Satu</h3>
...isi paragraf lima part 1
<h3 id="toc5_2">Sub Judul Lima ke Dua</h3>
...isi paragraf lima part 2
<h2 id="toc6">Judul Enam</h2>
...isi paragraf enam
Untuk demo atau previewnya bisa cek di Codepen saya.
Jika Tombol 'Sembunyikan / Tampilkan' Tidak
Muncul
Masalah ini kerap terjadi pada sebagian besar pengguna. Untuk
mengatasinya, pastikan untuk TIDAK memberi line break <br/> (enter)
di bagian header TOC. Yang benar harusnya seperti ini:
<input
type="checkbox" role="button" id="toctoggle"
class="toctoggle"><div
class="toctitle"><h2>Daftar isi</h2><span
class="toctogglespan"><label class="toctogglelabel"
for="toctoggle"></label></span></div>
Dan ini contoh yang SALAH:
/* INI SALAH, JANGAN
PAKAI LINE BREAK */
<input type="checkbox" role="button"
id="toctoggle" class="toctoggle">
<div class="toctitle">
<h2>Daftar isi</h2>
<span
class="toctogglespan"><label class="toctogglelabel"
for="toctoggle"></label></span>
</div>
Begitu banyak tutorial membuat daftar isi dalam posting blog seperti tabel konten Wikipedia. Semoga mudah dipahami. Dan itu ide yang bagus untuk digunakan dalam posting yang sangat panjang. Karena jika pemendekan bahkan mengganggu, orang-orang hanya menggulir kemana Anda harus menggunakan lompatan menghubungkan semuanya. Jadi sepertinya tidak bagus. Jika semua posting ingin ditambahkan ke TOC, maka gandakan jumlah kata setiap artikel.
Posting Komentar