Inilah yang biasa di sebut Jump Link. Sebuah tautan yang apa bila di-klik, akan mengarahkan kita ke posisi atau kawasan tertentu. Jump Link sendiri sanggup dipakai untuk 2 hal. Pertama, membuka website atau link tertentu yang kita masukan ke dalamnya. Kedua, mengarahkan pembaca ke sebuah paragraf tertentu di halaman yang sama tanpa memakai scroll.
- - - - - - - - - - - - - - - - - - - - - - - - - -
Di sini Akira akan menjelaskan fungsi kedua dari Jump Link, yaitu mengarahkan pembaca ke sebuah paragraf tertentu di halaman yang sama tanpa memakai scroll. Ada 2 element yang akan kita gunakan:
1. Target (posisi yang dituju)
Kita harus menandai dibagian mana pembaca akan diarahkan ketika sebuah tautan di-klik. Caranya yaitu dengan memasukan script di bawah ini ke posisi tertentu di sebuah postingan.
<div id="target1"> Bagian Atas </div>
target1 di atas yaitu sebuah nama atau id yang kita buat. Kamu sanggup merubahnya ataupun menciptakan banyak nama-nama lain sebagai sasaran di dalam sebuah postingan. Contoh: target1, target2, atau contact, Bab 2, dan lain sebagainya.
2. Link pemanggil
Adalah sebuah kata atau kalimat yang kita ubah menjadi sebuah link, yang nantinya akan mengarahkan pembaca ke posisi atau paragraf tertentu pada sebuah postingan yang sama. Cara menciptakan yaitu dengan menambahkan script berikut pada sebuah kata atau kalimat. Kamu harus di dalam mode HTML untuk menambah atau merubah Script. Script-nya yaitu sebagai berikut.
<a href="#target1"> Kembali ke atas</a>
target1 adalah nama atau id yang akan kita panggil kalau kita mengklik kalimat "Kembali ke atas". Jangan lupa, pada bab ini kau harus menambahkan # seperti di atas. Jika kau mau memasukan id target1, maka kau harus menambahkan # dibagian depannya. Menjadi #target1.
DEMO
Jika kau masih bingung, Akira akan menawarkan contoh. Di bawah ini yaitu pola sebuah isi postingan di dalam mode HTML:
<div id="target1">Bagian Atas</div><br />
<br />
Bagian Atas, Bagian Atas, Bagian Atas, Bagian Atas, Bagian Atas, Bagian Atas, Bagian Atas, Bagian Atas, Bagian Atas, Bagian Atas, Bagian Atas, Bagian Atas, Bagian Atas, Bagian Atas, Bagian Atas, Bagian Atas, Bagian Atas, Bagian Atas.<br />
<br />
<br />
Bagian Tengah <br />
<br />
Bagian Tengah, Bagian Tengah, Bagian Tengah, Bagian Tengah, Bagian Tengah, Bagian Tengah, Bagian Tengah, Bagian Tengah, Bagian Tengah, Bagian Tengah, Bagian Tengah, Bagian Tengah, Bagian Tengah, Bagian Tengah, Bagian Tengah.<br />
<br />
<br />
Bagian Bawah<br />
<br />
Bagian Bawah, Bagian Bawah, Bagian Bawah, Bagian Bawah, Bagian Bawah, Bagian Bawah, Bagian Bawah, Bagian Bawah, Bagian Bawah, Bagian Bawah, Bagian Bawah, Bagian Bawah, Bagian Bawah, Bagian Bawah, Bagian Bawa.<br />
<br />
<br />
<a href="#target1">Kembali ke Bagian Atas</a>
Mode Compose dari content di atas akan ibarat ini:
Bagian Atas
Bagian Atas, Bagian Atas, Bagian Atas, Bagian Atas, Bagian Atas, Bagian Atas, Bagian Atas, Bagian Atas, Bagian Atas, Bagian Atas, Bagian Atas, Bagian Atas, Bagian Atas, Bagian Atas, Bagian Atas, Bagian Atas, Bagian Atas, Bagian Atas.
Bagian Tengah
Bagian Tengah, Bagian Tengah, Bagian Tengah, Bagian Tengah, Bagian Tengah, Bagian Tengah, Bagian Tengah, Bagian Tengah, Bagian Tengah, Bagian Tengah, Bagian Tengah, Bagian Tengah, Bagian Tengah, Bagian Tengah, Bagian Tengah.
Bagian Bawah
Bagian Bawah, Bagian Bawah, Bagian Bawah, Bagian Bawah, Bagian Bawah, Bagian Bawah, Bagian Bawah, Bagian Bawah, Bagian Bawah, Bagian Bawah, Bagian Bawah, Bagian Bawah, Bagian Bawah, Bagian Bawah, Bagian Bawa.
Kembali ke Bagian Atas
Akan lebih gampang kalau kau eksklusif mempraktekannya, dari pada hanya membaca. Selamat mencoba! ;D
Perhatian! Template ini sudah memakai script yang berfungsi untuk menawarkan imbas scroll pada dikala jump link aktif. Untuk menawarkan imbas scroll kau sanggup melihat tutorialnya di sini:
Cara Membuat Efek Smooth Scroll Untuk Jump Link Di Blog
author: Akira Asayami