Cara Membuat Daftar Isi di Postingan Blog

Sama halnya dengan buku, pada buku terdapat daftar isi yang digunakan untuk menjelajahi atau menemukan suatu meteri dalam buku dengan cepat. Nah hal tersebut juga dapat dibuat pada artikel atau postingan blog yang biasa disebut dengan widget daftar isi.

Info
Daftar isi berbeda dengan sitemap yang dapat menjangkau semua artikel yang ada di dalam blog/website sesuai label postingan. Tatapi, widget daftar isi ini hanya dapat menjangkau seluruh atribut id yang ada di dalam artikel dengan menggunakan link anchor

Nah jika sobat penasaran seperti apa cara membuatnya, mari kita langsung berlanjut ke cara pembuatan widget daftar isi berikut inj.

Cara Membuat Widget Daftar Isi di Artikel / Postingan Blog

Jika yang di pikiran sobat membuat widget daftar isi itu susah, berarti sobat salah. Karna sebenarnya membuat widget daftar isi itu sangatlah mudah dan cukup cepat. Seperti apa cara membuatnya? Berikut langkah-langkahnya.

#1. Langkah pertama, silahkan sobat salin resource jquery berikut ini dan pastekan tepat di atas tag </body> kemudian simpan.

<script src="https://code.jquery.com/jquery-3.4.1.js"></script>

<script>
$( ".btn-daftar-isi" ).click(function() {
$( ".kotak-daftar-isi" ).slideToggle( "slow" );
});

$(document).ready(function(){
    $( "a[href^='#']" ).click(function( event ) {
        event.preventDefault();
        $("html, body").animate({ scrollTop: $($(this).attr("href")).offset().top }, 3000);
    });
});
</script>

Nah setelah selesai menempatkan resource jquery diatas. Berikutnya kita melangkah ke cara pembuatan widget daftar isinya. Untuk itu, silahkan sobat lakukan langkah-langkah berikut dengan teliti.

#1. Salin kode CSS berikut dan pastekan tepat di antara tag <style></style>.

/* Tombol daftar Isi */
.btn-daftar-isi {
 background:#fff;
 border:solid #cccccc 1.5px;
 border-radius:5px;
 margin-left: 1em;
 margin-right:1em;
 padding: 8px 10px;
} 
.btn-daftar-isi:hover {
 background:#cccccc;
 transition-duration: 0.5s;
}
.btn-daftar-isi b:before {
 content:"Tampilkan"
}
.btn-daftar-isi b:hover:before {
 content:"Sembunyikan"
}
 
/* Kotak Daftar Isi */ 
.kotak-daftar-isi {
 display:none;
 margin-left: 1em;
 margin-right:1em;
 background:#F8F8FF;
 color:#393939;
 padding: 8px 10px;
 margin-top:-5px;
 border: solid 1.5px #cccccc;
 border-radius: 0px 0px 5px 5px;
}

#2. Nah untuk pemasangan widgetnya, sobat hanya perlu Memanggil semua kode jquery dan CSS diatas dengan tag HTML berikut ini.

<div class="btn-daftar-isi">DAFTAR ISI - <b></b></div>
<div class="kotak-daftar-isi">
<ol>
 <li><a href="#Id-Tujuan"></a></li>
 <li><a href="#Id-Tujuan"></a></li>
 <li><a href="#Id-Tujuan"></a></li>
 <li><a href="#Id-Tujuan"></a>
 <ul>
  <li><a href="#Id-Tujuan"></a></li>
  <li><a href="#Id-Tujuan"></a></li>
  <li><a href="#Id-Tujuan"></a></li>
  <li><a href="#Id-Tujuan"></a></li>
 </ul>
 </li>
</ol>
</div>

Keterangan:
Untuk cara penggunaan, silahkan sobat ganti semua url href="#Id-Tujuan" di atas dengan id target atau id tujuan yang ada di artikel soba. Misalnya, judul tiap paragraf yang ada di artikel sobat, sobat kasih tag heading (h1, h2, h3, atau h4) yang didalamnya terdapat atribut id.

Contoh:

<a href="#tujuan-1">Judul Tujuan</a>

Untuk tag dengan id target dapat dibuat seperti berikut.

<h2 id="tujuan-1">Cara Membuat Widget Daftar Isi</h2>

Dengan begitu, jika anda mengklik link yang di dalamnya terdapat url yang menuju pada id="tujuan-1", maka secara automatis anda akan diarahkan pada tag <h2> dengan id target id="tujuan-1"

Nah saya rasa begitulah cara membuat widget daftar isi di artikel blog. Gimana, bener-bener mudah bukan?

Oke sekian artikel hari ini, semoga apa yang saya bagikan dapat bermanfaat untuk sobat yang berkunjung dan dapat bermanfaat juga bagi bayak orang di luar sana. Terima kasih atas kunjungannya ke artikel ini dan nantikan artikel berikutnya dari Bang Feri. Salam Anak Bangsa!

Share :