Hanya arsip

halaman asli ada di http://kolom-tutorial.blogspot.com

Anchor Link / Link Satu Halaman


Lagi-lagi saya tertarik untuk membahas tentang cara membuat link. Yo’i, karena
tercatat tiga artikel yang sudah di posting tentang bagaimana cara membuat
tautan atau link, dan yang sekarang merupakan artikel yang keempat. Akan tetapi jangan
dulu mengira bahwa posting kali ini akan sama dengan postingan terdahulu, sebab
kali ini yang akan di bahas adalah cara untuk membuat link dalam bentuk Anchor.


Apa itu Anchor Link ?

Anchor link biasa di sebut juga dengan link dalam satu halaman, berbeda dengan hyperlink
pada umumnya yang biasa di gunakan untuk menghubungkan suatu tulisan dengan tulisan lain yang berada
pada halaman yang berbeda atau blog yang berbeda, anchor link ini lebih banyak di gunakan untuk
halaman yang sama. Masih bingung? memang saya juga sama bingungnya kalau membaca sekilas tentang pengertian tadi,
agar tidak sama-sama bingung akan saya beri contoh yang nyata. Pada bagian paling bawah blog ini, ada
tulisan berupa link yang tertera :

->> Kembali lagi ke atas <<-

Nah apabila sobat meng klik link tulisan tersebut maka secara otomatis yang akan tampil pada layar monitor sobat adalah halaman yang paling
atas dari blog ini, tidak percaya? silahkan buktikan ! Kelebihan anchor link dengan link biasa adalah link ini tidak memerlukan loading
ulang untuk memanggil obyek yang telah di tandai sebagai anchor.Contohnya seperti link yang berada paling bawah blog
ini, jika sobat mengkliknya maka tidak memerlukan waktu lebih dari satu detik halaman atas dari blog ini akan di tampilkan.

Bagaimana cara membuat anchor link?

Prinsip dasarnya adalah kita menandai terlebih dahulu suatu objek, lalu pada bagian yang lain kita buat link untuk memanggilnya.
Kode dasarnya seperti ini :

<a name=”NamaAnchor”> …. </a>       <– objek anchor

<a href=”#NamaAnchor”> …. </a>       <– link pemanggil anchor

