Cara Merubah Ukuran dan Merubah Posisi Gambar atau Banner

Pada dasarnya struktur HTML gambar secara sederhana bentuknya seperti di bawah ini,

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLCTJcmblsx6bt5eDbNdg09SAF8WEiHGDDjrr1DEtHFpFybSyhN1hgWISJhpcbYOGbrP-g2mnG43Rx_FUqVBH27n_sMu3ZyQOI83V076PjNrdS89YnxUKuctq_24HBkoVHZPEfh_zgzTQ/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/AVvXsEjLCTJcmblsx6bt5eDbNdg09SAF8WEiHGDDjrr1DEtHFpFybSyhN1hgWISJhpcbYOGbrP-g2mnG43Rx_FUqVBH27n_sMu3ZyQOI83V076PjNrdS89YnxUKuctq_24HBkoVHZPEfh_zgzTQ/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/AVvXsEjLCTJcmblsx6bt5eDbNdg09SAF8WEiHGDDjrr1DEtHFpFybSyhN1hgWISJhpcbYOGbrP-g2mnG43Rx_FUqVBH27n_sMu3ZyQOI83V076PjNrdS89YnxUKuctq_24HBkoVHZPEfh_zgzTQ/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/AVvXsEjLCTJcmblsx6bt5eDbNdg09SAF8WEiHGDDjrr1DEtHFpFybSyhN1hgWISJhpcbYOGbrP-g2mnG43Rx_FUqVBH27n_sMu3ZyQOI83V076PjNrdS89YnxUKuctq_24HBkoVHZPEfh_zgzTQ/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/AVvXsEjLCTJcmblsx6bt5eDbNdg09SAF8WEiHGDDjrr1DEtHFpFybSyhN1hgWISJhpcbYOGbrP-g2mnG43Rx_FUqVBH27n_sMu3ZyQOI83V076PjNrdS89YnxUKuctq_24HBkoVHZPEfh_zgzTQ/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://investasicararollover.blogspot.co.id/p/blog-page_41.html" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLCTJcmblsx6bt5eDbNdg09SAF8WEiHGDDjrr1DEtHFpFybSyhN1hgWISJhpcbYOGbrP-g2mnG43Rx_FUqVBH27n_sMu3ZyQOI83V076PjNrdS89YnxUKuctq_24HBkoVHZPEfh_zgzTQ/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

Sumber:
 http://bengkelozz.blogspot.co.id/2014/11/cara-merubah-ukuran-dan-merubah-posisi.html