Cara Membuat Table Of Content ( TOC ) di Blogger

Cara Membuat Table Of Content ( TOC ) di Blogger - Syukur alhamdulillah pada kesempatan kali ini saya bisa nulis lagi di blog ini, pada artikel kali ini saya akan share Membuat Table of Content atau di sebut dengan TOC. Biasanya ini di buat pada platfrom blog di wordpress akan tetapi di blogger juga bisa membuat Table Seperti ini.

Table ini biasanya digunakan bila artikel kita adalah 2000 kata dalam satu postingan. Jadi dalam isi table tersebut diisi dengan 300 kata aja di dalamnya.

Bila di Wordpress kita cukup menggunakan dengan sebuah plug in, beda kalau di platfrom blogger harus di lakukan dengan cara manual. Butuh ketelitian agar TOC yang akan di buat ini bisa berfungsi dengan baik.

Daripada penasaran berikut ini adalah langkah - langkah membuat Table of Content di Blogger.

Memasang Table of Content di Blogspot

Salin dulu kode CSS dibawah ini.

<style>
/* CSS Table of Contents */
#light-toc{background:#f5f5f5;border-radius:3px;padding:10px 20px}
#toc_list{font-weight:700;cursor:pointer;margin:10px 0}
#toc_list:focus,#toc li:focus,.back_tocontent:focus{outline:none}
#toc_list svg{vertical-align:middle}
#toc li{background:transparent;cursor:pointer;margin:.2em 0 .2em 1em}
#toc ol li:before{left:-2em}
#toc li a{color:#222}
#toc li a:hover{color:#1e90ff}
#toc{display:grid}
:target::before{content:&#39;&#39;;display:block;height:40px;margin-top:-40px;visibility:hidden}
</style>

Nah letakan kode CSS ini tepat dibagian atas kode </head>atau &lt;/head&gt;&lt;!--<head/>--&gt; atau bisa juga diatas kode ]]></b:skin>

Klik " SIMPAN / SAVE " Template blogger kamu.

Buat sebuah postingan terbaru di blogger dengan menggunakan mode " HTML " jangan pakai mode compose.

Salin dan letakan kode HTML dikotak bawah ini dan letakan dalam halaman postingan sebelumnya.

<div id="light-toc">
<div id="toc_list" onclick="if (document.getElementById('toc').style.display === 'none') { document.getElementById('toc').style.display = 'block'; } else { document.getElementById('toc').style.display = 'none'; }" role="button" tabindex="0">
Contents <svg width="18" height="18" viewBox="0 0 24 24"><path fill="#000000" d="M12,18.17L8.83,15L7.42,16.41L12,21L16.59,16.41L15.17,15M12,5.83L15.17,9L16.58,7.59L12,3L7.41,7.59L8.83,9L12,5.83Z" /></svg></div>
<div id="toc">
<ol>
<li><a href="#toc_1">Bagian Judul 1</a></li>
<li><a href="#toc_2">Bagian Judul 2</a></li>
<li><a href="#toc_3">Bagian Judul 3</a></li>
<li><a href="#toc_4">Bagian Judul 4</a></li>
<li><a href="#toc_5">Bagian Judul 5</a></li>
</ol>
</div>
</div>

Cara menerapakan juga terbilang cukup mudah, kamu hanya perlu membuat sebuah heading dengan memberikan tag sesuai nomor urutan.

Pengertian bagiannya :

• Warna merah adalah = kode urutan yang akan mengarah kebagian judul yang kita buat saat diklik.
• Warna biru adalah = sebuah tulisan / judul heading yang kamu buat didalam artikel.

Selanjutnya untuk pada sebuah halaman bisa seperti ini, saya kasih contoh seperti di bawah ini :

<h1 id="toc_1">Materi Daftar isi</h1> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry</p>

Kode di atas belum berfungsi karena belum ada pemanggilnya jadi di ubah menjadi seperti ini

<h1 id="toc_1">Materi Daftar isi</h1> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry</p>

Catatan :
toc_1 hanya sebagai contoh kode pemanggil dalam heading sesuai urutan pertama. Maka untuk lebih sempurnanya urutan toc_ harus sesuai dengan nomor urutan misalnya toc_1, toc_2, toc_3 sampai seterusnya.

Maka akan menjadi seperti ini :

<h1 id="toc_1">Judul Bagian 1</h1>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
<h2 id="toc_2">Judul Bagian 2</h2>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
<h3 id="toc_3">Judul Bagian 3</h3>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
<h4 id="toc_4">Judul Bagian 4</h4>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
<h5 id="toc_5">Judul Bagian 5</h5>
Lorem Ipsum is simply dummy text of the printing and typesetting industry

Bila sudah Publikasihan.

Dan bila ingin menambahkan daftar isi atau TOC dalam postingan bisa seperti ini

<div id="toc"> <ol> <li><a href="https://draft.blogger.com/blogger.g?blogID=3549377267119047245#toc_1">Bagian Subheading 1</a></li> <li><a href="https://draft.blogger.com/blogger.g?blogID=3549377267119047245#toc_2">Bagian Subheading 2</a></li> <li><a href="https://draft.blogger.com/blogger.g?blogID=3549377267119047245#toc_3">Bagian Subheading 3</a></li> <li><a href="https://draft.blogger.com/blogger.g?blogID=3549377267119047245#toc_4">Bagian Subheading 4</a></li> <li><a href="https://draft.blogger.com/blogger.g?blogID=3549377267119047245#toc_5">Bagian Subheading 5</a></li> </ol> </div>

Jangan lupa ID Blog tersebut ganti dengan ID punya sobat semua, kemudian klik Update

Nah itulah sekian tutorial pada kali ini Membuat Table Of Content di Blogger Selamat mencoba.

Mas Dar Hanya Blogger Amatiran, dan mulai ngeblog pada tahun 2017 dengan blog Ivhaa Netwoek setelah itu fakum dan ngeblog lagi di tahun 2022 dengan nama sudarjurnalblogg.web.id

Berbagi :