Cara Menciptakan Link (Daftar Isi) Menuju Ke Halaman Yang Sama

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

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

Pernahkah anda melihat di dalam sebuah halaman artikel blog disajikan daftar link menyerupai  Cara Membuat Link (daftar isi) menuju ke halaman yang sama


Tujuan dibuatnya daftar link menyerupai ini ialah untuk  memudahkan pengunjung semoga sanggup menentukan point-point penting yang terdapat pada artikel tersebut, pengunjung tinggal meng-click link salah satu dari daftar link yang disediakan maka beliau akan di bawa ke bab lain dari halaman dokumen yang sama.


Istilah link menyerupai ini apa?


Saya Sebenarnya kesulitan mendefinisikan istilah untuk link menyerupai ini, saya menyebutnya sebagai internal link dalam satu halaman atau internal link ke bab lain dokumen, pada dasarnya dikala link tersebut diklik maka anda akan di arahkan ke bab tertentu di halaman artikel tersebut tetapi masih di halaman yang sama.

Untuk menciptakan link menyerupai ini bersama-sama sangat mudah, yang terang yang harus anda kuasai adalah, anda harus memahami perintah html dasar untuk menciptakan link.

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

Dengan membaca artikel di atas setidakny anda paham, apa itu hyperlink dan bagaimana cara menciptakan hyperlink dengan santunan tool maupun dengan cara manual melalui penulisan arahan HTML.

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

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

Untuk menciptakan link menyerupai ini ada 2 bab yang harus anda buat, yaitu  link dan text target atau text tujuan, link ialah sebuah link (text yang sanggup diclick), sedangkan sasaran ialah sebuah text. dikala link diklik maka akan menuju ke bab halaman tertentu dimana text sasaran berada.

Perintah HTML untuk menciptakan link anda harus sajikan dengan format:
<a href='#label'> text</a>
Sedangkan untuk text sasaran anda harus buat dengan format:
<span id='lebel'>text </span>
 Misal saya ingin menciptakan sebuah link dengan goresan pena Smartphone terbaik, dan dikala link tersebut diklik maka halaman akan melaksanakan scroll untuk menuju bab lain halaman yang sama yang terdapat goresan pena yang mengandung kata "Asus ialah smartphone terbaik masa ini".

Untuk menciptakan link menyerupai kasus di atas maka perintahnya adalah:

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

Text sasaran yang harus dibentuk adalah:
<span id='smartphone-terbaik'>Asus ialah smartphone terbaik masa ini.</span>

Perintah arahan html di atas harus anda buat secara manual memakai mode HTML editor artikel blogspot anda.

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

Langkah-langkah untuk menciptakan link daftar isi dalam artikel blogspot semoga dikala link tersebut diklik akan menuju bab lain dalam halaman yang sama, ialah sebagai berikut:

1., Silahkan anda tulis artikel panjang anda.

Gunakan mode compose di editor artikel blog anda

Pernahkah anda melihat di dalam sebuah halaman artikel blog disajikan daftar link menyerupai  Cara Membuat Link (daftar isi) menuju ke halaman yang sama
2. Tulis artikel anda hingga selesai
Masih di halaman yang sama, silahkan anda buat artikel anda hingga akhir dan jangan lupa masih di artikel yang sama,  buat juga  daftar text  untuk link daftar isi, misal menyerupai ilustrasi gambar di bawah ini:

Pernahkah anda melihat di dalam sebuah halaman artikel blog disajikan daftar link menyerupai  Cara Membuat Link (daftar isi) menuju ke halaman yang sama
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.

Pernahkah anda melihat di dalam sebuah halaman artikel blog disajikan daftar link menyerupai  Cara Membuat Link (daftar isi) menuju ke halaman yang sama
Kemudian pada mode HTML buat sasaran text dan link.

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

Misal, di artikel anda ada tulisan, "smartphone asus ialah smartphone terbaik masa ini yang harus anda miliki" dari kalimat tersebut anda ingin menimbulkan goresan pena "asus ialah smartphone terbaik" sebagai sasaran text, maka silahkan ubah menjadi:

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


Cara Membuat Link:
Untuk menciptakan link yang dikala diklik akan menuju sasaran text di atas buat format sebagai berikut:
<a href='#label'>text link</a>
Misalkan kita akan coba menciptakan goresan pena "smartphone terbaik" yang terdapat di dalam artikel anda menjadi sebuah link,  jika  link tersebut diklik maka halaman akan melaksanakan scroll ke bab tertentu masih di halaman yang sama untuk sasaran 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, jikalau menekan mode compose, maka format link yang sudah anda buat akan berubah kembali.

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


Cara diatas akan menciptakan artikel anda mempunyai daftar isi berupa sebuah link dan dikala link tersebut diclick maka akan menuju bab 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 menciptakan 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 perihal Cara Membuat Link (daftar isi) dalam satu halaman yang sama sanggup anda pahami dan semoga bermanfaat.


Sumber http://strukturkode.blogspot.com

Artikel Terkait

Next Article
« Prev Post
Previous Article
Next Post »
Penulisan markup di komentar
  • Untuk menulis huruf bold gunakan <strong></strong> atau <b></b>.
  • Untuk menulis huruf italic gunakan <em></em> atau <i></i>.
  • Untuk menulis huruf underline gunakan <u></u>.
  • Untuk menulis huruf strikethrought gunakan <strike></strike>.
  • Untuk menulis kode HTML gunakan <code></code> atau <pre></pre> atau <pre><code></code></pre>, dan silakan parse kode pada kotak parser di bawah ini.

Disqus
Tambahkan komentar Anda

No comments