Daftar Isi





Sabtu, 21 Juli 2012

Mengatur Image Gambar

Sidebar memiliki ukuran yang berbeda-beda, untuk itu diperlukan penyesuaian terhadap beberapa bagiannya, antara lain :

Mengatur Ukuran Image/Gambar
<img style="border:0px; width:120px; height:50px;" src="URL image 1"/>
Mengatur Letak/Posisi Gambar (tinggal menambahkan) :
Tengah <center> kemudian ditutup dengan </center>
Kiri <left> kemudian ditutup dengan </left>
Kanan <right>kemudian ditutup dengan </right>

Contoh untuk penulisannya
<right><img style="border:0px; width:120px; height:50px;" src="URL image 1"/></right>
Mengatur Jarak
  • Memberi Margin Atas Bawah
<img style="border:0px; width:120px; height:50px; margin-top:5px;" src="URL image 1"/>
Keterangan : Perintah margin-top:5px artinya bahwa gambar akan diberi margin ke atas dan ke bawah sebesar 3px

  • Memberi Margin Atas Bawah - Kanan Kiri
<img style="border:0px; width:120px; height:50px; margin:3px 1px;" src="URL image 1"/>
Keterangan : Perintah margin-top:5px artinya bahwa gambar akan diberi margin ke atas dan ke bawah sebesar 3px, serta ke kanan dan ke kiri sebesar 1px


Contoh Penggunaannya :
<center>
<img style="border:0px; width:120px; height:50px; margin:3px 1px;" src="http://i831.photobucket.com/albums/zz233/qcux80/cooltext460118870.jpg"/>
<img style="border:0px; width:120px; height:50px; margin:3px 1px;" src="http://i831.photobucket.com/albums/zz233/qcux80/cooltext460118870.jpg"/>
<img style="border:0px; width:120px; height:50px; margin:3px 1px;" src="http://i831.photobucket.com/albums/zz233/qcux80/cooltext460118870.jpg"/>
</center>
Hasilnya : (atas-bawah)







Untuk yang kiri-kanan
<center>
<img style="border:0px; width:120px; height:50px; margin-top:5px;"src="http://i831.photobucket.com/albums/zz233/qcux80/cooltext460118870.jpg"/><img style="border:0px; width:120px; height:50px; margin-top:5px;"src="http://i831.photobucket.com/albums/zz233/qcux80/cooltext460118870.jpg"/>
<img style="border:0px; width:120px; height:50px; margin-top:5px;"src="http://i831.photobucket.com/albums/zz233/qcux80/cooltext460118870.jpg"/>
</center>
Preview nya :





Selamat Mencoba dan semoga berguna...!

Tidak ada komentar: