Cara Membuat Table of Contents (TOC) di Postingan Blogger

Cara Membuat Table of Contents (TOC) di Postingan Blogger - Sebagian orang mungkin ada yang bilang Jump Link atau Daftar Isi di dalam postingan Blogger, keduanya sama saja mengarah ke Table of Contents (TOC). Sebenarnya membuat jump link ini sangat mudah Anda hanya perlu memanfaatkan penggunaan ID pada HTML. Namun jika Anda masih belum paham disini saya akan menjelaskan cara pembuatan Table of Contents khusus untuk halaman postingan di blogspot.

Baca juga: Cara Membuat Artikel Terkait di Tengah Postingan

Pada umunya Table of Contents (TOC) digunakan pada aplikasi Microsoft Word, yang berfungsi untuk mengetahui daftar isi dari dokumen atau file tersebut. Namun kali ini bagaimana jika TOC ini kita gunakan pada blogger untuk membuat daftar isi di halaman posting blogger, mungkin ini akan terlihat lebih menarik.

Baca juga: Cara Memasang Iklan Adsense di Tengah Postingan

Selain itu desain yang digunakan pada TOC ini hampir mirip seperti Wikipedia, sehingga akan lebih menarik perhatian pembaca blog Anda. Di sini kita tidak menggunakan kode script untuk mendeteksi header teks atau heading tag yang disimpan pada edit HTML postingan blog, karena kita asumsikan penggunaan Table of Contents ini tidak digunakan untuk semua halaman, oleh karena itu penggunaan TOC ini harus dilakukan secara manual pada postingan yang ingin menggunakan TOC ini.

Membuat table of contents di blogger ini hanya menggunakan kode script HTML, di tambah dengan CSS untuk mengatur letak dan desain tampilannya, dan kode JavaScript untuk toggle list TOC untuk jump link ke TOC.
Cara Membuat Table of Contents (TOC) di Postingan Blogger

Cara Membuat Table of Contents (TOC) di Postingan Blogger

Lihat cara penerapan HTML pada demo di bawah ini, agar Anda tidak bingung ketika menerapkan pada halaman postingan blog Anda.


1. Masuk ke Blogger.com.
2. Klik Tema > Edit HTML.
3. Cari kode ]]></b:skin> atau </style>.
4. Copy kode css dibawah ini, lalu Paste di atas kode ]]></b:skin> atau </style>.
/* Table of Contents (TOC) */
#btn-cm{border:1px solid #dadada;border-radius:5px;background-color:#f9f9f9}
#btn_toc{font-weight:700;cursor:pointer;margin:10px}
#btn_toc:focus,#toc li:focus,.back_toc:focus{outline:none}
#btn_toc svg{vertical-align:middle}
#toc li{cursor:pointer}
#toc{display:grid}
.back_toc{cursor:pointer;text-align:right}
:target::before{content:"";display:block;height:40px;margin-top:-40px;visibility:hidden}
5. Lalu klik Simpan tema.

Catatan:
Perhatikan kode css dibawah ini:
:target::before{content:"";display:block;height:40px;margin-top:-40px;visibility:hidden}
- Jika Anda menggunakan menu navigasi sticky, silahkan atur bagian height:40px;margin-top:-40px.
- Jika Anda tidak menggunakan menu navigasi sticky, silahkan hapus kode tersebut.

6. Setelah itu masuk ke bagian Postingan > lalu Edit salah satu postingan blog Anda yang ingin menggunakan TOC.
7. Pastikan Anda berada pada bagian HTML bukan Compose.
8. Copy kode dibawah ini, lalu Paste setelah paragraf pertama atau bisa Anda sesuaikan sendiri.
<div id="btn-cm">
<div id="btn_toc" onclick="if (document.getElementById('toc').style.display === 'none') { document.getElementById('toc').style.display = 'block'; } else { document.getElementById('toc').style.display = 'none'; }" role="button" tabindex="0">Contents <svg width="18" height="18" viewBox="0 0 24 24"><path fill="#000000" d="M12,18.17L8.83,15L7.42,16.41L12,21L16.59,16.41L15.17,15M12,5.83L15.17,9L16.58,7.59L12,3L7.41,7.59L8.83,9L12,5.83Z" /></svg></div>
<div id="toc">
<ol>
  <li><a href="#toc_1" title="Subheading 1">Subheading 1</a></li>
  <li><a href="#toc_2" title="Subheading 2">Subheading 2</a></li>
  <li><a href="#toc_3" title="Subheading 3">Subheading 3</a></li>
  <li><a href="#toc_4" title="Subheading 4">Subheading 4</a></li>
  <li><a href="#toc_5" title="Subheading 5">Subheading 5</a></li>
