Cara Membuat Table of Content (TOC) pada Blog seperti Kurazone - Kurazone Blog | Panduan Belajar Blogger Pemula

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

Pilihan Editor :

Cara Membuat Table of Content (TOC) pada Blog seperti Kurazone
Penulis Bagus Surochman
3
Modus malam




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

Itulah informasi mengenai "Cara Membuat Table of Content (TOC) pada Blog seperti Kurazone", selamat mencoba dan semoga bermanfaat.
nanio
Cara Membuat Table of Content (TOC) pada Blog seperti Kurazone
Cara Membuat Table of Content (TOC) pada Blog seperti Kurazone Cara Membuat Table of Content (TOC) pada Blog seperti Kurazone Reviewed by Bagus Surochman on 9/29/2018

3 komentar:

  1. Ini yg saya cari-cari. TOC Cocok banget buat artikel reviews

    BalasHapus
  2. Owalah, ini namaya table of content... Coba tak cek dulu, punyaku dah ada apa belum di google. Kalau belum ada sepertinya perlu dicoba jamu nya ini.

    BalasHapus
  3. oh ini toh yang saya cari, tapi btua nerapinyya disemua artikel susah kayaknya, soalnya artikel udah lumayan dan semuanya amburadul :V

    BalasHapus

1. Berkomentarlah dengan tata bahasa yang baik agar orang lain tahu sebijak apa karakter anda melalui kata kata.
2. Silahkan tulis komentar anda untuk hal apapun yang masih berhubungan dengan post pada halaman ini.
3. Mohon untuk tidak menyertakan Link Aktif pada kolom komentar.
4. Mohon maaf apabila tidak sempat membalas komentar 1 per 1.
5. Komentar selalu di moderasi.