Cara Membuat Jump Link di Blog, WordPress atau di Html

Maaf sebelumnya gan, dah lama ga update. Oh iya kali ini exppon.com akan membagikan cara membuat Jump Link di Blogspot ataupun WordPress.

Oh iya, sebelumnya apakah udah tau apa itu Jump Link ? mari saya kasih tau sedikit tentang Jump Link.

Apa itu Jump Link?

Jump Link adalah sebuah Internal Link yang mengarah ke bagian halaman tertentu. Jump Link berguna agar memudahkan seseorang ketika sedang membaca artikel atau informasi pada sebuah situs.

Jadi misalnya ada sebuah artikel yang tulisannya panjang banget. Agar yang membaca dapat menemukan apa yang ia cari, maka diberikanlah Jump Link.

Untuk contoh lainnya anda dapat mengunjungi website wikipedia. Disana anda akan menemukan beberapa Jump Link. Yup kenapa wikipedia menggunakan Jump Link adalah agar mempermudah pembaca mencari informasi.

Cara Membuat Jump Link, Contoh Jump Link, Membuat Link mengarah ke bagian halaman lain
Jump Link

Contoh Jump Link lainnya adalah ketika anda mengunjungi sebuah situs yang menggunakan One Page. Ituloh situs yang yang tampilannya vertikal atau horizontal doang tanpa adanya elemen lain kecuali halaman yang berada di atasnya. Biasanya situs yang tampilannya One Page menggunakan Jump Link untuk memudahkan atau mengarahkan pengunjung ke halaman yang dimaksud.

Setelah mengetahui kegunaan dan contoh situs yang menggunakan Jump Link saatnya saya berikan tutor menggunakan Jump Link di postingan Blog atau WordPress.

Pertama

Anda siapkan postingan, siapkan yang sudah jadi ditulis, pake gambar, label, deskripsi, seo, ahk pokoknya yang sudah sampai tahap akhir

Kedua

masuk ke mode edit html, jangan yang compose.

Ketiga

Letakan sebuah kata atau juga bisa kalimat yang akan digunakan sebagai tempat loncatan. Misalkan:

<a href=“#jump”>Jump Link</a>

Keempat

Cari lokasi definisi atau penjelasan lebih lanjut tentang kata Jump Lnk

<div id=“jump”></div> Apa itu Jump Link

Kode “#jump” adalah tempat locat, dan kode “jump” adalah tempat pendaratan / lokasi Jump Link. Untuk peletakan Jump Link biasanya digunakan dari atas turun ke bawah halaman. Misalkan anda membuat daftar situs belajar html, nah anda buat terlebih dahulu sebuah daftar dengan bullet list atau numbered list. Nanti tiap daftar digunakan Jump Link agar menuju ke definisinya lebih lanjut ke bawah. Tapi bisa juga kok anda membuat link loncatannya di bawah.

Perlu diingat, jangan kembali ke mode compose. Jika anda kembali ke mode Compose, kode Jump Link akan berubah.

Atau anda dapat juga menggunakan contoh Jump Link berupa kode html yang dapat anda gunakan pada halaman html anda sebagai bahan pelajaran. Berikut kode Jump Link untuk html.

<!DOCTYPE html>
<html>
<head>
<title>Belajar HTML di Duniailkom</title>
</head>
<body>
<h3 id=”judul1″>Belajar Jump Link</h3>
<p id=”paragraf1″>HTML adalah singkatan dari Hypertext Markup Language.
Disebut hypertext karena di dalam HTML sebuah text biasa dapat
berfungsi lain, kita dapat membuatnya menjadi link yang dapat
berpindah dari satu halaman ke halaman lainnya dengan
hanya meng-klik text tersebut.</p>
<p id=”paragraf2″>HTML adalah singkatan dari Hypertext Markup Language.
Disebut hypertext karena di dalam HTML sebuah text biasa dapat
berfungsi lain, kita dapat membuatnya menjadi link yang dapat
berpindah dari satu halaman ke halaman lainnya dengan
hanya meng-klik text tersebut.</p>
<p id=”paragraf3″>HTML adalah singkatan dari Hypertext Markup Language.
Disebut hypertext karena di dalam HTML sebuah text biasa dapat
berfungsi lain, kita dapat membuatnya menjadi link yang dapat
berpindah dari satu halaman ke halaman lainnya dengan
hanya meng-klik text tersebut.</p>
<p id=”paragraf4″>HTML adalah singkatan dari Hypertext Markup Language.
Disebut hypertext karena di dalam HTML sebuah text biasa dapat
berfungsi lain, kita dapat membuatnya menjadi link yang dapat
berpindah dari satu halaman ke halaman lainnya dengan
hanya meng-klik text tersebut.</p>
<p id=”paragraf5″>HTML adalah singkatan dari Hypertext Markup Language.
Disebut hypertext karena di dalam HTML sebuah text biasa dapat
berfungsi lain, kita dapat membuatnya menjadi link yang dapat
berpindah dari satu halaman ke halaman lainnya dengan
hanya meng-klik text tersebut.</p>
<p id=”paragraf6″>HTML adalah singkatan dari Hypertext Markup Language.
Disebut hypertext karena di dalam HTML sebuah text biasa dapat
berfungsi lain, kita dapat membuatnya menjadi link yang dapat
berpindah dari satu halaman ke halaman lainnya dengan
hanya meng-klik text tersebut.</p>
<p id=”paragraf7″>HTML adalah singkatan dari Hypertext Markup Language.
Disebut hypertext karena di dalam HTML sebuah text biasa dapat
berfungsi lain, kita dapat membuatnya menjadi link yang dapat
berpindah dari satu halaman ke halaman lainnya dengan
hanya meng-klik text tersebut.</p>
<p id=”paragraf8″>HTML adalah singkatan dari Hypertext Markup Language.
Disebut hypertext karena di dalam HTML sebuah text biasa dapat
berfungsi lain, kita dapat membuatnya menjadi link yang dapat
berpindah dari satu halaman ke halaman lainnya dengan
hanya meng-klik text tersebut.</p>
<p id=”paragraf9″>HTML adalah singkatan dari Hypertext Markup Language.
Disebut hypertext karena di dalam HTML sebuah text biasa dapat
berfungsi lain, kita dapat membuatnya menjadi link yang dapat
berpindah dari satu halaman ke halaman lainnya dengan
hanya meng-klik text tersebut.</p>
<p id=”paragraf10″>HTML adalah singkatan dari Hypertext Markup Language.
Disebut hypertext karena di dalam HTML sebuah text biasa dapat
berfungsi lain, kita dapat membuatnya menjadi link yang dapat
berpindah dari satu halaman ke halaman lainnya dengan
hanya meng-klik text tersebut.</p>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<a href=”#judul1″>Kembali ke judul pertama</a>
<br />
<a href=”#paragraf1″>Kembali ke paragraf pertama</a>
</body>

</html>

Silahkan copy kode dan teks di atas. Untuk lebih lanjut silahkan tengok demo berikut ini.

Live Demo

Bagikan Guys

Add a Comment

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *