Cara Menciptakan Jump Link Untuk Lompat Paragraf Pada Postingan Blog

Sabtu, 06 Juni 2015

Apa kau pernah membuka sebuah postingan panjang pada sebuah web ataupun blog? Apa pernah kau menemukan sebuah teks atau kalimat di dalamnya yang bila kau klik maka page yang sedang kau buka secara otomatis mengarah ke paragraf tertentu. Misalnya ketika kau berada di posisi paling bawah sebuah postingan, terdapat disana tautan "Kembali ke atas" yang bila kau klik, maka secara otomatis page akan mengarah ke posisi paling atas tanpa kau perlu melaksanakan scrolling pada mouse. Hal yang sangat membantu dan mempermudah para pembaca bukan?

Inilah yang biasa di sebut Jump Link. Sebuah tautan yang apa bila di-klik, akan mengarahkan kita ke posisi atau daerah 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 bila 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 menunjukkan contoh. Di bawah ini yaitu teladan 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 bila kau pribadi mempraktekannya, dari pada hanya membaca. Selamat mencoba! ;D

Perhatian! Template ini sudah memakai script yang berfungsi untuk menunjukkan imbas scroll pada ketika jump link aktif. Untuk menunjukkan imbas scroll kau sanggup melihat tutorialnya di sini:
Cara Membuat Efek Smooth Scroll Untuk Jump Link Di Blog


author: Akira Asayami

Share This :