Perhatikan tanda pagar (#) di atas, untuk nama anchor tidak memakai tanda pagar, akan tetapi untuk
link pemanggil anchor harus memakai tanda pagar.

Objek dari suatu anchor bisa di tampilkan bisa juga tidak, terlihat dari kode di atas ada tanda berupa titik-titik.
Titik-titik tersebut bisa di isi tulisan bisa juga di biarkan kosong, contoh :

<a name=”AtasBlog”></a>       <– objek anchor yang tidak ingin menampilkan tulisan.

<a name=”AtasBlog”>Blog bagian atas</a>       <– objek anchor yang ingin menampilkan tulisan.

Berbeda dengan objek dari anchor, link pemanggil anchor haruslah di beri tulisan untuk bisa di klik oleh pengunjung, contoh :

<a href=”#AtasBlog”>Kembali ke atas</a> <– link pemanggil anchor harus di beri tulisan.

Tertarik ingin membuatnya, silahkan ikuti langkah-langkah berikut :

Untuk template klasik :

  1. Sign in di blogger
  2. Klik menu Template
  3. Klik menu Edit HTML
  4. Copy seluruh kode template sobat, lalu paste pada notepad, silahkan save dulu untuk backup data
  5. Copy kode berikut lalu paste persis di bawah kode <body>
  6. <a name=”atas”></a>

  7. Copy paste kode berikut di atas kode </body>
  8. <center><a href=”#atas”> Kembali lagi ke atas</a> </center>

  9. Klik tombol Pratinjau untuk melihat perubahan
  10. Jika sudah OK, klik tombol Simpan Perubahan Template
  11. Selesai.

Penambahan kode <center> </center> di maksudkan agar tulisan link berada pada posisi tengah.

Untuk template baru :

  1. Sign in di blogger
  2. Klik menu Layout
  3. Klik menu Edit HTML
  4. Klik tulisan Download Template Lengkap, silahkan save dulu template sobat untuk backup data
  5. Klik kotak kecil di samping tulisan Expand Template Widget
  6. Tunggu beberapa saat sampai proses selesai
  7. Copy kode berikut lalu paste persis di bawah kode <body>
  8. <a name=”atas”></a>

  9. Copy paste kode berikut di atas kode </body>
  10. <center><a href=”#atas”> Kembali lagi ke atas</a> </center>

  11. Klik tombol Pratinjau untuk melihat perubahan
  12. Jika sudah OK, klik tombol SIMPAN TEMPLATE
  13. Selesai.

Satu lagi yang menarik dari fungsi kode ini, yaitu buat para sobat yang suka menulis posting
yang sangat panjang, atau merupakan tulisan-tulisan yang berupa karya ilmiah, Kode ini bisa
membantu kita untuk membuatkan sebuah navigasi untuk mempermudah pembaca. Misalkan pada setiap
pharagrap kita sisipkan sebuah anchor link yang mana anchor link ini bisa berupa tulisan yang terlihat
ataupun hanya sebuah objek yang tidak bisa terlihat oleh pembaca. Dan tentunya pada tempat-tempat tertentu
kita membuat tulisan berupa link untuk memanggil anchor link. Sebagai contoh saya telah membuat beberapa
anchor link pada setiap pharagrap, kode anchor link yang saya sisipkan seperti ini :

<a name=”satu”></a>    –> pharagrap pertama

<a name=”dua”></a>    –> pharagrap kedua

<a name=”tiga”></a>    –> pharagrap ketiga

Mau membuktikan? Ok, coba deh klik masing-masing link berikut :

Kembali ke pharagrap Pertama !

Kembali ke pharagrap Kedua !

Kembali ke pharagrap Ketiga !

mau lihat contoh blog yang memakai kode ini juga, silahkan klik Di sini !

Menarik bukan? Selamat mencoba deh !

Iklan

5 Juli 2007 - Posted by | blog tutorial, membuat link

15 Komentar »

  1. Ternyata asyik juga nih mas nyoba yang ini. tapi untuk link yang merujuk ke atas rasanya kurang enak kalau ditempatkan di atas (/body) secara tepat. Soale link itu nanti akan berada jauh didasar blog kita. Kalau tempat saya saya taruh di disini
    (div id=’main-wrapper’)
    (b:section class=’main’ id=’main’ showaddelement=’no’)
    (b:widget id=’Blog1′ locked=’true’ title=’Blog Posts’ type=’Blog’/)
    (/b:section)(center)Kembali Ke Atas(/center)
    (/div)

    Sehingga nantinya link akan berada persih dibawah posting, khan kalau tulisan saya sedikit lebih enak men-scroll mouse ke atas daripada kebawah yang agak jauh untuk ngeklik tulisan itu. Tapi posting ini bermanfaat banget loh. Makasih banget.
    Maaf semua < saya ganti dengan (

    Komentar oleh anas | 10 Juli 2007 | Balas

  2. Silahkan saja sobat Anas, untuk penempatan terserah yg punya blog, pada awal artikel saya terangkan prinsip dasarnya supaya mudah di mengerti, di blog ini juga saya pasang anchor link sehabis artikel juga kan he..he..he

    Komentar oleh rohman | 10 Juli 2007 | Balas

  3. Membantu sekali bos..terima kasih..boleh minta tolong gimana caranya link yang di body post open in new window?

    Free Computer Ebooks

    Komentar oleh f | 23 September 2007 | Balas

  4. wah canngih ni… thanx ya

    Komentar oleh buyungupik | 9 Oktober 2007 | Balas

  5. eh om mao tanya 1 lagi.. anchorlink denger2 nilai nya buat SEO tinggi ya? mohon pencerahan. thanx bgt. masi baru belajar- tapi semangat 1/2 mati =))javascript:void(0)
    Publikasikan Komentar Anda

    Komentar oleh buyungupik | 9 Oktober 2007 | Balas

  6. tips yang keren mas,,

    Komentar oleh anton | 25 Januari 2008 | Balas

  7. Aslkm..kang…tengkiu kang…

    Komentar oleh biaca | 4 Maret 2008 | Balas

  8. kalo bikin anchor secara otomatis gimana??
    mis, untuk pencarian artikel kan kita blum tau apa aja yang akan muncul. nah untuk kasus kayak gini gimana untuk buat anchor-nya??

    Komentar oleh . | 18 Maret 2008 | Balas

  9. thanks kang, tp.. tips untuk tau dimana posisi2 yang ‘pas’ buat letaknya gimana ya kang??

    Komentar oleh deeps | 26 Mei 2008 | Balas

  10. Hatur nuhun Kang Rohman. Sudah dicoba 😀

    Komentar oleh firdaus.a] | 8 Juni 2008 | Balas

  11. thank’s

    Komentar oleh doez | 19 Juli 2008 | Balas

  12. kang, kumaha sih caranya biar tiap halaman punya model yang beda, aq kan baru banget ni kang … email ya kang .. liat de kang masih polosss …
    http://www.browsemakeup.blogspot.com/

    Komentar oleh Gates | 21 Juli 2008 | Balas

  13. boleh aku minta tolong…cara pasang file excel di web? makasih ya boss..sukses deh…

    Komentar oleh Anonymous | 25 Juli 2008 | Balas

  14. terima kasih atas infonya, kang

    Komentar oleh andi | 30 Juli 2008 | Balas

  15. thanks atas ilmunya

    Komentar oleh Ateonsoft | 17 Agustus 2008 | Balas


Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s

%d blogger menyukai ini: