Cara Menggunakan Aplikasi Table Of Conten (TOC) atau Daftar Isi

Post kali ini merupakan tutorial Cara Menggunakan Aplikasi  Table Of Conten (TOC) atau Daftar Isi. Table Of Contents adalah sebuah daftar ide pokok utama dalam sebuah artikel atau bacaan. Table Of Contents juga sering disebut dengan TOC. Menurut Wikipedia Pliny the Elder mengkredit Quintus Valerius Soranus (nomor 82 SM) sebagai penulis pertama yang menyediakan daftar isi untuk membantu pembaca menavigasi sebuah karya panjang. Jika orang luar sana mengenal Table, kita semua lebih mengenal TOC sebagai daftar isi dalam sebuah buku atau karya sastra lainnya. Pasti kalian semua lebih suka membaca daftar isi sebelum mulai membaca sebuah buku kan ? Berkembangnya dunia digital juga membuat perkembangan teknik menulis dibawa ke ranah digital. Salah satunya adalah TOC. Seperti wikipedia digitalnya dari ensiklopedia juga selalu menerapkan Table Of Contents di setiap isi artikelnya. Biasanya diletakan setelah ide pokok utama atau setelah kata pengantar tulisan.

Table Of Contents juga sering ditemukan pada file pdf. Para pembuat e-book yang sudah berpengalaman selalu menyertakan Table Of Contents disetiap karyanya. Kegunaan dan Fungsi Menerapkan TOC

Jika kalian menerapkan TOC disetiap artikel, maka serch engine akan mudah menemukan artikel yang sudah kalian tulis. Ini dikarenakan Search Engine seperti Google, Yahoo, Bing, dan Amazon menyukai artikel yang informatif.Dan jika membuat sebuah dokumen atau persentasi atau e-book akan memudahkan kita dalam menjelaskan sesuatu ke orang lain.

Cara Menggunakan Aplikasi  Table Of Conten (TOC) atau Daftar Isi

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>.

 */ #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. Lalu tambahkan kode dibawah ini sebelum </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


    // Make sure this.hash has a value before overriding default behavior
  $("a").on('click', function(event) {




    if (this.hash !== "") {

      // Prevent default anchor click behavior


      // Using jQuery's animate() method to add smooth page scroll
      event.preventDefault();



      // Store hash

      var hash = this.hash;





        scrollTop: $(hash).offset().top
      // The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area

      $('html, body').animate({


      }, 800, function(){

  


</script>
        // Add hash (#) to URL when done scrolling (default click behavior)

        window.location.hash = hash;

      });

    } // End if

  });

});

Langkah selanjutnya Buka Aplikasi  dan cek video tutorial penggunaan dibawah ini : 

Untuk download aplikasi cek disini 

Semoga bermanfaat.