Cara Membuat Tabel Of Content (TOC) Otomatis di Blogger - DIMS BLOG

Konten [Tampil]

 Cara Membuat Tabel TOC Otomatis di Blogger - Tabel of Content otomatis atau daftar isi otomatis bisanya ditemukan pada file PDF atau Word dan juga diterapkan oleh Wikipedia. Selain itu tabel TOC juga bisa ditemukan pada artikel website maupun blog. Nah pada kesempatan kali ini ariefcode akan membagikan tutorial cara membuat tabel TOC otomatis (daftar isi) pada artikel blogger yang tentunya SEO Friendly. 

Sebenarnya tabel TOC atau daftar isi memiliki fungsi yang sama yaitu berisi link yang berfungsi mengarahkan ke inti dari artikel yang di sampaikan pada suatu artikel website maupun blog. Biasanya link ini untuk mempermudah pembaca untuk merayapi halaman menggunakan link  yang menuju ke tag header seperti H2, H3, H4 dan seterusnya. 

Artikel yang memiliki Tabel TOC akan mudah terindex dihalaman pencarian mesin pencari seperti Google, yang berisi tampilan link daftar isi dari artikel yang menuju pembahasan masalah. 

Cara membuat tabel of content (TOC) otomatis di blogger

Berikut adalah tutorial cara membuat daftar isi otomatis artikel blogger menggunakan tabel TOC dengan mudah dan simple. 

1. Masuk ke blogger lalu buka menu tema kemudian pilih menu edit HTML

2. Salin code berikut dan tempelkan tepat diatas kode </b: skin> atau </style> dan simpan Tema

 /* Tabel TOC by Ariefcode */
.toc {border:1px solid #ccc; padding:10px 12px;border-radius:5px;display:table; line-height:1.6em;}
.toc h3 {display:inline-block; margin:0 10px 0 0;font-size:20px}
.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 a {color:#0000ee;margin-left:.5em}
.toc ul li {list-style-type:none;}
.toc ul li ul {margin-left:2em}
.toctogglelabel {cursor:pointer; color:#0000ee}
:not(:checked) > .toctoggle {display:inline !important; position:absolute;  opacity:0}
:not(:checked) > .toctogglespan:before {content:'['}
.toctoggle:not(:checked) + .toctitle .toctogglelabel:after {content:'Sembunyikan';display: inline}
.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}

3. Berikutnya untuk membuat tabel TOC di artikel blogger, sobat perlu menempatkan kode HTML berikut didalam artikel yang sobat buat. Salin kode HTML berikut dan tempelkan pada artikel sobat (mode HTML). 

<div class="toc">
 <input type="checkbox" role="button" id="toctoggle" class="toctoggle"><div class="toctitle"><h3>Daftar Isi</h3><span class="toctogglespan"><label class="toctogglelabel" for="toctoggle"></label></span></div>
 <ul>
 <li>1<a href="#toc1">Heading 1</a></li>
 <li>2<a href="#toc2">Heading 2</a></li>
 <li>3<a href="#toc3">Heading 3</a>
 <ul>
 <li>3.1<a href="#toc3-1">Sub Heading 3.1</a></li>
 <li>3.2<a href="#toc3-2">Sub Heading 3.2</a></li>
 </ul>
 </li>
 <li>4<a href="#toc4">Heading 4</a></li>
 </ul>
 </div>

4. Langkah terakhir yaitu membuat id pada masing-masing tag header dalam artikel. Masih dalam tampilan HTML sobat akan melihat tag dengan tampilan seperti berikut. 

<h2>Subjudul .... </h2>
 
 Paragraph ....
 
 <h3> Subjudul .... </h3>
 
 Paragraph ....
 
 <h4>Subjudul .... </h4>
 
 Paragraph ....
 

Tambahkan id sesuai daftar isi yang dibuat sebelumnya, maka hasil TOC otomatis akan terlihat seperti berikut. 

<h2 id="toc1">Subjudul .... </h2>
 
 Paragraph ....
 
 <h3 id="toc2"> Subjudul .... </h3>
 
 Paragraph ....
 
 <h4 id="toc3">Subjudul .... </h4>
 
 Paragraph ....
 

Sedikit saran untuk membuat tabel TOC otomatis sebaiknya jika artikel siap untuk dipublikasikan. Karena biasanya jika kita pratinjau artikel makan kode yang telah dibuat akan berubah. 

Mungkin itulah sedikit tutorial cara cara membuat tabel TOC otomatis di blogger. Semoga dapat bermanfaat, dengan memasang tabel TOC makan artikel terkesan lebih terstruktur dan rapi. 

Related Posts