Cara Membuat Link Menuju Bagian atau Isi Dalam Artikel (Daftar Isi)

belarak.cf - Link yang menuju suatu bagian dari isi artikel sering kali disebut dengan istilah daftar isi, namun daftar isi disini bukan berarti halaman sitemap. Daftar isi disini merupakan suatu link yang mana jika kalian meng-Kliknya, maka kalian akan diarahkan secara otomatis pada bagian pembahasan yang dimaksudkan pada link tersebut.

Dalam arti lain, kalian tidak perlu repot melakukan scrolling atau menggeser kursor kalian untuk bisa menuju bagian dalam suatu artikel tersebut. Dalam artikel kali ini saya akan mencoba menjelaskan bagaimana cara membuat link yang menuju pada bagian atau isi dalam suatu artikel.

Cara Membuat Link Menuju isi Artikel

A. Simulasi Sebelum Penerapan

Dalam kasus ini, saya ibaratkan kalian akan membuat suatu artikel yang membahas bagaimana cara atau langkah-langkah membuat akun blogger, dan didalamnya kalian akan membahas beberapa tahapan, seperti pembuatan email, pendaftaran akun blogger dan tahap setting pada blogger. Maka secara strukturalnya kalian akan membahas secara mendetail ketiga tahapan diatas, dan biasanya juga pada pembuatan artikel seperti ini akan terdapat bagian-bagian seperti pada simulasi gambar dibawah ini :

Nah, dengan kalian menerapkan sebuah link khusus yang menuju pada bagian-bagian didalam artikel tersebut, maka pengunjung blog kalian tidak akan repot untuk menuju pada bagian artikel tersebut.

B. Pembuatan Link Menuju Bagian Artikel

• Pertama silahkan kalian masuk ke akun blogger kalian
• Klik tombol entri baru untuk memulai pembuatan posting artikel
• Setelah kalian berada pada halaman pembuatan posting, silahkan kalian pindahkan mode Compose ke mode html dan salinlah kode dibawah ini, kemudian tempelkan di bagian mode html tersebut .

<div style="text-align: center;">
<b>DAFTAR ISI PEMBAHASAN</b></div>
<a href="#Pembuatan-Email"><i aria-hidden="true" class="fa fa-check-square-o"></i>&nbsp; <b>Cara Daftar Email</b></a><br/>
<a href="#Pendaftaran-Blogger"><i aria-hidden="true" class="fa fa-check-square-o"></i>&nbsp; <b>Cara Daftar Blogger</b></a><br/>
<a href="#Setting-Blogger"><i aria-hidden="true" class="fa fa-check-square-o"></i>&nbsp; <b>Cara Setting Blogger</b></a><br/>

• Kode berwarna Biru, silahkan kalian ganti dengan judul daftar isi yang kalian inginkan
• Kode berwarna Merah, silahkan kalian ganti dengan id yang kalian inginkan. Disarankan buatlah id tidak lebih dari dua kata, agar kalian tidak ribet dalam langkah selanjutnya
• Kode warna Coklat, silahkan kalian ganti dengan judul yang akan mengarahkan pada bagian artikel yang kalian buat .
• Banyaknya menu link yang terdapat pada daftar isi bisa kalian sesuaikan dengan kebutuhan, d alam contoh ini saya membuat tiga link bagian artikel.
• Setelah semua bagian telah kalian edit, langkah selanjutnya silahkan kalian kembali ke mode compose dan kalian akan melihat sebuah tampilan kurang lebihnya seperti pada contoh gambar dibawah ini

• Lalu buatlah isi artikel kalian seperti biasanya.
• Harus kalian ingat, bahwa dalam menulis isi artikelnya harus tepat dibawah link khusus yang tadi kalian buat, atau setidaknya kalian harus membuat postingan artikel kalian secara ter-struktur sehingga kerangka artikel kalian akan nampak seperti gambar dibawah ini

• Untuk membuat sub judul pada bagian Pembuatan email, pendaftaran akun blogger, dan Tahap setting blogger, gunakanlah tag H2 atau sub heading dan kasihlah warna pada tulisan tersebut shingga akan nampak seperti dibawah ini

A. Pembuatan Email

• Setelah kalian selesai membuat semua isi artikel, jangan dulu kalian publikasikan artikel tersebut
• Langkah terakhir silahkan kalian kembali ke mode html dan lihat kode yang nampak seperti ini

<h3 style="text-align: center;">
<b><span style="color: #cc0000;">A. Pembuatan Email</span></b></h3>

• Setelah menemukan bagian kode tersebut silahkan kalian sisipkan kode id="nama-id-link" pada bagian <span style.....>, sehingga akan nampak seperti ini

<b><span id="nama-id-link" style="color: #cc0000;">A. Pembuatan Email</span></b></h3>

• Kode berwarna merah atau nama id link , silahkan kalian rubah dengan nama id yang kalian buat diawal pembuatan artikel, sehingga akan menjadi seperti dibawah ini

<b><span id="Pembuatan-Email" style="color: #cc0000;">A. Pembuatan Email</span></b></h3>

• Selanjutnya silahkan kalian publikasikan artikel tersebut dan lihat hasilny
• Selesai