Agar tak terkesan monoton dalam pemasangan gambar, kita bisa memodifikasinya dengan merubah letak gambar yang berbeda-beda disetiap tulisan. Oleh sebab itu Topik kali ini kita akan membahas Cara membuat posisi gambar di samping teks pada website atau blog, caranya cukup sederhana, jika anda menggunakan blogspot seperti saya tinggal klik pada gambar karna disana sudah ada pilihan nya right, left, atau center. Namun jika menggunakan web yang lain anda hanya tinggal menambahkan beberapa kode HTML (tag, atribut) ke dalam gambar dan teks tersebut, dan bisa di lakukan dengan beberapa cara.
Cara membuat gambar berada di sisi kiri atau kanan awal teks:
PERTAMA yang posisinya berada di samping kiri teks
Dengan menggunakan tag <p> dan atribut dasar style="float:left;" pada gambar. Margin, padding, width dan alinea teks diatur secara default. Lihat format selengkapnya dibawah ini :
<p ><img src="URL gambar" style="float:left;" />tulis teks disini</p>
KEDUA yang posisinya berada di samping kanan teks
masih menggunakan tag <p> , atribut dasar style="float:right;" pada gambar dan tambahan atribut perataan teks (text-align:justify). Margin, padding, dan width diatur secara default. Lihat format selengkapnya berikut ini :
<p style="text-align:justify;"><img src="URL gambar" style="float:right;" />tulis teks disini</p>
KETIGA yang posisinya berada di samping kiri teks dengan tambahan modifikasi.
menggunakan tag <div>, atribut dasar style="float:left;" pada gambar dan beberapa tambahan modifikasi.Modifikasi yang dimaksud adalah penambahan warna background dan garis, pengaturan ulang jarak antara teks dengan gambar dsb. Lihat format selengkapnya berikut ini :
<div style="text-align:justify;width:75%; background-color:#ff9999; border:1px solid #000099; padding:8px;"><img src="URL gambar" style="float:left; margin:0 8px 4px 0;" />tulis teks disini</div>
Keterangan :
- Nilai atribut Style=”float:left” dipakai untuk menentukan posisi gambar disebelah kiri, ganti kata “left” dengan kata “right” untuk menentukan letak gambar disebelah kanan.
- Nilai atribut style="text-align:justify;" dipakai untuk merapihkan posisi kanan dan kiri teks agar sejajar rata, tidak digunakan juga tidak apa2
- Margin 0=atas gambar, 8=kanannya, 4= bawahnya, 0=kirinya di pakai untuk memisahkan jarak antara teks dengan gambar agar tidak menempel / terlalu dekat
- Atribut width:75% dipakai untuk merubah ukuran lebar teks dan gambar. memperkecil atau memperbesar bila tidak dipakai maka ukuran lebar kembali ke pengaturan default
- Untuk memberi ruang pada teks disebelah gambar, tentu ukuran lebar gambar (width) harus dikecilkan. Seberapa kecil tergantung tema yang digunakan.
