Pernahkah anda melihat di dalam sebuah halaman artikel blog disajikan daftar link seperti daftar isi, dan ketika link tersebut di-click maka akan menuju (scroll) ke bagian tertentu tapi masih di halaman yang sama, dan memperlihatkan bagian artikel yang mengandung text sesuai dengan text dari link yang di-click.

Link jenis ini barangkali masih bisa disebut internal link ke halaman yang sama, dan biasanya link jenis ini digunakan untuk membuat point-point penting dalam artikel yang bersangkutan (seperti daftar isi) karena  artikel sangat panjang.

cara membuat link daftar isi yang menuju halaman yang sama


Tujuan dibuatnya daftar link seperti ini adalah untuk  memudahkan pengunjung agar dapat memilih point-point penting yang terdapat pada artikel tersebut, pengunjung tinggal meng-click link salah satu dari daftar link yang disediakan maka dia akan di bawa ke bagian lain dari halaman dokumen yang sama.


Istilah link seperti ini apa?


Saya Sebenarnya kesulitan mendefinisikan istilah untuk link seperti ini, saya menyebutnya sebagai internal link dalam satu halaman atau internal link ke bagian lain dokumen, intinya ketika link tersebut diklik maka anda akan di arahkan ke bagian tertentu di halaman artikel tersebut tetapi masih di halaman yang sama.

Untuk membuat link seperti ini sebenarnya sangat mudah, yang jelas yang harus anda kuasai adalah, anda harus memahami perintah html dasar untuk membuat link.

Jika anda kebetulan masih belum tau tentang perintah dasar HTML untuk membuat sebuah link maka anda bisa baca dulu artikel berikut:
Mengenal apa itu hyperlink? (khusus pemula)
Cara membuat link (hyperlink) di blogspot

Dengan membaca artikel di atas setidakny anda paham, apa itu hyperlink dan bagaimana cara membuat hyperlink dengan bantuan tool maupun dengan cara manual melalui penulisan kode HTML.

Cara Membuat Link (daftar isi) dalam satu halaman yang sama

Saya anggap anda sudah memahami tentang apa itu link dan bagaimana cara membuat link, selanjutnya adalah kita akan coba membuat link untuk daftar isi artikel anda yang sangat panjang.

Untuk membuat link seperti ini ada 2 bagian yang harus anda buat, yaitu  link dan text target atau text tujuan, link adalah sebuah link (text yang bisa diclick), sedangkan target adalah sebuah text. ketika link diklik maka akan menuju ke bagian halaman tertentu dimana text target berada.

Perintah HTML untuk membuat link anda harus sajikan dengan format:
<a href='#label'> text</a>
Sedangkan untuk text target anda harus buat dengan format:
<span id='lebel'>text </span>
 Misal saya ingin membuat sebuah link dengan tulisan Smartphone terbaik, dan ketika link tersebut diklik maka halaman akan melakukan scroll untuk menuju bagian lain halaman yang sama yang terdapat tulisan yang mengandung kata "Asus adalah smartphone terbaik abad ini".

Untuk membuat link seperti kasus di atas maka perintahnya adalah:

Link yang harus anda buat:
<a href='#smartphone-terbaik'> Pengenalan SEO</a>

Text target yang harus dibuat adalah:
<span id='smartphone-terbaik'>Asus adalah smartphone terbaik abad ini.</span>

Perintah kode html di atas harus anda buat secara manual menggunakan mode HTML editor artikel blogspot anda.

Langkah-langkah Membuat Link (daftar isi) dalam satu halaman yang sama di artikel blogspot

Langkah-langkah untuk membuat link daftar isi dalam artikel blogspot agar ketika link tersebut diklik akan menuju bagian lain dalam halaman yang sama, adalah sebagai berikut:

1., Silahkan anda tulis artikel panjang anda.

Gunakan mode compose di editor artikel blog anda

mode compose pada editor blog
2. Tulis artikel anda sampai selesai
Masih di halaman yang sama, silahkan anda buat artikel anda sampai selesai dan jangan lupa masih di artikel yang sama,  buat juga  daftar text  untuk link daftar isi, misal seperti ilustrasi gambar di bawah ini:

