Cara Membuat Link pada Gambar

Cara membuat link pada gambar, sebenarnya tidak jauh berbeda dengan link pada teks. Pada link teks, apabila kita meng-klik teks akan terbuka halaman web lain. Pada link gambar apabila kita klik gambar, maka terbuka halaman web baru.

Sebelum kepada link gambar, kita lihat dulu bagai mana kode HTML dasar dari link teks, seperti  ini:

<a href="url tujuan">Mafaka</a>

Maka apabila saya ingin membuat teks link yang ditujukan ke ferry-barabelic.ml, maka kodenya seperti ini:

<a href="http://ferry-barabelic.ml/">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 ferry-barabelic.ml :

<a href="http://ferry-barabelic.ml/"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6BEGjYcOjEUAUn-ez1DWaZUeqtXUhbaJSSXlAElkcyWzTL2eYI3bLbhBK6fzOAZYmsOmg0ruWqPPGudon4W3J2-zooSHwJEgmHOEbXwoD4nyqg_Fgv8Zo1NOKYwexzcHlJGbPLxhMjuO4/s798/selamatdatang-_-.png" /></a>

maka hasilnya seperti ini : (silahkan di click atuh)

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://ferry-barabelic.ml" target="_blank">

4. Supaya gambar terbaca di Search Engine, tambahkan kode alt="keterangan gambar" pada url gambar, contoh:

<img src="https://scontent-hkg3-1.xx.fbcdn.net/v/t1.0-9/13227025_246834675678721_4360706689473391815_n.jpg?oh=216cf294b6bd42bed7818270b21e5056&oe=57DA8ABD" alt="logo blog ferry" />

5. Supaya keluar teks ketika mouse disimpan di atas gambar, tambahkan kode tittle="judul gambar", contoh:

<img src="https://scontent-hkg3-1.xx.fbcdn.net/v/t1.0-9/13227025_246834675678721_4360706689473391815_n.jpg?oh=216cf294b6bd42bed7818270b21e5056&oe=57DA8ABD" alt="logo blog kang ismet" tittle="Blog Ferry-barabelic" />

6. Kode keseluruhan seperti ini :

<a href="http://ferry-barabelic.ml" target="_blank"><img src="http://4.bp.blogspot.com/- zzeju97zS34/TzUklCgI2mI/AAAAAAAABbA/WY6rUNgXmbY/s1600/logo1.png" alt="logo ferry" tittle="ferry" /></a>

Happy Blogging Bro :)