Membuat Daftar isi TOC (Table Of Content) di Blogger

Membuat Daftar isi TOC (Table Of Content) di Blogger - Halo kawan :d, hari ini saya mau menulis tutorial blogger tentang membuat daftar isi table of content (TOC) yang seperti ada pada wikipedia untuk diterapkan di blogger.

Saya sering melihat di beberapa blog lain sudah menerapkan fitur TOC ini tapi mereka menggunkan CMS wordpress karena di wordpress sendiri sudah tersedia plugin Table of content yang dapat langsung memudahkan usernya untuk membuat list daftar isi content di blog wp nya.

Google sendiri juga melakukan index pada url toc yang akan tampil dibawah artikel yang sudah terpasang daftar isi toc sebagai jumplink (link loncat) dari pencarian google langsung ke isi posting.

Berikut cara Membuat Daftar isi TOC (Table Of Content) di Blogger

• Pertama kalian login pada blogger > klik template > edit HTML
• Kemudian kalian copy script css toc di baawah ini dan taruh diatas code </style>

SCRIPT CSS TOC Blogger

.toc {background-color:#fff;border-left: 4px solid #0dbdeb; padding:10px 13px; display:table; line-height:1.6em;}
.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) + .toctogglespan .toctogglelabel:after {content:'sembunyikan';display: inline}
.toctoggle:checked + .toctogglespan .toctogglelabel:after {content:'tampilkan'}
:not(:checked) > .toctogglespan:after {content:']'}
.toctoggle:checked ~ ul{display:none}

• Lalu klik simpan template
• Selanjutnya kalian copy script HTML TOC dibawah ini masukkan pada sebuah posting blog dengan mode HTML bukan yang compose

SCRIPT HTML TOC Blogger

<div class="toc">
<input class="toctoggle" id="toctoggle" name="toctoggle" role="button" type="checkbox" /><span class="toctogglespan"><label class="toctogglelabel" for="toctoggle"></label></span>
<b>Daftar isi :</b>
<ul>
<li>1 <a href="https://www.marwanto606.com/#TOC1" title="Judul jumplink TOC1">Judul jumplink TOC1</a></li>
<li>2 <a href="https://www.marwanto606.com/#TOC2" title="Judul jumplink TOC2">Judul jumplink TOC2</a></li>
<li>3 <a href="https://www.marwanto606.com/#TOC3" title="Judul jumplink TOC3">Judul jumplink TOC3</a>
<ul>
<li>3.1 <a href="https://www.marwanto606.com/#TOC3_1" title="Sub Judul jumplink TOC3_1">Sub Judul jumplink TOC3_1</a></li>
<li>3.2 <a href="https://www.marwanto606.com/#TOC3_2" title="Sub Judul jumplink TOC3_2">Sub jumplink TOC3_2</a></li>
</ul>
</li>
</ul>
</div>

• Sampai di tahap ini kalian sudah mempunyai script daftar isi toc dasar yang akan tampil pada post kalian
• Selanjutnya kalian hanya perlu menyesuaikan saja kira" berapa banyak jumplink yang ingin kalian buat sebagai daftar isi, saya hanya akan memberitahu bagian yang perlu kalian sesuaikan sendiri
• Diantaranya :
• Rubah url https://www.marwanto606.com/ menjadi url post yang akan kalian buat, silahkan lihat pada tautan permanen urlnya
  
• Rubah Judul jumplink TOC1 dan seterusnya sesuai judul daftar isi yang akan kalian buat
• Untuk mengarahkan jump link nya ke kalian tinggal menambahkan kode id="TOC1" dan seterusnya ke sebuah element html untuk mengarahkan jumplink #TOC1 dan seterusnya pada judul tujuan jumplink.

Contoh TOC (Table Of Content) di Blogger

<h2 id="TOC1">cara pasang daftar isi toc di blogger</h2>
atau
<b id="TOC1">cara pasang daftar isi toc di blogger</b>
dll.

Untuk mempermudah kalian dalam membuat daftar isi toc kalian dapat menyimpan kode html toc pada Template Entri yang ada pada blogger agar saat kalian membuat sebuah artikel baru akan lagsung tersedia kode html dasar TOC dan kalian tinggal mengedit isi nya saja.

Berikut caranya menambahkan html toc ke Template Entri blogger

• Pertama kalian login pada blogger > klik Setelan> klik menu Posting,komentar, dan berbagi
• Pada Template Entri klik tambah.
• Copykan SCRIPT HTML TOC ke dalam kotak template entri kemudian klik simpan setelan.
• Selesai saat kalian membuat post baru maka kode dasar TOC akan langsung tersedia.

Tambahan : code sudah saya perbaiki untuk masalah berubahnya code toc saat kalian merubah editor blogger ke compose, sekarang kode TOC tidak akan berubah.

Sumber script : https://www.igniel.com/2018/08/daftar-isi-table-of-contents.html