Lompat ke konten Lompat ke sidebar Lompat ke footer

Cara Membuat Daftar Isi Blog Responsive

Cara Membuat Table Of Content Di Postingan Blogger

Dalam panduan kali ini saya akan bagikan cara membuat daftar isi dalam postingan atau yang disebut Table of Contents (TOC) yang ringan dan responsive. Adanya daftar isi akan membantu pembaca untuk beralih ke topik tertentu dalam sebuah artikel yang panjang.


Selain memudahkan pengunjung saat membaca sebuah tulisan yang panjang, daftar isi atau TOC ini juga bisa terindex oleh mesin pencari seperti Google dan Bing dalam bentuk jump link. Ini karena kata kunci berupa tautan dalam artikel saling berhubungan. Dengan kualitas artikel yang baik maka blog kamu akan semakin kuat posisinya di peringkat hasil pencarian.

Untuk membuat daftar isi dalam posting harus dilakukan secara manual. Kamu bisa memanfaatkan kode HTML sederhana berupa tautan yang terhubung dengan sub-judul tulisan. Kode daftar isi ini identik dengan tag '#'.

Cara Membuat Daftar Isi Sederhana dalam Postingan


Jika kamu mencari tutorial cara membuat datar isi atau TOC di Google, kamu akan menemukan banyak sekali situs yang membagikan cara membuatnya. Tapi rata-rata menggunakan tambahan kode CSS bahkan Javascript yang panjang dan rumit.

Padahal sebenarnya kamu bisa saja langsung membuat daftar isi dalam postingan tanpa menambahkan CSS atau Javascript apapun! Tidak percaya? Coba klik link atau tautan di bawah ini:


Kamu kembali ke bagian atas halaman atau malah meluncur ke bawah, bukan? Jika dilihat sepintas memang tidak ada yang aneh pada link di atas. Tapi jika diperhatikan, ada kode yang saya tambahkan di sana. Lihat kode HTML berikut ini:

<a href="https://www.oom.web.id/2019/09/cara-membuat-daftar-isi-blog-responsive.html#atas">Kembali ke atas</a>

<a href="https://www.oom.web.id/2019/09/cara-membuat-daftar-isi-blog-responsive.html#bawah">Atau mau ke bawah</a>

Lalu kenapa bisa kembali ke bagian atas? Ternyata saya menambahkan atribut berikut ini pada bagian awal paragraf pertama di atas dan pad aparagraf terakhir:

<span id="atas"></span>
<span id="bawah"></span>

Cara ini berbeda dengan kebanyakan blogger yang menyisipkan tag id pada subheading seperti H2 atau H3. Cara yang saya bagikan disini jelas lebih fleksibel, kamu bisa melompat ke bagian manapun dari isi artikel tanpa harus berpedoman pada sub-judul.

Kelemahan dari cara ini adalah, tampilan index dari daftar isi sangat sederhana dan seadanya. Kamu bisa membuat daftar isi dalam bentuk susunan link yang memanjang ke bawah seperti ini:
Jump Link 1
Jump Link 2
Jump Link 3
Jump Link 4

Atau seperti ini:
  1. Jump Link 1
  2. Jump Link 2
  3. Jump Link 3
  4. Jump Link 4

Jika kamu ingin membuat daftar isi seperti Wikipedia yang ada tombol Sembunyikan atau yang dipakai blog Oom, kamu bisa menggunakan script Daftar Isi (TOC) Responsive di Blogger berikut ini.

Cara Membuat Table of Contents (TOC) Responsive di Blogger

Untuk membuat daftar isi postingan seperti WIkipedia, dibutuhkan tambahan script CSS untuk membentuk desain atau layoutnya. Caranya cukup mudah. Silahkan ikuti panduan lengkap membuat Table of Contents di Blog berikut ini.

  1. Masuk ke menu "Template" dan pilih "Edit HTML"

  2. Cari baris script ]]></b:skin> atau </style>

  3. Copy-paste script CSS di bawah ini tepat sebelum kode di tersebut:

    /* Script Table of Contents - Oom.web.id */
    .toc {border:1px solid #ddd; padding:10px 13px; display:table; line-height:1.6em;}
    .toc h3 {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:#060}
    :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:75px; margin-top:-75px; visibility:hidden}

  4. Perhatikan pada bagian yang saya tandai, kamu bisa mengubah pengaturan nilai atau value sesuai kebutuhan.

  5. Jika sudah, klik tombol Simpan.

  6. Sekarang jika kamu ingin memasang kode daftar isi atau TOC di Blogspot, masuklah ke mode "HTML" lalu copy-paste script di bawah ini pada bagian atas postingan:

    <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">Judul 1</a></li>
        <li>2. <a href="#toc2">Judul 2</a></li>
        <li>3. <a href="#toc3">Judul 3</a>
          <ul>
          <li>3.1. <a href="#toc3_1">Sub Judul 3.1</a></li>
          <li>3.2. <a href="#toc3_2">Sub Judul 3.2</a></li>
          </ul>
        </li>
        <li>4. <a href="#toc4">Judul 4</a></li>
      </ul>
    </div>

  7. Kode toc1 toc2 dan seterusnya adalah elemen pemanggil. Kamu bisa menambah atau mengurangi sesuai kebutuhan.

  8. Selanjutnya atur ulang penempatan subheading atau paragraf yang ingin ditandai dengan id yang sama dengan table of contents di atas.

  9. Untuk penempatan pada subheading atau sub-judul:

    <h3 id="toc1">Sub-heading pertama</h3>
    <h3 id="toc2">Sub-heading kedua</h3>
    <h3 id="toc3">Sub-heading ketiga</h3>
         <h3 id="toc3_1">Sub-heading tiga ke satu</h3>
         <h3 id="toc3_2">Sub-heading tiga ke dua</h3>
    <h3 id="toc4">Sub-heading empat</h3>

  10. Sedangkan untuk penempatan selain di sub-judul, misalnya pada awal paragraf tertentu, tambahkan script di bawah ini tepat sebelum kata pertama di awal paragraf:

    <span id="toc1"></span>
    <span id="toc2"></span>
    <span id="toc3"></span>
    dan seterusnya...

Pastikan setelah kamu memasang script atau kode daftar isi di atas JANGAN masuk ke mode Compose lagi. Jika masuk ke Compose, link id seperti #toc akan rusak dan kacau jadi kamu harus mengeditnya lagi satu per satu dari awal.

1 komentar untuk "Cara Membuat Daftar Isi Blog Responsive"

  1. Thank you for the knowledge that has been shared. Very informative and easy to understand 😊


    for more information click walisongo.ac.id

    BalasHapus