Membuat Link Aktif Menggunakan Gambar

Penambahan gambar sebenarnya bisa dilakukan lagi dengan cara yang lebih cepat yaitu dengan menggunakan fitur add widget "image" pada menu layout pada blogger, tapi cara penambahan gambar yang akan dibahas pada artikel ini adalah cara manual yang memungkinkan kita bisa lebih leluasa memberikan sedikit efek perubahan menggunakan CSS seperti ukuran lebar (width) dan tinggi (height) sebuah gambar dengan satuan pixel (px) atau persentase dan tidak hanya CSS namun seperti HTML Links pun bisa kita tambahkan kedalam gambar tersebut.

Mungkin ada yang berpikir "Apakah sangat penting trik ini?", bagi saya pribadi ini tetap trik opsional karena didalam blogger pun menyediakan fitur add image yang lebih mudah tapi bagi kita yang ingin memahami ilmu seputar pembuatan blog lebih dalam tentu trik penambahan gambar dengan URL saya rasa cukup penting untuk dipelajari. Ilustrasi gambar URL atau image link bisa dilihat pada gambar dibawah ini.

Penjelasan ilustrasi link gambar

Gambar yang terdapat pada website A sebenarnya adalah sebuah link aktif atau URL yang diberi gambar, link tersebut bisa ditujukan ke website lain atau halaman lain pada website itu sendiri. Jadi pada saat ada pengunjung yang melakukan klik di gambar tersebut, maka pengunjung akan langsung diteruskan menuju halaman dari link aktif yang disisipkan.

Beberapa contoh lain penggunaan link gambar

• Pemasangan iklan gambar yang menuju website advertiser, ini bisa disebut juga sebagai iklan banner.
• Menambahkan gambar yang menuju halaman lain pada website itu sendiri, untuk mendongkrak angka pageview halaman tersebut.
• Menambahkan gambar yang bisa dikaitkan dengan artikel lain dalam website itu sendiri.

Cara menambahkan link aktif di gambar.

1. Buka halaman blogger dan login akun blogger.
2. Pilih blog yang ingin diberi perubahan.
3. Pilih layout dan pilih add widget sesuai lokasi penempatan gambar yang diinginkan.
4. Pilih add HTML / Javascript dan masukan kode dibawah ini, kemudian pilih save apabila proses konfigurasi telas selesai.

<div align="center">
<a href="URL YANG DITUJU" target="_blank">
<img alt="JUDUL GAMBAR" title="JUDUL GAMBAR" height="TINGGI GAMBAR" src="DIRECT LINK GAMBAR" width="LEBAR GAMBAR"/>
</a>
</div>

Penjelasan kode diatas

• URL YANG DITUJU adalah alamat URL atau link yang akan mengarahkan halaman pengunjung ke URL yang tertulis apabila gambar tersebut di klik
• JUDUL GAMBAR pada atribut alt dan title berfungsi untuk memberikan judul pada gambar tersebut, atribute alt berfungsi untuk menampilkan judul gambar apabila gambar gagal di download (tidak muncul) sedangkan atribut title berfungsi untuk menampilkan judul gambar apabila gambar tersebut dilalui cursor mouse.
• TINGGI GAMBAR dan LEBAR GAMBAR adalah atribut untuk menentukan ukuran gambar, ukuran gambar ini dapat berjalan dengan beberapa satuan contoh misal satuan pixel atau px dan satuan persentase yang berdasarkan ukuran resolusi browser.
• DIRECT LINK GAMBAR adalah alamat URL atau link dari gambar yang akan dimuat atau dimunculkan.

Sampai disini dulu tutorial "Membuat link gambar", semoga informasi ini dapat bermanfaat bagi kita yang ingin membuat link dengan variasi gambar atau pembuatan banner iklan.
Terima kasih

Artikel ini ditulis oleh :
Amateur Blog Design