Cara Merubah Ukuran dan Merubah Posisi Gambar atau Banner
,
Seringkali di Facebook saya mendapat pertanyaan dari Bunda Yati. Emak online saya ini mengeluh sebab merasa kesulitan menaruh banner di saat mengikuti sebuah lomba atau kontes blog. Meski sebenarnya caranya tak terlalu sulit, dan pernah saya jelaskan lewat artikel sebelumnya.
Ya sudahlah, namanya aja bingung. Bingung itu sesuatu yang wajar, dan merupakan pemantik semangat untuk belajar. Semoga saja hal ini juga menjadi catatan bagi para penyelenggara lomba atau kontes. Untuk memberi kemudahan berupa kode HTML apabila mensyaratkan banner di setiap lombanya. Agar memudahkan para peserta tentunya, dan tak membuat bingung emak online saya lagi hahaha.
Nah, tips ini sebenarnya sederhana. Cuma mengulang artikel di blog ini tentang cara membuat link di gambar. Cuma ada sedikit tambahan tentang cara mengatur ukuran serta posisi gambar agar nampak sedap di mata. Semoga saja tips sederhana ini bisa bermanfaat, khususnya untuk Anda yang ingin merapikan banner di kanan kiri sidebar blognya.
Pada dasarnya struktur HTML gambar secara sederhana bentuknya seperti di bawah ini,
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6eymwQecU5QywbC8VujI_8iyYFFZ8Tn3j5S_mpzHQQVp2RRGbBpW66K91D9aUgx99TVcURINLTcztbvDWjPLXLCuOd-6N5dQ3nXxujyf9ldQbwkQ8Xem3c71KLO8SicEsZdi_KrTIqWg/s280-no/Selamatkan+Bumi.jpg">Warna merah : URL gambar
Hasilnya :
Tambahkan atribut width dan height untuk merubah ukuran gambar menurut selera kita. Nah, di sini saya coba merubah ukuran gambar di atas untuk diperkecil menjadi ukuran 200 x 200.
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6eymwQecU5QywbC8VujI_8iyYFFZ8Tn3j5S_mpzHQQVp2RRGbBpW66K91D9aUgx99TVcURINLTcztbvDWjPLXLCuOd-6N5dQ3nXxujyf9ldQbwkQ8Xem3c71KLO8SicEsZdi_KrTIqWg/s280-no/Selamatkan+Bumi.jpg" width="200" height="200">
Warna merah : URL gambar
Width : rubah angka untuk memperbesar/memperkecil lebar gambar sesuai keinginan
Height : rubah angka untuk memperbesar/memperkecil tinggi gambar sesuai keinginan
Hasilnya :
catatan : Apabila ingin memperbesar ukuran gambar, usahakan nilainya tak lebih besar dari ukuran gambar sebenarnya, agar gambar tak terlihat pecah.
Jangan lupa untuk memberi atribut alt agar gambar Anda lebih mudah ditemukan di mesin pencarian dengan menggunakan kata kunci yang relevan.
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6eymwQecU5QywbC8VujI_8iyYFFZ8Tn3j5S_mpzHQQVp2RRGbBpW66K91D9aUgx99TVcURINLTcztbvDWjPLXLCuOd-6N5dQ3nXxujyf9ldQbwkQ8Xem3c71KLO8SicEsZdi_KrTIqWg/s280-no/Selamatkan+Bumi.jpg" alt="selamatkan bumi" width="200" height="200">selamatkan bumi : rubah dengan kata kunci yang relevan dengan gambar
Jika ingin memberi garis tepi pada gambar, tambahkan atribut style="border:5px solid black;" Anda bisa merubah jenis garis tepi, ukuran serta warnanya sesuai keinginan,
<img style="border:5px solid #FF6600;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6eymwQecU5QywbC8VujI_8iyYFFZ8Tn3j5S_mpzHQQVp2RRGbBpW66K91D9aUgx99TVcURINLTcztbvDWjPLXLCuOd-6N5dQ3nXxujyf9ldQbwkQ8Xem3c71KLO8SicEsZdi_KrTIqWg/s280-no/Selamatkan+Bumi.jpg" alt="selamatkan bumi" width="200" height="200">Pada kode di atas saya ingin memberi garis tepi gambar dengan ukuran 5px, jenis border/garis tepi solid dan warna garis tepi #FF6600
5px : ganti ukuran border sesuai keinginan
solid : ganti jenis border sesuai keinginan (untuk jenis-jenis border akan saya posting di artikel berikutnya)
#FF6600 :ganti warna border sesuai keinginan (untuk kode warna bisa dilihat disini. Atau cukup diganti dengan nama warna seperti black, grey, red dan lain sebagainya.)
Hasilnya :
Tambahkan kode <div style="text-align:center;">... </div> untuk mengatur posisi gambar atau banner tepat di tengah.
<div style="text-align:center;"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6eymwQecU5QywbC8VujI_8iyYFFZ8Tn3j5S_mpzHQQVp2RRGbBpW66K91D9aUgx99TVcURINLTcztbvDWjPLXLCuOd-6N5dQ3nXxujyf9ldQbwkQ8Xem3c71KLO8SicEsZdi_KrTIqWg/s280-no/Selamatkan+Bumi.jpg" alt="selamatkan bumi" width="200" height="200"></div>
Hasilnya :
Nah yang terakhir, jika ingin menautkan gambar dengan link menuju halaman tertentu. Tambahkan kode <a href="alamat link tujuan" target="_blank">...</a>
<a href="http://www.essip.us/2012/12/apa-yang-kau-cari-hai-pendaki.html" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6eymwQecU5QywbC8VujI_8iyYFFZ8Tn3j5S_mpzHQQVp2RRGbBpW66K91D9aUgx99TVcURINLTcztbvDWjPLXLCuOd-6N5dQ3nXxujyf9ldQbwkQ8Xem3c71KLO8SicEsZdi_KrTIqWg/s280-no/Selamatkan+Bumi.jpg" alt="selamatkan bumi" width="200" height="200"></a>
Klik gambar untuk melihat hasilnya.
Semoga tips sederhana ini bermanfaat dan tiada lagi blogger yang bingung gara-gara banner hahaha. Jika ingin praktek silakan menuju halaman ini. Atau jika ada yang ingin menambahi, yuk kita saling berbagi di kolom komentar artikel ini. Matur nuwun.