contoh daftar link daftar isi
Pastikan artikel sudah ditulis seluruhnya dan daftar text untuk link daftar isi sudah anda sesuai kebutuhan.

3. Pilih Mode HTML untuk editor artikel blog anda
Pilih saja tombol HTML yang letaknya di pojok kiri atas di samping tombol Compose.

Model html editor artikel blog
Kemudian pada mode HTML buat target text dan link.

Cara membuat target Text:
 
Di mode html silahkan anda cari dan ubah kalimat yang akan dijadikan target text, dengan format:
<span id='label'> target text </span>
Nama label bisa anda sesuaikan, apapun, pisahkan spasi dengan - atau  _.

Misal, di artikel anda ada tulisan, "smartphone asus adalah smartphone terbaik abad ini yang harus anda miliki" dari kalimat tersebut anda ingin menjadikan tulisan "asus adalah smartphone terbaik" sebagai target text, maka silahkan ubah menjadi:

smartphone <span id='smartphone-asus'>asus adalah smartphone terbaik</span> abad ini yang harus anda miliki


Cara Membuat Link:
Untuk membuat link yang ketika diklik akan menuju target text di atas buat format sebagai berikut:
<a href='#label'>text link</a>
Misalkan kita akan coba membuat tulisan "smartphone terbaik" yang terdapat di dalam artikel anda menjadi sebuah link,  jika  link tersebut diklik maka halaman akan melakukan scroll ke bagian tertentu masih di halaman yang sama untuk target text di atas.

Maka text di atas harus di ubah menjadi:
<a href='#smartphone-asus'>smartphone terbaik</a>

4. Publikasikan artikel anda.
Inagar Anda harus tetap di mode HTML dan jangan kembali ke mode compose, jika menekan mode compose, maka format link yang sudah anda buat akan berubah kembali.

Silahkan langsung saja publish jika artikel sudah anda anggap sesuai. atau lakukan pratinjau (review) untuk melihat hasilnya.


Cara diatas akan membuat artikel anda memiliki daftar isi berupa sebuah link dan ketika link tersebut diclick maka akan menuju bagian lain tapi masih di halaman yang sama.

DEMO:

Untuk demo silahkan anda coba klik link-link di bawah ini:

Cara Membuat Link (daftar isi)
(jika diklik akan menuju ke sub judul "cara membuat link daftar isi dalam satu halaman yang sama di artikel blogspot")

Langkah-langkah-membuat link daftar isi
(jika diklik maka akan menuju sub judul "Langkah-langkah Membuat Link (daftar isi) dalam satu halaman yang sama di artikel blogspot")

Untuk Contoh lengkap klik disini


Semoga artikel tentang Cara Membuat Link (daftar isi) dalam satu halaman yang sama bisa anda pahami dan semoga bermanfaat.

4 komentar:

  1. untuk sekarang perlukah memasang sitemap di blog mas..atau tidak

    ReplyDelete
    Replies
    1. Tidak masalah mas, jika memang ada manfaatnya, akan lebih baik jika artikel sudah banyak

      Delete
  2. maaf om, saya belum terlalu paham dengan yang sampean tulis, bisa di kasih contoh yang lebih gampang dan simple tak?

    ReplyDelete
    Replies
    1. :D... sama seperti saya dulu ketika ingin membuat judul artikel ini yang cocok judulnya apa.

      Yang jelas begini gan ini tutorial untuk membuat link ketika diklik dia scroll di halaman yang sama menuju bagian lain.

      Link seperti ini kadang diperlukan untuk artikel tutorial sangat panjang, dengan cara menyajikan link seperti daftar isi, namun link tersebut masih menuju bagian lain di artikel yang sama dimana link daftar isi tersebut dibuat.

      Nah untuk contoh bisa lihat di artikel ini:
      http://strukturkode.blogspot.co.id/2016/07/link-dalam-satu-halaman.html?showComment=1502831520888#c2223223774646870360

      artikel di atas menggunakan link daftar isi, kalo ingin membuat seperti artikel itu tutor ini bisa digunakan.

      Delete

Silahkan berkomentar yang sesuai dengan topik, Mohon Maaf komentar dengan nama komentator dan isi komentar yang berbau P*RN*GRAFI, OB*T, H*CK, J*DI dan komentar yang mengandung link aktif, Tidak akan ditampilkan!