Cara Membuat Table Of Content Di Postingan Blog

Halo teman-teman kali ini saya akan sedikit berbagi ilmu yaitu cara membuat table of content di postingan blog. Sebelumnya saya akan memberitahu apa itu table of content (TOC), TOC adalah suatu daftar yang terdiri dari bagian-bagian penting saja pada sebuah artikel. Lalu apakah table of content memberikan manfaat bagi postingan kita ? ya tentu itu akan memberikan kesan yang baik bagi postingan kita dan membuat para pembaca lebih mudah untuk mencari poin pont penting yang mereka cari. Contohnya seperti di bawah ini :

Daftar isi

• 1. Cara Membuat Table Of Content Di Postingan Blog
• 1.1 Langkah 1
• 1.2 Langkah 2
• 1.3 Langkah 3
• 1.4 Langkah 4
• 2. Cara Menampilkan Table Of Content Di postingan Blog
• 2.1 Langkah 1
• 2.2 Langkah 2
• 2.3 Langkah 3
• 2.4 Langkah 4
• 2.5 Langkah 5
• 2.6 Langkah 6

Oke langsug saja simak Cara Membuat Table Of Content Di Postingan Blog dengan mudah. 

Cara Membuat Table Of Content Di Postingan Blog

Disini kalian terlebih dahulu memasukkan kode di edit html pada template kalian agar nantinya TOC memiliki tampilan yang menarik, jika kalian tidak mengikuti langkah ini maka TOC kalian akan tidak menarik. maka ikutilah semua langkah-langkah yang saya berikan.

Langkah 1.

Login terlebih dahulu ke blog blogger kalian, kemudian klik template/tema lalu pilih EDIT HTML.

Langkah 2.

Copy kode berikut sebelum melanjutkan ke langkah 3 :

/* Table of Contents Nyaricuan */
.toc {background-color:#f8f9fa; border:1px solid #a2a9b1; padding:10px 13px; display:table; line-height:1.6em;}
.toctitle {font-family:'Arial', display:inline-block; font-size:16px;}
.toc a {text-decoration:none}
.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 {list-style-type:none;-webkit-margin-start:15px !important;line-height:26px;}
.toc ul li a {margin-left:3px; color:var(--color-main);}
.toc ul li a:hover {text-decoration:none; text-decoration:underline;}
.toc ul li ul {margin:0px;}
.toctogglelabel {cursor:pointer; color:var(--color-main);}
.toctogglespan {margin-left:10px; font-weight:400; font-size:12px;}
:not(:checked) > .toctoggle {display:none;}
:not(:checked) > .toctogglespan:before {content:'['}
.toctoggle:not(:checked) + .toctitle .toctogglelabel:after {content:'sembunyikan';display:inline-block}
.toctoggle:checked + .toctitle .toctogglelabel:after {content:'tampilkan'}
:not(:checked) > .toctogglespan:after {content:']'}
.toctoggle:checked ~ ul{display:none}
:target::before {content:''; display:block; height:0px; margin-top:0px; visibility:hidden}

Langkah 3.

Cari tag <style> apabila kesulitan kalian bisa mencarinya dengan klik tombol CTRL+F di keyboard kalian. Kemudian pastekan kode tersebut di bawah tag <style> contohnya seperti dibawah ini :

Langkah 4.

Klik simpan tema, selesai.

Cara Menampilkan Table Of Content Di Postingan Blog

Nah sekarang kita masuk pada bagian menampilkan TOC kalian di postingan blog, perlu diingat bahwa untuk menampilkanya pada saat kalian membuat postingan kalian harus beralih dari mode compose ke html. Oke selanjutnya kalian simak penjelasannya dibawah.

Langkah 1.

Buat postingan baru atau edit postingan yang mau kalian beri TOC, kemudian copy kode berikut :

<div class="toc">
<input type="checkbox" role="button" id="toctoggle" class="toctoggle"><div class="toctitle">
Daftar isi <span class="toctogglespan"><label class="toctogglelabel" for="toctoggle"></label></span></div>
<ul>
<li>1. <a href="#toc1" title="JudulSatu">JudulSatu</a></li>
<li>2. <a href="#toc2" title="JudulDua">JudulDua</a></li>
<li>3. <a href="#toc3" title="JudulTiga">JudulTiga</a></li>
<li>4. <a href="#toc4" title="JudulEmpat">JudulEmpat</a></li>
<li>5. <a href="#toc5" title="JudulLima">JudulLima</a>
<ul>
<li>5.1 <a href="#toc5_1" title="SubJudulLimakeSatu">SubJudulLimakeSatu</a></li>
<li>5.2 <a href="#toc5_2" title="SubJudulLimakeDua">SubJudulLimakeDua</a></li>
</ul>
</li>
<li>6 <a href="#toc6" title="JudulEnam">JudulEnam</a>
</ul>
</div>

Langkah 2.

Kemudian paste pada html (Boleh paste dimana saja sesuai kebutuhan), tetapi disini saya akan memberi contoh yaitu diatas :

Langkah 3.

Kemudian kalian edit pada bagian title="judulsatu">judulsatu</a></li> menjadi ( contoh title="cara">cara</a></li> ) dan seterusnya pada judul yang lainnya sesuai kan sama kebutuhan kalian.

Langkah 4.

Setelah itu kalian tambahkan id="toc1"> pada <h3> contohnya seperti :

Langkah 5.

Kemudian kalian lakukan hal yang sama seperti langkah 4 pada tag <h3> (subheading) bisa seluruhnya atau sesuai kebutuhan kalian.

Langkah 6.

Setelah semua sudah selesai, klik publikasikan. 

Untuk melihat hasilnya kalian bisa klik tombol result dibawah :

Note :

1. Pada saat kalian membuka mode html diusahakan jangan pindah ke mode compose karena nantinya bisa menyebabkan kode error.
2. Lebih baik membuat TOC setelah selesai penulisan agar lebih mudah untuk mengeditnya. 

Penutup :

Membuat Table Of Content bagi pemula memang terlihat susah, tetapi apabila sudah terbiasa maka hal itu akan gampang. Apabila kalian kebingung, boleh bertanya pada kolom komentar. 

Demikian tips Cara Membuat table Of Content Di Postingan Blog semoga bermanfaat, terimakasih.