2 CARA MEMBUAT DAFTAR ISI POSTINGAN (TOC) BLOGSPOT RESPONSIVE

Pada ulasan kali ini saya ingin membagikan cara membuat Table Of Contents (TOC) atau Daftar isi responsive pada postingan artikel di blog blogspot dengan simpel serta mudah di pahami agar tulisan artikel anda menjadi menarik dimata para pengunjung situs.

Table Of Contents (TOC) pada umumnya sering di pakai oleh situs - situs berkategori artikel panjang seperti berbagi info Wikipedia atau situs web review, dengan tujuan mempermudah para pembaca untuk meloncat ke suatu pembahasan atau sub-judul tertentu, intinya untuk mempersingkat tujuan yang ingin di cari pada suatu artikel.

Pembuatan Daftar isi pada artikel atau sering di sebut Tabel Of Content (TOC) pada umumnya sering di pergunakan pada situs berplatform Wordpress, karena pada Wordpress terdapat fitur pendukung (Plugin) pembuatan Daftar isi konten secara mudah dengan hanya beberapa langkah download saja, namun kasusnya berbeda pada sebuah situs berplatform Blogspot, yang mana tidak memiliki fitur pendukung (Plugin) pembuatan Table of Content, meski begitu kita bisa mengakalinya dengan mengedit Tema template dan edit artikel melalui mode Html.

Nah, bagi anda yang ingin mencoba membuat Table of Content (TOC) di dalam sebuah artikel blogspot, berikut di bawah ini merupakan langkah - langkah pembuatannya;

1. TABLE OF CONTENT RESPONSIVE

Untuk cara yang pertama terbilang mudah di terapkan, karena kita hanya membuat sebuah daftar isi dengan fungsi loncat ke sub-judul tertentu tanpa menu Buka atau Tutup.

Langkah Pertama

Lakukan edit postingan pada mode tulis HTML, kemudian tambahkan id= pada setiap point Subjudul seperti contoh dibawah ini.

<h3 id="Judul_Satu">
Judul Satu</h3>
..Tulisan Pembahasan ke satu..

<h3 id="Judul_Dua">
Judul Dua</h3>
..Tulisan Pembahasan ke dua..

<h3 id="Judul_Tiga">
Judul Tiga</h3>
..Tulisan Pembahasan ke tiga..

Langkah Kedua

Copy kode dibawah ini, kemudian tempatkan pada paragraf dimana anda ingin menempatkan Menu Daftar Isi (TOC). 

<b>DAFTAR ISI</b><br />
<ol>
<li><a href='#Judul_Satu'>Judul Satu</a></li>
<li><a href='#Judul_Dua'>Judul Dua</a></li>
<li><a href='#Judul_Dua'>Judul Dua</a></li>
</ol>

Dan hasil penulisannya pada mode tulis Html secara keseluruhan akan seperti gambar dibawah ini.

Selanjutnya, Simpan dan Pratinjau agar anda bisa menyeleksi terlebih dahulu sebelum mempostingnya.

Jika anda merasa kurang puas dengan gaya tampilan (Toc) di atas, anda bisa mencoba model (Toc) dengan gaya Buka dan Tutup yang bisa anda pelajari pada cara nomor 2 (dua) di bawah ini. 

2. TABLE OF CONTENT SHOW / HIDE

Terkadang adakalanyan seorang pembaca lebih nyaman menutup sebuah daftar isi (TOC) yang terdapat pada suatu artikel, alasanya kadang lebih ingin membaca keseluruhan isi postingan dari awal, maka hal tersebut bisa anda akali dengan menempatkan menu Buka - Tutup pada menu Daftar Isi. hasilnya bisa anda lihat pada demo dibawah ini.

Caranya sangat mudah, anda hanya perlu menerapkan 2 (dua) langkah dibawah ini agar Table Of Content anda memiliki menu Tutup atau Buka agar terlihat lebih profesional.

Langkah Pertama

Masukkan kode CSS dibawah ini di atas atau sebelum kode </HEAD> pada Edit Template.

