Sebelum kepada link gambar, kita lihat dulu bagai mana kode HTML dasar dari link teks, seperti ini:
<a href="url tujuan">anchor teks</a>Maka apabila saya ingin membuat teks link yang ditujukan ke blog.kangismet.net, maka kodenya seperti ini:
<a href="http://blog.kangismet.net/">Blogger Tutorial</a>Apabila kita ingin menampilkan gambar sebagai link, maka kita tinggal mengganti anchor teks menjadi gambar, kode dasarnya seperti ini:
<a href="url tujuan"><img src="url gambar" /></a>Contoh kode, gambar yang ditujukan ke blog.kangismet.net:
<a href="http://blog.kangismet.net/"><img src="http://1.bp.blogspot.com/-EL0iQY6651k/TtCFY0jbHxI/AAAAAAAABHc/2Mkwfc9bOVQ/s1600/ki.png" /></a>maka hasilnya seperti ini : (sok atuh silahkan di klik)
Beberapa hal yang perlu diperhatikan :
1. Untuk memasukan kode di atas harus pada mode HTML
2. Gambar harus sudah di upload
3. Supaya terbuka di tab baru tambahkan kode
target="_blank"
pada url tujuan, contoh:<a href="http://blog.kangismet.net" target="_blank">4. Supaya gambar terbaca di Search Engine, tambahkan kode
alt="keterangan gambar"
pada url gambar, contoh:<img src="http://4.bp.blogspot.com/-zzeju97zS34/TzUklCgI2mI/AAAAAAAABbA/WY6rUNgXmbY/s1600/logo1.png" alt="logo blog kang ismet" />5. Supaya keluar teks ketika mouse disimpan di atas gambar, tambahkan kode
tittle="judul gambar"
, contoh:<img src="http://4.bp.blogspot.com/- zzeju97zS34/TzUklCgI2mI/AAAAAAAABbA/WY6rUNgXmbY/s1600/logo1.png" alt="logo blog kang ismet" tittle="Blog Kang Ismet" />6. Kode keseluruhan seperti ini :
<a href="http://blog.kangismet.net" target="_blank"><img src="http://4.bp.blogspot.com/- zzeju97zS34/TzUklCgI2mI/AAAAAAAABbA/WY6rUNgXmbY/s1600/logo1.png" alt="logo blog kang ismet" tittle="Blog Kang Ismet" /></a>Untuk mengupload gambar, dan cara mengetahui alamat/url gambar silahkan kunjungi tutorial "Cara upload gambar ke Blogger".
Kalau ada saran atau komentar silahkan isi kolom komentarnya.
Happy Blogging sob...