Cara Membuat Widget Daftar Isi di Artikel Blog

Get Link | Click 2X

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

Info
Berbeda dengan sitemap yang dapat menjangkau semua artikel yang ada di dalam blog/website. Widget daftar isi ini hanya dapat menjangkau seluruh atribut id (anchor) yang ada di dalam artikel.

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

Cara Membuat Widget Daftar Isi di Artikel Blog

Jika 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 menempatkan resource jquery diatas. Berikutnya kita belangkah 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 kode atau tag HTML berikut.

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

Catatan
Untuk memasang id tujuan pada tag <a> harus diawali dengan tanda # (pagar).
Misalnya, di artikel sobat, sobat buat link seperti ini <a href="#Id-tujuan">Judul Paragraft</a>

Contoh:

<a href="#Cara-Membuat-Daftar-Isi">Judul Tujuan</a>

Untuk tag dengan id target dapat dibuat seperti berikut.

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

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

Demo

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. Saya Feri Irawan, terima kasih atas kunjungannya ke artikel ini dan nantikan artikel berikutnya dari jalur super. Salam Anak Bangsa!

Go to Link

Feri irawan

Blogger asal Sulawesi Selatan yang jarang posting artikel.

Share this post