Untuk memasang Gambar /Foto di Blog atau web, kita perlu mengatahui dulu alamat foto/gambar yang kita ingin tampilkan, bisa dari upload an yang kita lakukan ke dalam media web ataupun dari web yang lain. Atau bisa juga dari Layanan penyimpan foto seperti photobucket.com, di sana juga anda sudah mendapatkan layanan yang saya rasa cukup memuaskan mulai dari pengaturan folder penyimpanan foto (album) modifikasi gambar secara online, dan Beserta kode gambar yang siap anda pakai untuk di pasang pada blog/web anda.
Di sini saya hanya memberikan sedikit gambaran atau cara untuk menampilkan gambar pada blog/web.
Kode yang di perlukan adalah kode ini:
<img src=”url gambar anda” alt=”deskripsi gambar” width=”x% atau xpx” height=”y% atau ypx”/>
- Supaya tidak terjadi masalah pada browser anda pastikan di akhir kode image gunakan /> itu menandakan penutup kode, pada awalnya kode Image tidak memerlukan penutup kode tapi pada perkembangannya, harus memiliki kode penutup, selain itu anda bisa menggunakan kode </img> dengan catatan tidak menggunakan kode /> contohnya: <img src=”….” > </img>.
- SRC adalah URL gambar yang akan di pasang.
- Width untuk menentukan lebar gambar, satuannya dalam pixel atau persentase, Untuk gambar yang ingin di tampilkan apa adanya, silahkan hapus kode “width=”……” sampai dibatasi code ini />
- Height untuk menentukan tinggi gambar, satauannya sama seperti width yaitu persentase dan pixel.
- ALT adalah kode untuk mendeskripsikan sebuah gaambar yang anda maksud hal ini berguna untuk mesin pencari menemukan gambar yang sesuai di cari.
selain kode di atas, masih banyak parameter atau kode tambahan untuk tag IMG. selengkapnya bisa di baca di sini : http://www.htmlcodetutorial.com/images/_IMG.html.
Code html yang digunakan untuk hanya menampilkan gambar di blog/web, sebagai contoh :
Gambar setelah di atur lebarnya 132 pixels dan tingginya sebesar 32 pixels.
Hasil bisa dilihat di Web lovahijabers gambar instagram bagian footer web.
Pasang Link pada Gambar
Jika kita memakai kode html yang diatas, ketika anda klik maka yang tampil adalah gambar itu sendiri. Cara menambahkan Link pada Gambar adalah cukup mudah, Caranya dengan meletakan tag <a></a> diantara tag <img> Contohnya sebagai berikut:
<a href=’https://instagram.com/lovahijabers’ target=’_blank’><img alt=’http://www.lovahijabers.com/wp-content/uploads/2015/05/logo-instagram.png‘/></a>
Coba perhatikan kode di atas, maka saat anda klik gambar maka akan membuka halaman baru yaitu https://instagram.com/lovahijabers adapun hasilnya bisa di coba langsung pada web lovahijabers.
Tampilkan Gambar dari Blog/web Orang Lain
Kemudian bagaimana jika ingin menampilkan gambar dari situs atau blog orang lain?
Caranya hanya mencari alamat gambar yang ingin anda gunakan dan berikut screenshotnya.
Cari gambar yang ingin anda pasang – Ambil contoh logo Instagram di web lovahijabers, kemudian klik kanan pada image tadi nanti akan muncul menu.
Kemudian Pilih dan klik “Copy Image Location” nah setelah di copy, silahkan gabungkan dengan kode Image yang sudah diberikan sebelumnya: atau silahkan paste dulu ke notepad atau halaman kerja anda.
Kemudian Siapkan Alamat atau url yang ingin di jadikan link pada saat gambar tadi di klik. Nah setelah terkumpul maka selanjutnya adalah penggabungan yaitu sebagai berikut:
<a href=’https://instagram.com/lovahijabers’ target=’_blank’><img alt=’Instagramnya Lova Hijabers’ src=’http://www.lovahijabers.com/wp-content/uploads/2015/05/logo-instagram.png’ width=”132″ height=”32″/></br>
Pemasangan dapat di terapkan pada Widget blog maupun postingan blog anda. Semoga berhasil 🙂