/* Table of Contents */
.toc {background-color:#ffffff; 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:'tutup';display: inline}
.toctoggle:checked + .toctitle .toctogglelabel:after {content:'buka'}
:not(:checked) > .toctogglespan:after {content:']'}
.toctoggle:checked ~ ul{display:none}
:target::before {content:''; display:block; height:0px; margin-top:0px; visibility:hidden}

Nah, setelah itu klik Simpan Template.

Langkah Kedua

Setelah itu, menuju ke edit postingan dan beralih dari mode Compose ke mode tulis HTML, tentukan tempat yang anda inginkan untuk menaruh menu (TOC) Table Of Content pada paragraf artikel anda.

Sebelumnya, anda perlu menambahkan kode unik ID= Html berupa tulisan di tiap sub-judul, dan di setiap spasi Tag ID di pisahkan dengan tanda underscore ( _ ) "tanpa tanda kurung". serta usahakan Tag ID di setiap subjudul berbeda - beda.

Format penulisan : id="JUDUL_UNIK_ANDA"

Copy kode Html dibawah ini dan letakkan di lokasi atas pada mode tulis Html.

<center>
<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="#Cara_Kesatu" title="Cara Kesatu">Cara Kesatu</a>
      <ul>
    <li>1.1 <a href="#Sub_Judul_Satu_Ke_Satu" title="Sub Judul Satu ke Satu">Sub Judul Satu ke Satu</a></li>
    <li>1.2 <a href="#Sub_Judul_Satu_Ke_Dua" title="Sub Judul Satu ke Dua">Sub Judul Satu ke Dua</a></li>
  </ul>
  </li>
  <li>2 <a href="#Cara_Kedua" title="Cara Kedua">Cara Kedua</a>
  </li>
  <li>3 <a href="#Cara_Ketiga" title="Cara Ketiga">Cara Ketiga</a>
  </li>
  </ul>
</div>
</center>

Maka hasil di mode tulis Html keseluruhan akan seperti dibawah ini ;

<center>
<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="#Point_Kesatu" title="Point Kesatu">Point Kesatu</a>
    <ul>
    <li>1.1 <a href="#Sub_Judul_Satu_Ke_Satu" title="Sub Judul Satu ke Satu">Sub Judul Satu ke Satu</a></li>
    <li>1.2 <a href="#Sub_Judul_Satu_Ke_Dua" title="Sub Judul Satu ke Dua">Sub Judul Satu ke Dua</a></li>
    </ul>
  </li>
  <li>2 <a href="#Point_Kedua" title="Point Kedua">Point Kedua</a>
  </li>
  <li>3 <a href="#Point_Ketiga" title="Point Ketiga">Point Ketiga</a>
  </li>
  </ul>
</div>
</center>
<br />
<br />
<h3 id="Point_Kesatu">
1. Point Kesatu</h3>
<br />
<h4 id="Sub_Judul_Satu_Ke_Satu">
1.1. Sub Judul Satu Ke Satu</h4>
<div>
TULISAN ARTIKEL DISINI..
<br /></div>
<h4 id="Sub_Judul_Satu_Ke_Dua">
1.2. Sub Judul Satu Ke Dua</h4>
<div>
TULISAN ARTIKEL DISINI..
<br /></div>
<h3 id="Point_Kedua">
2. Point Kedua</h3>
<div>
TULISAN ARTIKEL DISINI..
<br /></div>
<h3 id="Point_Ketiga">
3. Point Ketiga</h3>
<div>
TULISAN ARTIKEL DISINI..
<br /></div>

Selesai, dan Pratinjau terlebih dahulu sebelum mempublishnya.

Tulisan yang saya beri blok warna merah merupakan ID unik yang bisa anda rubah sesuai nama point subjudul yang anda miliki, kemudian untuk dropdown 1.1 dan 1.2 hanya opsional saja jika anda ingin menambahkannya, tetapi jika tidak berguna, lebih baik anda hapus saja.

Selesai, itulah 2 cara mudah membuat Table Of Conten atau Daftar isi pada sebuah artikel di blogspot yang responsive. semoga postingan di atas dapat membantu kegiatan ngeblog anda serta bermanfaat bagi pengembangan situs anda, terimakasih dan sampai jumpa pada postingan berikutnya.