Cara Membuat Daftar Isi Table Of Contents (TOC) di Blog

Cara Membuat Daftar Isi Table Of Contents (TOC) di Blog - Table Of Contents (TOC) - Table Of Contents (TOC) merupakan daftar isi pada sebuah artikel yang berfungsi memudahkan pembaca, untuk mengetahui point-point penting yang dibahas dalam artikel. 

Tapi daftar isi di blog ini bukan sekedar daftar isi biasa, sebab pas kamu klik akan otomatis melompat ke menu yang dipilih atau jump link. Salah satu contoh penggunaan TOC pada blog adalah situs Wikipedia.

Dengan adanya daftar isi pada artikel blog bisa memudahkan pembaca untuk dapat langsung menuju topik yang dicari. Terlebih lagi jika artikel yang dibaca sangat panjang dan bikin capek kalau di scroll terus. Kamu bisa membuat daftar isi seperti Wikipedia di blogger, dan ini bukan sekedar hiasan untuk membuat tampilan blog menjadi lebih menarik.

TOC yang akan kita buat memiliki manfaat besar dari sisi SEO (Search Engine Optimization). Dimana daftar isi ini nantinya akan terindex dan tampil dalam hasil pencarian google. Script yang akan digunakan bisa diaplikasi di semua template blogger. Kemudian script ini sangatlah ringan karena dibuat dengan CSS dan HTML saja. Jadi tidak ada penambahan JavaScript yang membuat beban ketika page loading.

Kamu bisa melihat artikel dengan judul Hukum Archimedes, dimana disana terdapat table of content untuk blogspot seperti di wikipedia. Kamu bisa melihat gambar dibawah ini, penampakan hasil penelusuran google sebagai contoh blog yang memakai TOC.

Cara Membuat Table of Contents (TOC) di Blogger.
Disini script akan membaca id heading yang terdapat pada struktur HTML dan langsung loncat ke bagian heading yang dipilih. Bagi yang mengerti koding, ini sama halnya dengan memanggil ID yang ada di HTML. Supaya tidak tambah bingung, langsung saja kita praktekkan.

1. Pertama, kita membuat tampilan TOC nya terlebih dahulu dengan kode CSS.

2. Kemudian edit template blogger dengan cara klik menu tema > klik tombol Edit HTML.

3. Silahkan kamu copy script dibawah ini pada bagian atas tag penutup </style> atau ]]></b:skin>. Biasanya pada beberapa template blogger terdapat lebih dari satu tag </style> atau ]]></b:skin> jadi kamu coba saja satu persatu hingga tampil CSS nya.

/* Table of Contents by clintontutblogger.xyz*/

.toc {background-color:#f8f9fa; 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) &gt; .toctoggle {display:inline !important; position:absolute;  opacity:0}

:not(:checked) &gt; .toctogglespan:before {content:'['}

.toctoggle:not(:checked) + .toctitle .toctogglelabel:after {content:'sembunyikan';display: inline}

.toctoggle:checked + .toctitle .toctogglelabel:after {content:'tampilkan'}

:not(:checked) &gt; .toctogglespan:after {content:']'}

.toctoggle:checked ~ ul{display:none}

:target::before {content:''; display:block; height:0px; margin-top:0px; visibility:hidden}

• Perhatikan deret kode terakhir :target::before. Jika kamu memakai menu sticky header / navigasi, ubah height dan margin-top sesuai dengan ukuran header / navigasi yang dipasang. Misal ukurannya 50px, maka ubah menjadi height:50px dan margin-top:-50px

4. Setelah di pastekan, klik simpan template (save template).

Sekarang kita masuk ke bagian pembuatan daftar isi table of content di dalam artikel blog. Berikut cara membuatnya

1. Buat postingan baru.

2. Kemudian kamu pilih mode HTML bukan yang COMPOSE.

3. Copy script dibawah ini pada bagian paragraf awal atau bagian yang ingin disisipi TOC nya.

<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="#toc1" title="Judul Satu">Judul Satu</a></li>

    <li>2 <a href="#toc2" title="Judul Dua">Judul Dua</a></li>

    <li>3 <a href="#toc3" title="Judul Tiga">Judul Tiga</a></li>

    <li>4 <a href="#toc4" title="Judul Empat">Judul Empat</a></li>

    <li>5 <a href="#toc5" title="Judul Lima">Judul Lima</a>

      <ul>

      <li>5.1 <a href="#toc5_1" title="Sub Judul Lima ke Satu">Sub Judul Lima ke Satu</a></li>

      <li>5.2 <a href="#toc5_2" title="Sub Judul Lima ke Dua">Sub Judul Lima ke Dua</a></li>

      </ul>

    </li>

    <li>6 <a href="#toc6" title="Judul Enam">Judul Enam</a></li>

  </ul>

</div>

Note: #toc1, #toc2, dst itu merupakan kode unik atau ID untuk memanggil elemen yang ada di artikel nantinya. Kamu bisa menambah dan menguranginya sesuai kebutuhan.

4. Kemudian kita masukkan ID tadi ke heading, subheading atau judul di artikel yang sama dengan table off contents diatas.

Bagaimana? Sekarang blog kamu sudah seperti Wikipedia atau blog wordpress bukan? Demikianlah tutorial cara membuat daftar isi table of contents di blogger. Semoga artikel ini bermanfaat dan bisa dengan mudah kamu terapkan di dalam postingan kamu. Terimakasih sudah berkunjung.

Share :