Gini Loh Cara Membuat Link Dalam Satu Halaman Blogger
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.![]() |
Klik yang HTML ya gaes |
Supaya ndak bingung, saya menyiapkan langkah-langkah membuat jump link dengan gambar sebagai berikut:
![]() |
Masukkan #nama-link yang diinginkan dalam tag <a href> |
![]() |
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!
Kayaknya aku kudu ngirim url ini ke adekku. Dia yang paham beginian ahahahhaha
BalasHapusWah, langsung terapin nih mas
HapusWah mantra-mantrane ditokke kabyeh
BalasHapusMantra opo e lek?
HapusWah iki, bisa dicoba dan praktek. Sepertinya kalau gak praktek gak akan tahu bisa atau tempe. Ehh, tidak :)
BalasHapusWah, bakwan juga. Maksudnya, benar juga... Hahaha
HapusKalau buat sitemap di blogger, kalau nggak salah ada script otomatisnya, pake java scripd deh :D pernah bikin, cuma lupa darimana sumbernya~
BalasHapusKalo sitemap beda om. Hehehe...
HapusHmmmm.... ini bermanfaat. Tapi kan tinggal diblok katanya trus pencet tomobol link yak yang praktisnya... :D
BalasHapusYoih
HapusBlogspot sih ya... Kalau markdown, otomatis dia ngebuat setiap heading jadi punya tag id
BalasHapusYa, kan berbeda.
Hapus......sirahku langsung ngelu mas, moco koyo ngene. Wis ben pengunjung blog-ku rekoso moco postingan seko awal tekan akhir... :))))))
BalasHapusMantap gan boleh di coba nih,terima kasih ilmu nya gan sangat bermanfaat sekali
BalasHapusQ gak mudeng pakde
BalasHapus