Trik Membuat Jump Link dalam Posting
Apa kabar nich Sob? Semoga sobat-sobat blogger dalam keadaan yang baik-baik saja. Sebelumnya saya ucapkan terima kasih banyak sudah berkunjung di posting yang satu ini. Ane lebih berterima kasih lagi bila Sobat mau membaca artikel ini sampai tuntas, hehehe...

Pada kesempatan kali ini, saya ingin berbagi info tentang trik membuat jump link dalam posting di Blogger. Oh ya, artikel yang sedang Sobat baca ini merupakan sekaligus contoh dari penerapan jump link yang dimaksud.

Artikel ini memuat 3 hal tentang trik membuat jump link pada artikel di Blogger, diantaranya adalah sebagai berikut:



Apa Sih Jump Link Itu?

Jump artinya melompat, link adalah tautan. Jadi, jump link adalah tautan yang melompat, hehehe... Jump link ialah link yang melompat ke bagian tertentu atau paragraf dalam sebuah artikel. Berbeda dengan link eksternal atau link internal yang mengarah ke artikel lain yang terkait, jump link ini seperti link back to top, back to bottom yang masih berada dalam satu halaman.

Berbeda dengan link yang biasa, jump link ini tidak memerlukan loading ulang untuk memanggil objek yang telah ditandai sebelumnya. Jadi, link jenis ini tidak memberatkan sehingga tidak diperlukan waktu yang lama untuk menampilkan bagian paragraf yang ingin dilihat.

kembali ke atas


Kegunaan Membuat Jump Link di Artikel

Bagi para Sobat yang gemar menulis posting yang sangat panjang atau merupakan tulisan-tulisan yang berupa karya ilmiah, jump link ini bisa membantu kita untuk membuatkan sebuah navigasi untuk mempermudah pembaca menjelajahi, membaca ulang isi artikel kita. Fungsinya seperti daftar isi, namun khusus di dalam entri.

kembali ke atas


Cara Membuat Jump Link

Prinsip dasar untuk membuat jump link dalam satu halaman adalah kita menandai terlebih dahulu suatu objek, kemudian pada bagian yang lain kita buat link untuk memanggilnya. Kode dasar untuk membuat jump link dalam satu halaman adalah seperti di bawah ini:

<div id="NamaObjek"></div>  --> objek yang ditandai
<a href="#NamaObjek">...</a>  --> link pemanggil objek

Perhatikan kode di atas, untuk nama objek tidak menggunakan tanda pagar (#). Sedangkan untuk link pemanggil objek harus disertai dengan tanda pagar (#) dan tanda titik-titiknya harus diberi tulisan agar pengunjung dapat mengekliknya.

Untuk artikel ini, saya telah menyisipkan kode objek yang ditandai dan kode link pemanggil objek seperti ini:

<div id="atas"></div>Apa kabar nich Sob? Semoga ... dan seterusnya.

<a href="#atas">kembali ke atas</a>


1. <a href="#satu">Apa Sih Jump Link Itu?</a>
2. <a href="#dua">Kegunaan Membuat Jump Link di Artikel</a>
3. <a href="#tiga">Cara Membuat Jump Link</a>

<div id="satu"></div>Apa Sih Jump Link Itu?

Jump artinya melompat, link ... dan seterusnya.

<div id="dua"></div>Kegunaan Membuat Jump Link di Artikel

Bagi para Sobat yang ... dan seterusnya.

<div id="tiga"></div>Cara Membuat Jump Link

Prinsip dasar untuk ... dan seterusnya.

Yang harus diingat dalam membuat jump link yaitu saat menyisipkan kode untuk objek yang ditandai dan kode untuk pemanggil objek adalah pada posisi "HTML" dan jangan kembali ke posisi "Compose" karena bentuk kodenya akan berubah. Jadi, jika sudah selesai, langsung saja klik tombol "Publikasikan".

Semoga dapat dimengerti dan bermanfaat...

kembali ke atas

7 Comments

  1. Hadir gan.. ane udah nyimak ampek tuntas.. :D. kapan2 ane pake kode diatas. salkomsel gan :D..

    ReplyDelete
  2. @Putupunyablog Terima kasih banyak Gan udah sering hadir nih di sini..

    ReplyDelete
  3. ini dia yg saya cari2
    terimakasih banyak artikelnya..

    ReplyDelete
  4. Akhirnya dapat juga nih tutorial. Makasih gan informasinya......

    ReplyDelete
  5. Maksih gan,,di coba dulu ya

    ReplyDelete
  6. Makasih banyak gan..Tutornya jelas sekali...salam knal ya
    oh ya, bg yang mau buat jumplink dg mudah jg bisa liat di tutorialkomplit.blogspot.com
    Tq

    ReplyDelete
  7. Terima kasih gan tutorialnya. Jadi bisa deh buat hal seperti itu di blogspot. Emang kalo di blogspot kita harus sendiri yang buat2 kodenya. :)

    ReplyDelete

Post a Comment

Previous Post Next Post