</ol>
</div>
</div>

Catatan:
- Tambahkan URL postingan Anda sebelum #toc_1 dan seterusnya.
- Anda juga bisa menambahkan  #toc_6 dan seterusnya.

9. Lalu tambahkan id="toc_1" pada heading tag. Contohnya:
<h3>Subheading 1</h3> menjadi <h3 id="toc_1">Subheading 1</h3>
<h3>Subheading 2</h3> menjadi <h3 id="toc_2">Subheading 2</h3>
<h3>Subheading 3</h3> menjadi <h3 id="toc_3">Subheading 3</h3>
<h3>Subheading 4</h3> menjadi <h3 id="toc_4">Subheading 4</h3>
<h3>Subheading 5</h3> menjadi <h3 id="toc_5">Subheading 5</h3>

Catatan:
- Berlaku untuk heading tag h1, h2, h3, h4, h5, h6 sesuaikan dengan heading tag yang digunakan pada postingan blog Anda.
- Gunakan id="toc_1" kemudian id="toc_2" kemudian id="toc_3" dan seterusnya, sesuaikan dengan jumlah subheading atau minor heading yang ada pada postingan blog Anda.

10. Copy kode dibawah ini, lalu Paste pada bagian terakhir masing-masing paragraf.
<div class="back_toc" onclick="document.getElementById('btn_toc').scrollIntoView(true);" role="button" tabindex="0">Back to Content ↑</div>
11. Lalu klik Publikasikan atau Perbarui artikel blog Anda.

Catatan:
  • Jika Anda selesai mengatur/memasang TOC pada postingan blog, Anda harus tetap berada pada bagian HTML lalu klik Publikasikan atau Perbarui artikel blog Anda.
  • Jika setelah mengatur/memasang TOC kemudian Anda mempublikasikan atau memperbarui artikel Anda pada bagian Compose, maka link Subheading pada TOC yang saya contohkan diatas akan berubah menjadi link editor postingan tersebut, oleh karena itu Anda harus tetap berada pada bagian HTML ketika akan mempublikasikan atau memperbarui artikel Anda.
  • Atau sebelum kode #toc_1 tambahkan URL postingan Anda yang bisa dilihat pada bagian Tautan permanen pada saat Anda menulis artikel (teks editor). Jadi contohnya: https://www.caramanual.com/2018/02/cara-membuat-table-of-contents-toc-di-postingan-blogger.html#toc_1 dan seterusnya.

Cara Membuat Table of Contents (TOC) di Postingan Blogger 1
Code by Kompi Ajaib

Update: 23/04/2018

Cara Menambahkan Efek Smooth Scroll

Untuk menambahkan efek smooth scroll pada table of content, Anda perlu menambahkan beberapa kode jQuery yang di butuhkan.

Lihat demonyadi bawah ini setelah ditambahkan efek smooth scrolling, ketika judul pada table di klik maka akan scroll ke bawah dengan lembut atau smooth.


Silahkan tambahkan kode ini dan letakan sebelum kode </body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  // Add smooth scrolling to all links
  $("a").on('click', function(event) {

    // Make sure this.hash has a value before overriding default behavior
    if (this.hash !== "") {
      // Prevent default anchor click behavior
      event.preventDefault();

      // Store hash
      var hash = this.hash;

      // Using jQuery's animate() method to add smooth page scroll
      // The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
      $('html, body').animate({
        scrollTop: $(hash).offset().top
      }, 800, function(){
   
        // Add hash (#) to URL when done scrolling (default click behavior)
        window.location.hash = hash;
      });
    } // End if
  });
});
</script>

Catatan:
Untuk kode jQuery ini adalah versi 3.3.1
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Jika dalam template blog Anda sudah memasang kode jQuery sebelumnya, mau versi berapapun lebih baik di hapus salah satunya.


