Friday, March 25, 2011

Cara Membuat Link Mulai dari Yang Biasa Sampai yang Luar Biasa


Membuat link di Artikel atau postingan blog sagatlah mudah. Cukup highlight kata atau kalimat yang ingin dijadikan link, lalu klik tombol link diatas postingan. Selanjutnya tinggal memasukkan halaman yang dituju pada pop up jendela yang muncul.

Lain halnya dengan membuat link di Sidebar, Tab Menu, dll. Kita harus membuat kode linknya secara manual.Cara gampangnya adalah dengan membuat linknya di halaman posting lalu mengcopy semua kode linknya pada mode EDIT HTML, tapi cara ini hanya bisa membuat link biasa. misalnya seperti ini :

<a href="http://blogger-bugis.blogspot.com/">BLOGGERBUGIS</a>

Hasilnya :


Kata "BLOGGERBUGIS" adalah link yang menuju ke  http://blogger-bugis.blogspot.com
Saat di klik, Link diatas akan langsung mengganti halaman menjadi halaman yang dituju linknya. Dalam hal ini  halaman http://blogger-bugis.blogspot.com.


Jika ingin membuat jenis link yang lain, kita harus menambahkan beberapa kode. Kode yang ditambahkan tersebut berbeda-beda tergantung dari jenis link yang kita inginkan.

Berikut ini beberapa cara membuat link dengan fungsinya masing - masing.

  • LINK YANG MEMBUKA TAB BARU
Saat pengunjung mengklik link jenis ini, halaman yang dituju link akan terbuka di tab baru browser. untuk membuatnya kita hanya perlu menambahkan kode target="_blank" setelah alamat url yang dituju link. Bisa juga menggunakan kode  target="_new" , dan bisa juga menggunakan kode target="_up".
Contoh kode yang digunakan seperti ini :

<a href="http://blogger-bugis.blogspot.com/" target="_blank">BLOGGERBUGIS</a>

Kode diatas akan membuat kata BLOGGERBUGIS menjadi link menuju ke halaman http://blogger-bugis.blogspot.com/ yang akan terbuka di tab baru browser. Kode link diatas akan menghasilkan link seperti ini :


Silahkan di klik untuk melihat hasilnya.

  • LINK YANG MEMBUKA 2 HALAMAN
Link jenis ini akan membuka 2 halaman sekaligus pada saat bersamaan saat linknya di klik
Contoh kode yang digunakan seperti ini :

<a href="http://blogger-bugis.blogspot.com" target="_blank"
onclick="window.open('http://www.situskerenku.co.cc')">MgM Community BLOGGERBUGIS</a>

Kode link diatas akan menghasilkan link di bawah ini :


Silahkan di klik untuk melihat hasilnya.

  • LINK YANG TERBUKA TANPA DI KLIK
Link jenis ini akan langsung terbuka tanpa di klik saat mouse menyentuh / melewati link.
Contoh kode yang digunakan seperti ini : 

<a href="http://blogger-bugis.blogspot.com" onmouseover="window.location=this.href">BLOGGERBUGIS</a> 

Hasil dari kode link diatas seperti ini :


Silahkan arahkan mouse anda pada link untuk melihat hasilnya.

  • MENGGUNKAN GAMBAR SEBAGAI LINK
Selain menggunakan kata atau kalimat, kita juga bisa menggunakan gambar sebagai link. Untuk jenis link yang satu ini kita membutuhkan sebuah gambar yang tersimpan pada imge hosting lalu menggunakan alamat URL Gambar tersebut. Misalnya kita akan menggunakan Gambar di bawah ini sebagai link


Gambar diatas tersimpan di PICASA dengan alamat URL https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRHBV9h338kTZ62eCmRTCaJb57kXJC-_q-KzlF9W_-5refss-UWv1D2r0yEFObMsK9B-0QueibP6-i201Qls6nqND0ncEJcWDi7aXCdUIXdZ-dwLpheP72FQymQ1NU3Vz67b6xHwWtrCwO/

Untuk membuat gambarnya menjadi link, Contoh kode yang digunakan seperti ini :

<a href="http://blogger-bugis.blogspot.com" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRHBV9h338kTZ62eCmRTCaJb57kXJC-_q-KzlF9W_-5refss-UWv1D2r0yEFObMsK9B-0QueibP6-i201Qls6nqND0ncEJcWDi7aXCdUIXdZ-dwLpheP72FQymQ1NU3Vz67b6xHwWtrCwO/" border="0" /></a>

Hasilnya seperti ini :



Silahkan klik gambar diatas untuk melihat hasilnya

OK sob.... semoga cukup jelas cara saya menyampaikannya.
Beberapa Cara Membuat Link diatas semoga bermanfaat bagi anda. Happy blogging dan Salam Blogger.....

1 comments:

Free Travel Info on May 26, 2011 at 9:10 PM said...

sip mas, habis tak coba'e, baru tahu bisa 'senggol nyala' begitu, hehe... makasih banyak...

Post a Comment

Baca Juga...

 

Just Simple Blog. Copyright 2013 All Rights Reserved Revolution Two Church theme by Brian Gardner Converted into Blogger Template by Bloganol dot com