Apa itu tautan melompat.?
tautan melompat atau dalam bahasa inggrisnya adalah Jump Link adalah sebuah tautan yang melompat ke teks/daerah tertentu di sebuah halaman yang sama.
Tengok saja situs-situs besar seperti facebook dan twitter yang tampaknya juga menggunakan tautan melompat.
Di Facebook seluler, anda mungkin tidak asing lagi dengan [ ↑ ] paling atas (bagian footer ke header) atau cari (bagian header ke footer)
Jika di twitter seluler, Anda dapat menemukan tautan melompat pada gambar pencarian di bagian header yang akan mengarahkan anda ke kolom pencarian.
Jika di blog, tautan melompat lebih akrab digunakan sebagai Go to top – Go to Down – Go to Comments dan lain-lain.
Sehingga dengan adanya tautan melompat ini orang-orang menjadi lebih mudah untuk menjelajahi artikel yang anda buat jika artikel yang anda tulis itu cukup panjang.
Membuat tautan melompat cara pertama
Pada cara ini kita menggunakan atribut name pada link tujuan.
Untuk <a href=”#namatujuan”>teks anda</a> adalah tautan yang akan di klik, sedangkan <a name=”namatujuan”>teks anda</a> adalah tujuan kemana link tersebut diarahkan.
Untuk namatujuan dapat anda ganti semau Anda, yang penting sama untuk a href dan a name nya.
Tanda pagar hanya perlu diletakkan di a href
Pada artikel ini saya menggunakan cara pertama contohnya :
1. <a href=”#apa”>Apa itu tautan melompat.?</a>
di paragraf pertama saya sisipkan kode ini <a name=”apa”>Apa itu tautan melompat.?</a>
Tautan melompat adalah bla..bla…bla… dan seterusnya.
Membuat tautan melompat cara kedua
Pada cara kedua ini kita memanfaatkan Selector ID yang ada pada CSS.
Sebenarnya Selector ID untuk Tautan Melompat ini tidak harus kita buat di dalam CSS kita, kita bisa langsung menulis jika memerlukannya.
Saya menggunakan selector id ini untuk Go to Top atau Atas (bisa Anda lihat pada bagian footer tampilan mobile) dengan memanfaatkan selector id dengan nama #sidebar dan berhubung id tersebut juga saya gunakan untuk mempercantik tampilan blog maka selector id tersebut saya tambahkan di CSS saya. Jadi walaupun satu tetapi dapat berfungsi untuk dua tujuan yang berbeda.
Ingat.! seperti yang kita ketahui bahwa tidak boleh ada ID yang sama dalam satu halaman.
Cukup demikian yang saya ketahui tentang cara membuat link melompat.
Selamat mencoba.
tautan melompat atau dalam bahasa inggrisnya adalah Jump Link adalah sebuah tautan yang melompat ke teks/daerah tertentu di sebuah halaman yang sama.
Tengok saja situs-situs besar seperti facebook dan twitter yang tampaknya juga menggunakan tautan melompat.
Di Facebook seluler, anda mungkin tidak asing lagi dengan [ ↑ ] paling atas (bagian footer ke header) atau cari (bagian header ke footer)
Jika di twitter seluler, Anda dapat menemukan tautan melompat pada gambar pencarian di bagian header yang akan mengarahkan anda ke kolom pencarian.
Jika di blog, tautan melompat lebih akrab digunakan sebagai Go to top – Go to Down – Go to Comments dan lain-lain.
Sehingga dengan adanya tautan melompat ini orang-orang menjadi lebih mudah untuk menjelajahi artikel yang anda buat jika artikel yang anda tulis itu cukup panjang.
Membuat tautan melompat cara pertama
Pada cara ini kita menggunakan atribut name pada link tujuan.
<a href="#namatujuan">teks anda</a> <a name="namatujuan">teks anda</a>
Untuk <a href=”#namatujuan”>teks anda</a> adalah tautan yang akan di klik, sedangkan <a name=”namatujuan”>teks anda</a> adalah tujuan kemana link tersebut diarahkan.
Untuk namatujuan dapat anda ganti semau Anda, yang penting sama untuk a href dan a name nya.
Tanda pagar hanya perlu diletakkan di a href
Pada artikel ini saya menggunakan cara pertama contohnya :
1. <a href=”#apa”>Apa itu tautan melompat.?</a>
di paragraf pertama saya sisipkan kode ini <a name=”apa”>Apa itu tautan melompat.?</a>
Tautan melompat adalah bla..bla…bla… dan seterusnya.
Membuat tautan melompat cara kedua
Pada cara kedua ini kita memanfaatkan Selector ID yang ada pada CSS.
Sebenarnya Selector ID untuk Tautan Melompat ini tidak harus kita buat di dalam CSS kita, kita bisa langsung menulis jika memerlukannya.
<a href="#namatujuan">teks anda</a> <div id="namatujuan">teks anda</div>
Saya menggunakan selector id ini untuk Go to Top atau Atas (bisa Anda lihat pada bagian footer tampilan mobile) dengan memanfaatkan selector id dengan nama #sidebar dan berhubung id tersebut juga saya gunakan untuk mempercantik tampilan blog maka selector id tersebut saya tambahkan di CSS saya. Jadi walaupun satu tetapi dapat berfungsi untuk dua tujuan yang berbeda.
Ingat.! seperti yang kita ketahui bahwa tidak boleh ada ID yang sama dalam satu halaman.
Cukup demikian yang saya ketahui tentang cara membuat link melompat.
Selamat mencoba.
No comments:
Post a Comment