Cara Mudah Membuat Link dengan Gambar

Link adalah text atau beberapa text dalam halaman situs atau blog yang bisa kita klik, text yang menunjukan sebuah link biasanya text tersebut memiliki garis bawah, berwarna biru dan bisa kita klik, jika text tesebut diklik maka kita akan dibawa menuju halaman situs tertentu seusai dengan alamat url yang dipasang pada link text tersebut.

Sebelum kita membahas bagaimana cara membuat link dengan gambar, alangkah baiknya saya perkenalkan terlebih dahulu cara pembuatan link standar dan kode yang digunakan untuk membuat link adalah kode HTML

Format dasar penulisan sebuah link:

<a href='alamat_situs_yang_dituju'> anchor text </a>

Sebagai contoh, jika kita ingin membuat link yang ketika diklik akan menuju http://kodetemplate.com, dengan tulisan go to kode template blog , maka kode HTML nya adalah sebagai berikut:

<a href='http://kodetemplate.com>go to kode template blog</a>

Kode HTML diatas jika dibaca dan diterjemahkan oleh browser (seperti : mozila firefox, internet explorer, google croome dll) akan menghasilkan sebuah link dengan tulisan go to kode template, dan jika link tersebut di klik akan menuju halaman  http://kodetemplate.com.

Kemudian apabila kita ingin membuat link dengan gambar caranya adalah memasukan gambar pada anchor textnya, untuk membuat gambar perintah HTMLnya adalah sebagai berikut:

<img src='alamat_url_gambar' />

Nah sekarang jika ingin membuat link dengan gambar, maka kita tinggal mengganti anchor text dengan perintah gambar diatas, kode htmlnya adalah sebagai berikut:

<a href='url_situs_tujuan'><img src='lokasi_url_gambar' /> </a>

Sebagai contoh, berikut kita akan menggunakan kode html untuk membuat link dengan gambar, jika link tersebut kita klik maka akan menuju ke halaman http://kodetemplate.blogspot.com.
sedangkan file gambar yang akan kita gunakan untuk link tersebut beralamat di :
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKgjACpb0h4d9oUi2eAHlcgHsIghm7TFWCrTOUDBFatXLU_y9uvW3cx1gncYHqmBOjBE12uWamH514L8lMmBo96S_IwMdTITZNid71xZhvkhycqFxNwjTo-WVRThRvoZjWq7JjJtP_elE/s1600/kode%252
Btemplate.png&container=blogger&gadget=a&rewriteMime=image/*

Perintah htmlnya adalah sebagai berikut:

<a href='http://kodetemplate.blogspot.com'>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKgjACpb0h4d9oUi2eAHlcgHsIghm7TFWCrTOUDBFatXLU_y9uvW3cx1gncYHqmBOjBE12uWamH514L8lMmBo96S_IwMdTITZNid71xZhvkhycqFxNwjTo-WVRThRvoZjWq7JjJtP_elE/s1600/kode+template.png' />
</a>

 dan hasilnya adalah sebagai berikut:



Silahkan klik gambar tersebut, maka anda akan dibawa ke halaman http://kodetemplate.com

Syarat membuat sebuah link dengan gambar

Untuk membuat link dengan gambar ada beberapa syarat yang harus kita penuhi:

1. Gambar harus sudah diupload, dan mengetahui lokasinya.

2. Untuk meletakan kode html diatas kita perlu menggunakan bantuan kode template blog mode HTML

3. Melibatkan atribut tambahan untuk kode membuat link dengan gambar,

a. Atribut untuk membuat link gambar, dan ketika diklik akan terbuka pada tab baru, yaitu dengan menambahkan atribut target='blank' pada tag <a ..., sebagai contoh:

<a href='url_tujuan' target='blank'>contoh link</a>

b. Agar gambar mudah ditemukan mesin pencari dan berkualitas SEO, maka tambahkan mode alt pada tag <img... sebgai contoh:

<img src='url_lokasi_gambar' alt='ini atribut ALT gambar' />

c. Agar keluar text ketika mouse diarahkan diatasnya, maka kita harus menambahkan atribut title pada tag gambar, sebagai berikut:

<img src='url_lokasi_gambar' title='ini judul gambar' />

d. Untuk mengubah ukuran gambar maka kita harus menambahkan attribut width dan height sebagai berikut:

<img src='url_lokasi_gambar' widht='nilai lebar' height='nilai_tinggi' />

setiap atribut antara atribut yang satu dan atribut lainnya yang kita letakan didalam tag, harus dipisahkan menggunakan spasi,

Contoh kasus: berikut adalah kita akan membuat link dengan sebuah gambar, kemudian ALT atributnya adalah "Kode template blog" dan judul gambarnya "Panduan kode template blog" dan jika gambar link tersebut di klik akan menuju halaman http://kodetemplate.blogspot.com, dan terbuaka pada tab baru, sedangkan lebar dan tingginya adalah lebar 300px dan tinggi=60px;

misal alamat url gambar yang akan digunakan adalah: http://goog.com/contoh_gambar.png

Kode HTML untuk kasus diatas secara lengkap adalah sebagai berikut:

<a href='http://kodetemplate.blogspot.com' target='blank'><img src='http://goog.com/contoh_gambar.png' width='300px' height='60px' alt='kode template blog' title='panduan kode template blog' />

demikian apa yang bisa saya share untuk anda mengenai Cara Mudah Membuat Kode Link dengan Gambar, selamat mencoba dan semoga berhasil.

Tag : Blogger tips, design