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

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

DEMO

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.

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.

DEMO

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.

Bagikan Artikel ini