Cara Membuat Jump Link Menuju Bagian Dalam Artikel (Daftar Isi) 100% Work

komputerdia.com - 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 artikel yang dimaksudkan pada link tersebut.

Selain pengertian diatas, banyak para blogger yang berargumen bahwa fitur tersebut dinamakan dengan istilah jump link. Jump link merupakan salah satu fitur internal link artikel yang terdapat pada suatu website atau blog, dimana ketika kita klik link tersebut maka secara otomatis kita akan diarahkan pada bagian tertentu didalam isi artikel tersebut

Dengan adanya fitur jump lini ini kalian tidak perlu repot melakukan scrolling atau menggeser kursor kalian untuk bisa menuju bagian dalam suatu artikel tersebut, namun hanya dengan melakukan satu kai klik pada link tersebut, maka kalian akan diarahkan kebagian tersebut. Dalam artikel kali ini saya akan mencoba menjelaskan bagaimana cara membuat link yang menuju pada bagian atau isi dalam suatu artikel.

Cara Membuat Jump 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 yang akan dibacanya.

B. Pembuatan Jump Link Menuju Bagian Artikel

• Pertama silahkan kalian masuk ke akun blogger kalian
• Klik tombol entri baru untuk memulai pembuatan posting artikel
• Silahkan isi judul postingan sesuai dengan konten artikel yang akan kalian buat
• 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 /><br/>
Masukkan konten artikel kalian disini

• Kode berwarna Biru, silahkan kalian ganti dengan judul daftar isi yang kalian inginkan
• Kode berwarna Merah, silahkan kalian ganti dengan id (judul bagian artikel) yang kalian inginkan. Disarankan buatlah id tidak lebih dari dua kata, agar kalian tidak susah 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 format sub judul pada bagian Pembuatan email, pendaftaran akun blogger, dan tahap setting blogger, gunakanlah tag H4 atau Minor heading. Untuk lebih jelasnya kalian dapat melihat ilustrasi gambar dibawah ini

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

<h4>
A. Pembuatan email</h4> 

<h4>
B. Pendaftaran akun blogger</h4>

<h4>
C. Tahap setting blogger</h4>

• Setelah menemukan bagian-bagian kode diatas silahkan kalian sisipkan atau tambahkan kode <span id='link id kalian'> . . . . . </span> sehingga kode tersebut akan terlihat seperti dibawah ini

<h4><span id='link id kalian'>
A. Pembuatan email</span></h4>

<h4><span id='link id kalian'>
B. Pendaftaran akun blogger</span></h4>

<h4><span id='link id kalian'>
C. Tahap setting blogger</span></h4>

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

<h4><span id='Pembuatan-Email'>
A. Pembuatan email</span></h4>

<h4><span id='Pendaftaran-Blogger'>
B. Pendaftaran akun blogger</span></h4>

<h4><span id='Setting-Blogger'>
C. Tahap setting blogger</span></h4>

• Sampai tahap ini pembuatan artikel dengan fitur jump link sudah kalian buat dengan baik, namun sebelum dipublikasikan harap periksa lagi keseluruhan elemen artikel pada mode htmlnya, biasanya akan terlihat kode seprti gambar dibawah ini

• Jika kode tersebut tidak dihapus, maka jump link tersebut tidak akan berfungsi dengan baik. Untuk mengatasinya silahkan kalian hapus kode tersebut (yang saya berikan tanda merah) sehingga akan terlihat seperti gambar dibawah ini

• Setelah semua pengaturan telah diatur seperti diatas, selanjutnya silahkan kalian publikasikan artikel tersebut dan lihat hasilnya
• Untuk hasil yang sudah jadi silahkan kalian lihat pada demo dibawah ini

Related Tags : Cara Membuat link dalam satu halaman,  Cara membuat link dalam satu artikel, Cara membuat link menuju bagian artikel, Cara membuat link dalam satu halaman artikel

Share this post