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

Cara Merapikan Widged/Image

Jika anda belum berpengalaman menggunakan table untuk merapikan widget (termasuk iklan maupun banner), kurang lebih beginilah cara merapikan iklan dengan table agar berjejer kesamping.

Langkah-Langkah Merapikan Iklan berjejer :
Masuk ke tata letak di blog yang anda miliki
Pilih Tata Letak kemudian tambah Widget HTML
Buat Script HTML Seperti Berikut :

</div>
<table><tr>
<td>Widget A yang Dikehendaki</td>
<td></td>
<td>Widget B yang Dikehendaki</td>
<td></td>
<td>Widget C yang Dikehendaki</td>
</tr></table>
</div>

Pada Kasus Kali ini, Script dari Widget yang ingin saya pasang misalnya ketiga-tiganya sebagai berikut :

<a title="Blog Pelajar Terbaik" href="http://pelajarterbaikupi.blogspot.com" target="_blank"><img alt="Kunjungi Blog Pelajarterbaik" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhKDmddwIoM-_OH2hMl193woXgybbgKl3OrJqcJn8wPhsxKlDojwk0zADX7sNr2bPzLrId0928SR24gbOl6vsASxkmNhzV90ixbwk0sEgZMh8ymP0Q4DWBCJCYEOwDGzbUVKUST5kPMeE/
s1600/Mahfudin_IW.gif" width="125px" height="125px"/></a>

Maka Tampilan yang akan diperoleh ketika Script tersebut dimasukan ke dalam Script HTML di atas adalah sebagai berikut :


Jika Kita ingin menambah jarak antar gambar tersebut, maka kita cukup membuat kolom kosong lebih banyak lagi (HTML yang berwarna merah) sebanyak yang kita perlukan. Jika melihat polanya, tentu anda memahami bagaimana jika ingin menambahkan lebih banyak widget lagi, sehingga bukan sekedar tiga widget.

Teknik tabel ini, juga sering digunakan untuk merapikan foto-foto di blog, sehingga kumpulan foto (galeri) tersebut bisa lebih rapi karena di atur berjejer seperti gambar di atas.

Sumber:  http://www.pelajarterbaik.com/2015/02/solusi-pasang-banner-berantakan-memasang-widget-iklan-berjejer-kesamping.html