Cara Membuat Daftar Isi di dalam Artikel Blog

Daftar Isi

• Daftar Isi Postingan
• Latihan  

Pada artikel ini saya ingin memberikan cara membuat Daftar Isi di dalam Postingan atau Artikel Blog. Cara ini adalah dengan mengarahkan link yang mengarah ke bagian-bagian tertentu (pada halaman yang sama).

Daftar Isi Postingan

Daftar Isi di dalam Postingan atau Artikel Blog sangat diperlukan oleh pembaca jika artikel dalam postingan cukup panjang dan terdiri dari beberapa sub judul. Daftar isi dapat memudahkan pembaca mengetahui hal apa saja yang akan dibahas di dalam artikel, dan memudahkan untuk cepat .

Banyak cara cara yang dapat dilakukan untuk membuat daftar isi didalam halaman postingan.

Bagi pemula biasanya akan kesulitan, jika langsung membuat daftar isi di halaman HTML Blog. Karena jika tampilan dikembalikan ke Tampilan Menulis dan ingin kembali lagi ke tampilan HTML untuk mengadakan perubahan, struktur kode telah berubah.

Dalam turorial berikut, saya akan menjelaskan menggunakan teks editor HTMLPad.

Latihan

Berikut ini adalah struktur dasar kode, dari sebuah contoh daftar isi yang berisi 2 buah sub judul yaitu CANDI KENDIL dan CANDI JAWI.

Perhatikan tanda # pada href, dan pada id  tanda # tidak ada.

Ketik kode berikut pada teks editor HTMLPad, agar dapat langsung dilihat hasilnya.

<p>Daftar Isi</p
   <ul>
      <li><a href="#Sub Judul 1">CANDI KENDIL</a></li>
      <li><a href="#Sub Judul 2">CANDI JAWI</a></li>
   </ul>

<h2 id="Sub Judul 1">CANDI KENDIL</h2>
<p>Artikel</p>

<h2 id="Sub Judul 2">CANDI JAWI</h2>
<p>Artikel</p>

Jika belum memiliki teks editor HTMLPad, download disini. 

Selanjut teks Artikel diantara <p>…</p>, kita isi dengan sebuah paragraf.

Hasilnya: 

Coba klik daftar isi CANDI KENDIL dan CANDI JAWI. Jika link tersebut berfungsi, maka kode tersebut dapat Anda copy lalu tempatkan pada postingan pada halaman HTML.

Klik tanda pinsil disebelah kiri atas pilih Tampilan HTML.

Lalu tempelkan kode dari HTMLPad ke halaman HTML.

Halaman postingan ini, menggunakan cara membuat daftar isi dalam halaman blog seperti yang telah dijelaskan diatas. 

Selamat mencoba!!!

Published: Seno Adjie.