Membuat Daftar Isi di Postinagn Blog Dengan HTML

Daftar Isi
  1. Apa itu daftar isi postingan
  2. Bahan dalam membaut daftar isi postingan
  3. Membuat daftar isi pada postingan blog
  4. Penutup

Apa itu daftar isi postingan ?

Daftar isi postingan adalah daftar poin - poin link pembahasan pada isi artikel, Untuk contoh, lihat daftar isi dibagian atas postingan ini.

Ketika nama daftar tersebut di klik maka akan menuju poin atau penjelsaan tentang nama daftar tersebut.

Hal ini sagat memudahkan dalam menju ke artikel yang kita butuhkan, jadi kita tidak capek dalam melakukan secroll pada postingan tersebut.

Apakah daftar isi ini responsive jawabnya "Ya" karena kode script tersebut tidak menggau kode yang lainya.


Yang harus di persiapkan dalam membuat daftar isi pada blog sebagi berikut

  • Postingan blog
  • Kode script kode Daftar isi
<div><b>Daftar Isi</b></div>
<ol>
   <li><a href="#daftarisi-1">Text</a></li>
   <li><a href="#daftarisi-2">Text</a></li>
   <li><a href="#daftarisi-3">Text</a></li>
</ol>
  <br />
  
<h2 id="daftarisi-1">Poin Pembahasan 1</h2>
<h2 id="daftarisi-2">Poin Pembahasan 2</h2>
<h2 id="daftarisi-3">Poin Pembahasan 2</h2>

Keterangan

  • Tulisn warna merah silahkan kalin ubah menjadi poin artikel.
  • Bila tulisan terlalu besar ubah </h2> contoh </h3>, </h4> semakin besar angka semakin kecil
  • Bila kalian ingin menabah daftar isi, silahkan copy paste kode dan ubah saja id="daftarisi-3" ini contoh 3 menjadi 4, 5, 6 dan seterusnya


Cara membuat daftar isi pada postingan blog sebgai berrikut

  • Buat postingan pada blog, ubah menjadi mode HTML, paste kode yang sudah di sediakan di atas
  • Save 
  • Lalu pertinjau / View, untuk melihat hasilny
  • Done

Penutup

Sekarang kalian sudah bisa membuat daftar isi pada postingan blog denga mudah dan adanya daftar isi ini pastinya artikel sudah sangat rapi dan memudahkan pengujung dalam mencari poin dalam artikel yang di cari.

Kalin juga bisa Membuat Daftar isi Responsive dengan menambahkan kode script pada HTML Tema semoga bermanfaat, Trima kasih.
Bagikan:

Post a Comment