Itulah artikel mengenai cara membuat table of contents (TOC) di postingan blogger, jika Anda memiliki saran atau pertanyaan silahkan hubungi kami melalui halaman kontak atau dengan memberikan komentar dibawah ini. Terima kasih.
Cara Manual Cuman hobi nulis tentang tutorial blog jadi deh blog cara manual.

22 Komentar untuk "Cara Membuat Table of Contents (TOC) di Postingan Blogger"

  1. Kelihatannya mudah banget ya lihat step stepnya Sangat ingin bisa edit template
    kalau udah lihat kode kode kok puyeng banget rasanya

    BalasHapus
    Balasan
    1. Sebenarnya gampang banget mba cara gunainnya, cuman emang kelihatan ribet gitu. Silahkan lihat demonya, biar tidak bingung cara pasangnya.

      Hapus
  2. Save dulu gan, kali aja next time butuh buat di terapin di blog saya..

    BalasHapus
  3. Mantap bang share nya, ijin coba (y) :D
    Soalnya dari kemarin saya cari" belum nemu yang pas tapi disini malah langsung pas :)

    BalasHapus
    Balasan
    1. sip mirkisip....otak atik kode html nya .....ini mungkin butuh konsentrasi penu untuk terapkan di blog..

      lalu nanti apa kegunanaya mas...

      Hapus
    2. TOC ini merupakan table yang berisi list atau daftar dari subjudul yang ada pada postingan itu sendiri, jika di klik sub judul pada TOC maka akan langsung loncat ke subjudul yang di klik.

      Hapus
  4. sebelum ini saya guna Mac untuk editing blog saya. sekarang saya guna pc biasa. screen pc kecil banding Mac. jadi kurang seronok bila mahu edit code2 ni... btw, terima kasih berkongsi

    BalasHapus
  5. Wah mantap. Ini tutorial yang saya cari. Izin coba gan

    BalasHapus
  6. Mantap gan, kali aja agan punya kode tambahan efek scroll kebawah pas di klik..ditunggu responnya gan

    BalasHapus
    Balasan
    1. Terima kasih atas masukkannya, nanti malam saya update kembali dengan menambahkan efek smooth scroll pada table of content.

      Hapus
  7. Demonya bagus juga ya..
    Boleh aku cobain nih ya.

    BalasHapus
  8. penjelasan pada proses edit di postingan nampaknya perlu dijelaskan lebih detail lagi , mas...seperti:
    antara langkah 8 dengan langkah 9 plus catatan nomer 9, saya bingung...
    langkah ke 10 itu "bagian terakhir paragraf" itu yang dimaksud paragraf yang mana ya?
    -

    aku sudah nyoba otak-atik beberapa kali, tapi belum berhasil nih

    mohon penjelasannya.

    makasih sebelumnya

    BalasHapus
    Balasan
    1. Halo Mas Heri,

      Saya sudah lengkapi dengan video tutorialnya ya, semoga bisa dipelajari.

      Terima kasih.

      Hapus
  9. Ini bisa Terindex ke google gak... Biasanya kan ada tulisan "lompat ke" di hasil search

    BalasHapus
    Balasan
    1. Bisa, asalkan memang keywordnya tertaget dan poin artikelnya sangat kuat.

      Hapus
  10. Kalau urutannya pingin dibalik, gimana caranya?
    Misalnya:
    Subheading 5
    Subheading 4
    Subheading 3
    Subheading 2
    Subheading 1

    BalasHapus
    Balasan
    1. Halo,
      Itu sama aja kok, tinggal ganti teksnya saja.

      Hapus
  11. terimakasih mas tutorialnya terutama kode jquey smoothnya

    BalasHapus
  12. kalau misalkan agar pas TOC nya di klik pas dia membesar biar ada transisinya gimana ya?

    BalasHapus
Jika ada yang masih kurang jelas, silahkan untuk bertanya pada kolom komentar di bawah ini atau dengan menghubungi kami di halaman kontak.

1. Centang kotak Notify me untuk mendapatkan notifikasi komentar.
2. Komentar kami moderasi, dan tidak semuanya dipublish.
3. Semua komentar dengan menambahkan link akan dihapus dan tidak akan dipublikasikan.

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel