Gini Loh Cara Membuat Link Dalam Satu Halaman Blogger | Good Ideas. Great Stories. -->
membuat jump link dalam satu halaman


Ngeblog memang gampang tapi kadang bisa jadi susah. Lha pie to? Gini, ngeblog memang gampang. Tapi kalau dibarengi dengan keinginan belajar lebih lagi, bisa makin susah. Ya, memang resiko. Tapi ini yahud banget kok untuk dipelajari. Yakin lah, ora marai mumet. Gampang!

Jadi beberapa waktu yang lalu ada yang curhat ke dapur jungjawa.com, terkait masalah blog. Weleh, pie ki? Jadi gini, Mas Abdus Salam menanyakan tentang membuat daftar isi di sebuah post. Terutama menggunakan platform Blogger.

Mungkin, agak mirip-mirip Wikipedia gitu lah ya. Pembaca bisa melihat daftar isi dan tidak perlu repot-repot scrolling untuk melihat konten yang diinginkan. Cukup klik dan makjegagik, layar sudah berpindah otomatis dan menampilkan konten yang dimaksud. Penak po ra? Pancen penak zamanku kok.

Pertanyaannya, mungkinkah ini bisa dilakukan di platform Blogger atau blogspot?

Woh, ya bisa dong. Kalau kalian ndak pengin membaca tutorial step by stepnya, bisa lanjut ke bawah dengan cara klik link ini saja. Wes, dicoba dulu. Enggak perlu banyak protes.

Ambil ancang-ancang bikin jump link dulu

Sebelumnya, ada beberapa poin penting yang perlu diperhatikan untuk membuat link (jump link) atau daftar link pada sebuah blog post. Sebuah link memerlukan target dan clickable link yang bisa kita gunakan menuju target link tersebut.

Secara teori, membuat link di dalam sebuah halaman hanyalah menghubungkan tag <a href> dengan kondisi tag yang ada. Ya, inilah yang dinamakan jump link. Apakah hanya terbatas digunakan dalam satu halaman? Tidak. Kita bisa langsung lompat ke halaman lain (dalam hal ini alamat url yang berbeda) dan langsung menuju section yang diinginkan. Woaah.. ngganteng ki!

Target link pada blog post

Mudah saja, pilih bagian pada artikel ingin dijadikan sebagai target link, bisa berupa sebuah paragraf, sub judul atau apapun yang kita inginkan. Supaya tidak jenuh, jangan lupa bahagia karena hidup tanpa bahagia akan terasa hambar.

Saran saya, ada baiknya target kita masukkan dalam section sub judul. Bisa tag H2, H3 maupun H4. Terserah. Tergantung struktur situs atau blog sampeyan. Jangan ke tag paragraf (p). Karena pembaca nanti akan puyeng, terjatuh dan tak bisa bangkit lagi tenggelam dalam lautan luka yang dalam.

Ketika sudah menentukan target, kita berikan identitas dalam bentuk id="nama-link". Nah, properti "nama-link" inilah yang akan menjadi penghubung antara link dan target. Usahakan bikin yang pendek-pendek saja. Kalau bisa, tanpa spasi lebih enak karena biar ndak error.

Fyi aja sih ya, karakter space atau spasi akan berubah menjadi "%20" ketika masuk ke dalam alamat pada addres bar peramban kamu. Jadi, ya nanti bisa kisruh alias ruwet bin mumet.

Contoh Jump Link yang dibuat

Nah, membuat jump link sendiri gampang sekali. Kalau kamu menggunakan platform Blogger atau blogspot, masuk ke bagian HTML editor, bukan compose loh ya.

Membuat Jump Link Blogspot
Klik yang HTML ya gaes

Supaya ndak bingung, saya menyiapkan langkah-langkah membuat jump link dengan gambar sebagai berikut:

membuat tag link tautan
Masukkan #nama-link yang diinginkan dalam tag <a href>



tag index jumplink menggunakan id
Buatlah target dengan menyisipkan id="nama-link"

Penerapan kodenya seperti ini:
<a href=”#nama-link”>link yang bisa di klik</a>


<div id=”nama-link”>

//nama-link digunakan sebagai target

//konten apa aja yang kamu suka. bisa blog post atau yang lainnya

</div>

Kalau sudah jadi, hasilnya bisa seperti ini:
Klik di sini biar bisa ambil ancang-ancang.

Lha kalo mau langsung ke bagian lain di halaman yang berbeda, ya sama aja. Gampang, tinggal tambahkan id dari properti yang akan kita tuju. Contohnya seperti di bawah ini.

<a href=”alamat_halaman.html#nama-link”>link teks</a>

Wes, gampang tho? Jump link ini berguna sekali ketika kita membuat artikel panjang yang memiliki rincian penjelasan yang berbeda. Biar pembaca bisa dengan mudah mencari apa yang diinginkan, kita berikan saja jump link untuk mempercepat pencarian informasinya.

Masih enggak paham?


P.S. Jangan lupa menambahkan tanda pagar (#) dalam tag a href hal ini berpasangan dengan tag id yang digunakan. Selamat mencoba!

Komentar 13

Sampaikan pendapatmu di sini:

  1. Kayaknya aku kudu ngirim url ini ke adekku. Dia yang paham beginian ahahahhaha

    BalasHapus
  2. Wah mantra-mantrane ditokke kabyeh

    BalasHapus
  3. Wah iki, bisa dicoba dan praktek. Sepertinya kalau gak praktek gak akan tahu bisa atau tempe. Ehh, tidak :)

    BalasHapus
    Balasan
    1. Wah, bakwan juga. Maksudnya, benar juga... Hahaha

      Hapus
  4. Kalau buat sitemap di blogger, kalau nggak salah ada script otomatisnya, pake java scripd deh :D pernah bikin, cuma lupa darimana sumbernya~

    BalasHapus
  5. Hmmmm.... ini bermanfaat. Tapi kan tinggal diblok katanya trus pencet tomobol link yak yang praktisnya... :D

    BalasHapus
  6. Blogspot sih ya... Kalau markdown, otomatis dia ngebuat setiap heading jadi punya tag id

    BalasHapus
  7. ......sirahku langsung ngelu mas, moco koyo ngene. Wis ben pengunjung blog-ku rekoso moco postingan seko awal tekan akhir... :))))))

    BalasHapus

Good Ideas. Great Stories.

Feel free if you want to send an email to me and ask anything, or just to say hello!

hello@jungjawa.com

Copyright © jungjawa 2018