Cara Membuat TOC (Table Of Content) Keren di Postingan Blog

Cara Membuat TOC (Table Of Content) Buka Tutup SEO Friendly Diblog - TOC (table of content) adalah sebuah link berupa tulisan yang berfungsi sebagai informasi atau poin-poin penting terkait dengan artikel pembahasan. Ketika link dari TOC ini di klik, secara otomatis akan diarahkan ke poin pentingnya. 

Biasanya daftar isi table of content (TOC) atau daftar isi artikel ini digunakan pada artikel yang panjang juga lebar. Hal ini agar para pembaca lebih mudah menemukan poin dan inti pembahasan yang sedang dibaca.

Contohnya seperti TOC yang sering digunakan di e-book, dokumen dan Wikipedia. Kalau kamu sering mencari informasi dari situs Wikipedia ini, pasti kamu juga sering melihat TOC atau daftar isi ini kan? Nah, TOC ini juga bisa kamu pasang di blog Blogger kamu.

Selain dapat membantu para pembaca di blog untuk menemukan informasi yang mereka cari, table of content ini juga akan terlihat lebih keren dan profesional saat dilihat di hasil penelusuran Google lho.

Coba kamu lihat gambar dibawah. Gambar dibawah ini adalah hasil TOC yang terindeks Google dan muncul di hasil penelusuran yang biasa disebut dengan jump link.

Walaupun tidak berada di posisi paling atas, blog atau website yang memiliki jump link seperti gambar di atas memiliki daya tarik yang lebih dari para calon pengunjung di bandingkan dengan blog yang tidak disertai dengan jump link ini. Ketika salah satu jump link di klik, maka akan langsung diarahkan ke menu atau judul yang tadi di klik.

Jadi gimana, tertarik untuk memasang table of content (TOC SEO Friendly) ini di blog kamu? Kalau tertarik, langsung aja simak dan praktekkan langkah-langkah dibawah ini.

Cara Membuat Daftar Isi Table Of Contents (TOC) SEO Friendly Di Postingan Blog

1. Masuk ke dashboard blogger
2. Masuk ke menu Theme » Edit HTML
3. Kemudian cari dan tambahkan CSS TOC daftar isi dibawah ini sebelum kode ]]></b:skin> atau </style> yang ada di template blog kamu

    /* CSS Table of Contents */
   .toc {background-color:#efefef; border-radius:5px; padding:.5rem 1rem; display:table;}
   .toc h3 {display:inline-block; margin-right:10px; margin-bottom:0; font-size:1.25rem}
   .toc a {text-decoration:none}
   .toc a:hover {text-decoration:underline}
   .toc ul {list-style-type:none; list-style-image:none; margin:0; padding:0; text-align:left}
   .toc > ul {margin-top:.5rem;}
   .toc ul li {list-style-type:none;}
   .toc ul li a {color: #4b4f56; margin-left:.25rem}
   .toc ul li ul {margin-left:2em}
   .toctogglelabel {cursor:pointer;}
   :not(:checked) > .toctoggle {display:inline !important; position:absolute;  opacity:0}
   :not(:checked) > .toctogglespan:before {content:'['}
   .toctoggle:not(:checked) + .toctitle .toctogglelabel:after {content:'sembunyikan';color:#1a73e8;display: inline}
   .toctoggle:checked + .toctitle .toctogglelabel:after {content:'tampilkan';color:#1a73e8;}
   :not(:checked) > .toctogglespan:after {content:']'}
   .toctoggle:checked ~ ul{display:none}
   :target::before {content:''; display:block; height:60px; visibility:hidden}

4. Kalau sudah klik simpan

Sampai ditahap ini, CSS TOC sudah berhasil di pasang ke dalam blog kamu. Sekarang tinggal kamu atur aja dan membuat TOC-nya ke dalam artikel kamu. Cara seperti ini :

1. Buat atau masuk ke postingan
2. Pindah ke mode HTML
3. Masukan script dibawah ini ke dalam postingan kamu dalam mode HTML

   <div class="toc">
     <input class="toctoggle" id="toctoggle" role="button" type="checkbox" /><div class="toctitle"><h3>Daftar isi</h3><span class="toctogglespan"><label class="toctogglelabel"></label></span></div>
     <ul>
       <li>1. <a href="#toc1" title="Judul toc1">Masukan judul1 disini</a></li>
       <li>2. <a href="#toc2" title="Judul toc2">Masukan judul2 disini</a></li>
       <li>3. <a href="#toc3" title="Judul toc3">Masukan judul3 disini</a>
          <ul>
            <li>3.1 <a href="#toc3_1" title="sub judul1">Sub Judul3_1 disini</a></li>
             <li>3.2 <a href="#toc3_2" title="sub judul2">Sub Judul3_2 disini</a></li>
            </ul>
          </li>
     <li>4. <a href="toc4" title="Judul toc4">Masukan Judul4 disini</a></li>
       </ul>
   </div>

   #toc1 dan yang lainnya adalah id pemanggil untuk setiap judul dan sub judul artikel kamu. Kamu bisa tambah atau mengurangi jumlahnya seduai kebutuhan.
4. Selanjutnya atur semua judul dalam artikel kamu dengan menyertakan id. Contoh penulisannya seperti ini :

   <h2 id="#toc1">Judul 1</h2>
   *** Isi paragraf judul ***
   
   <h2 id="#toc2">Judul 2</h2>
   *** Isi paragraf judul ***
   
   <h2 id="#toc3">Judul 3</h2>
   *** Isi paragraf judul ***
   
   <h3 id="#toc3_1">Sub judul1</h3>
   *** Isi paragraf sub judul ***
   
   <h3 id="#toc3_2">Sub judul2</h3>
   *** Isi paragraf sub judul ***
   
   <h2 id="#toc4">Judul 4</h2>
   *** Isi paragraf sub judul ***

5. Kalau semuanya sudah diatur, klik simpan dan lihat hasilnya.

Nah, itulah tutorial cara membuat daftar isi table of content Wikipedia SEO Friendly diblog yang bisa saya sampaikan di artikel kali ini. Semoga bisa membantu bagi yang membutuhkan. Kalau masih bingung, silahkan tanyakan aja di kolom komentar

Share :