Cara Membuat Table of Content (TOC) pada Blog seperti Kurazone


KURAZONE ~ Halo sahabat Kurazer, bagaimana kabar kalian? Pada kesempatan kali ini kita akan belajar membuat Table of Content atau yang biasa disebut dengan Daftar Isi pada Konten. Tampilan daftar isi ini memiliki tombol Show Hide dan List Number.

Cara Membuat Table of Content (TOC) pada Blog seperti Kurazone

1. Buka akun Blogger >> Pilih Tema >> Pilih Edit HTML
2. Copy kode CSS dibawah ini, lalu letakkan diatas kode </style> atau ]]></b:skin>
/* Settingan baku TOC Kurazone */
.kuratoc{padding:1px 4px 2px;border-radius:3px;color:#fff;font-weight:bold}
.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:'hide';display: inline}
.toctoggle:checked + .toctitle .toctogglelabel:after {content:'show'}
:not(:checked) > .toctogglespan:after {content:']'}
.toctoggle:checked ~ ul{display:none}
:target::before {content:''; display:block; height:0px; margin-top:0px; visibility:hidden}
/* Untuk mengatur background, numbering dan jarak TOC Kurazone */
.toc {background-color:#F0F7FF; border:1px solid #007bfd; padding:9px; display:table; line-height:1.6em;}
.toc h2 {display:inline; margin-right:10px}
.toc a {text-decoration:none;color:black}
.toc a:hover {text-decoration:underline}
.toc ul {list-style-type:none; list-style-image:none; margin-left:0px; margin-bottom:0px; padding:0px; text-align:left}
.toc ul li a {margin-left:.5em}
.toc ul li ul {margin-left:2em}

3. Simpan Template

Darisini kalian sudah memiliki bahan dasar untuk membuat TOC pada Blog, langkah selanjutnya adalah untuk memanggil kode TOC tersebut pada postingan blog.

Memanggil kode TOC pada postingan Blog

1. Buatlah postingan baru atau edit postingan yang ingin diberikan TOC
2. Pindah ke mode HTML
3. Copy kode HTML dibawah ini, lalu letakkan sesuai kemauan kalian.
Saran : Letakkan setelah paragraf pertama atau kedua.
<div class="toc">
<input type="checkbox" role="button" id="toctoggle" class="toctoggle">
<div class="toctitle">
<span class="kuratoc" style="background:#007bfd">Daftar isi</span>
<span class="toctogglespan">
<label class="toctogglelabel" for="toctoggle"></label></span></div>
<ul>
<li>1 <a href="#toc1" title="deskripsi">Ini TOC 1</a></li>
<li>2 <a href="#toc2" title="deskripsi">Ini TOC 2</a></li>
<li>3 <a href="#toc3" title="deskripsi">Ini TOC 3</a></li>
<li>4 <a href="#toc4" title="deskripsi">Ini TOC 4</a></li>
<li>5 <a href="#toc5" title="deskripsi">Ini TOC 5</a></li>
</ul>
</div>

4. Sisanya tinggal mengedit

Cara Mengedit

1. Ganti teks yang bewarna orange !!! sesuai dengan judul bab pada postingan kalian
2. Ganti teks yang bewarna kuning !!! sesuai dengan deskripsi bab (isi dengan keterangan yang simple saja)
3. Teks yang bewarna biru muda !!! adalah shortcode, boleh dibiarkan begitu saja atau diubah sesuai selera (asal saat pemanggilan ID nya sesuai dengan nama shortcode)
4. Tambahkan kode baku <div id="toc?"> Ini Judul Bab ?? </div> pada judul bab

Contoh pengaturannya :
<div id="toc1"> Ini Judul Bab Pertama </div>
Isi Paragraf pertama

<div id="toc2"> Ini Judul Bab Kedua </div>
Isi Paragraf kedua

dan seterusnya ...

5. Sisanya bisa kalian explore sendiri.

Tujuan dari pembuatan TOC ini adalah supaya pengunjung dapat mengetahui bab - bab apa saja yang dibahas pada artikel tersebut. Sekaligus memberikan sinyal kepada mesin penelusur bahwa artikel kita memiliki struktur TOC pada postingannya. Jika penerapannya sudah benar, maka TOC ini juga bakalan dimunculkan pada penelusuran Google (Jangan lupa untuk melakukan Fetch as agar TOC lekas terindeks). TOC yang ditampilkan pada penelusuran Google biasanya masih berkaitan dengan kata kunci yang digunakan pada judul Artikel. Munculnya TOC pada penelusuran Google ini juga dipengaruhi oleh RKT, Bounce dan seberapa kualitas artikel yang kalian buat.

Tampilan TOC yang terdeteksi oleh mesin penelusur (via desktop)

Tampilan TOC yang terdeteksi oleh mesin penelusur (via mobile)

Apabila salah satu TOC nya diklik, maka kursor akan langsung diarahkan pada Bab yang bersangkutan.
Demo TOC

--------------------
.:: UPDATE ::.
--------------------

1. Solusi apabila tombol HIDE tidak muncul 

Permasahan ini terjadi karena pengaturan pada post kita adalah seperti dibawah ini :


Tombol HIDE tersebut tidak muncul karena ada ENTER diantara kode baris ke 1 hingga 6.


Cara mengatasi nya adalah cukup mensetting kode baris "KE 1 HINGGA 6" menjadi 1 BARIS,  seperti ini :



2. Solusi apabila link berubah menjadi link halaman blogger

Ini terjadi karena kita telah mengisi terlebih dahulu bagian kode ini : <a href="#toc1">teks</a> pada saat mode HTML. 

Ketika kita sudah memasukkan #toc1 kedalam komponen a href, maka JANGAN mengubah mode postingan menjadi mode compose.

Kenapa kok gitu? Karena a href tidak mengenali permalink #toc1, sehingga ketika kita pindah ke mode compose, maka kode ini akan otomatis dialihkan ke URL Current, alias URL yang saat ini kita buka, sehingga link akan berubah seperti dibawah ini :
https://www.blogger.com/blogger.g?blogID=xxxxxxxxxxxxxxxxxxx#toc1

Sehingga permalink yang tertulis sebagai #toc1 pada TOC tersebut akan berubah otomatis ketika dipublikasi dalam Mode Compose, dan akan terbaca seperti ini :
https://www.blogger.com/blogger.g?blogID=xxxxxxxxxxxxxxxxxxx#toc1

Cara mengatasinya adalah ketika sudah membuat TOC dalam keadaan mode HTML, maka jangan pindah ke mode compose. Langsung publikasi saja. Sehingga link nya akan otomatis terbaca seperti ini :
https://www.domainkamu.com/2018/12/blablabla.html#toc1

--------------------
--------------------

Itulah informasi mengenai "Cara Membuat Table of Content (TOC) pada Blog seperti Kurazone", selamat mencoba dan semoga bermanfaat. Goodluck!!





Lebih baru Lebih lama