Cara Membuat Jump Link di Postingan Blog
Internal dan eksternal link menuju ke halaman yang berbeda, sedangkan jump link mengarah ke halaman yang sama namun ke bagian tertentu. Misalnya dari atas ke bawah atau dari bawah ke atas. Sebagai contoh ketika kamu berselancar di Wikipedia, kamu akan menemukan jumplink dalam berupa daftar isi di dalam postingannya.
Agar lebih memudahkan pemahamanmu, saya beri contoh jump link di bawah ini :
Nah, dengan contoh di atas, saya yakin kamu sudah mengerti definisi serta fungsi dari sebuah jump link.
Perlu kamu ketahui, bahwasannya jump link memiliki banyak sekali manfaat untuk halaman websitemu. Banyak sekali pemilik web yang menggunakan fitur dari HTML ini. Biasanya mereka menggunakan jump link pada daftar isi artikel atau kalimat tertentu di dalam artikel untuk memudahkan navigasi bagi para pengunjung.
Selain Wikipedia, banyak juga situs-situs yang menggunakan jump link. Yang paling umum adalah situs yang hanya memiliki satu halaman saja atau biasa juga disebut one page.
Salah satu contoh situs one page adalah undangan nikah online. Sekarang adalah zaman serba online, undangan nikah pun juga dibuat secara online, memang sangat cocok digunakan untuk mengundang teman jauh tanpa perlu repot-repot mengirim lembaran undangan, hanya dengan mengirim link undangan online pun sudah selesai.
Di dalam situs undangan online, biasanya di bagian atas terdapat menu seperti Waktu, Tempat Resepsi, serta Bio Data Pengantin.
Nah, saat kamu klik Tempat Resepsi misalnya, maka web akan secara otomatis menscroll ke bawah menuju informasi Tempat Resepsi. Dengan demikian, jump link sangat berfungsi untuk memberikan kemudahan navigasi pada sebuah web statis dengan satu halaman atau one page.
Lalu bagaimana cara membuat jump link di blog? Cukup mudah sebenarnya, hanya dengan memainkan kode HTML, kita bisa membuat lebih dari satu jump link di dalam blog kita. Yuk ikuti langkah-langkahnya :
Cara Membuat Jump Link di Blog 100% Berhasil
Info :
Yang perlu kamu siapkan adalah sebuah "id" untuk dipanggil melalui tag anchor atau <a>
Yang perlu kamu siapkan adalah sebuah "id" untuk dipanggil melalui tag anchor atau <a>
Susunan yang bisa kamu buat adalah sebagai berikut :
Untuk dipasang di menu blog :
<a href="#iniadalahIDbawah">Klik Ini, Maka akan Ke BAWAH</a>
<div id="iniadalahIDbawah">BAWAH</div>
Untuk dipasang di dalam artikel blog :
<a href="https://urlblog.blogspot.com/link-artikel-mu#iniadalahIDbawah">Klik Ini, Maka akan Ke BAWAH</a>
<div id="iniadalahIDbawah">BAWAH</div>
Catatan :
-Warna merah adalah Link yang akan diklik
-Warna ungu adalah Tujuan dari jumplink yang diklik
-Value dari atribut 'id' bisa diubah sesuai keinginan
Kode di atas, bisa kamu terapkan pada saat mengedit menu blog ataupun membuat jumplink di dalam sebuah artikel atau postingan.-Warna merah adalah Link yang akan diklik
-Warna ungu adalah Tujuan dari jumplink yang diklik
-Value dari atribut 'id' bisa diubah sesuai keinginan
Secara default, jump link yang kita buat menggunakan HTML seperti kode di atas, tidak memberikan efek smooth scroll saat tautan diklik. Oleh karena itu, ada sedikit tambahan kode agar jump link yang kamu buat bisa memiliki efek smooth scroll yang cocok untuk meningkatkan kemudahan user untuk memahami navigasi blog.
Silahkan baca artikel berikut untuk membuat efek smooth scroll pada jump link yang telah kamu buat..
Semoga berhasil dan jangan lupa tinggalkan komentar serta bagikan artikel ini ke media sosialmu agar semua orang tau mengenai Cara Membuat Jump Link di Blog
