Cara membuat posisi gambar di samping teks

Untuk membuat sebuah tulisan menjadi menarik, memberi tambahan gambar adalah salah satu caranya disamping memperkuat nilai SEOnya dari segi traffic, karena tulisan yang berisi gambar tidak hanya akan ditemukan melalui penelusuran web tapi juga melalui penelusuran gambar.

Agar tak terkesan monoton dalam pemasangan gambar (begitu-begitu aja) kita bisa memodifikasinya dengan merubah letak gambar yang berbeda-beda disetiap tulisan. seperti gaya tulisan di majalah-majalah dan situs-situs berita misalnya. Oleh sebab itu Topik kali ini kita akan membahas cara membuat posisi gambar ilustrasi berada disamping awal teks/tulisan/postingan, caranya lumayan cukup sederhana, hanya tinggal menambahkan beberapa kode HTML (tag, atribut) ke dalam gambar dan teks tersebut, dan bisa di lakukan dengan beberapa cara. Meski begitu namanya manusia tempatnya lupa dan salah, maka saya dokumentasikan disini.

Cara membuat gambar ilustrasi berada di sisi kiri atau kanan awal teks

Ini adalah contoh gambar 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>

Ini adalah contoh gambar 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>

---

Membuat posisi gambar disamping teks dengan beberapa modifikasi

Modifikasi yang dimaksud adalah penambahan warna background dan garis, pengaturan ulang jarak antara teks dengan gambar dsb

Dan ini adalah contoh gambar KETIGA yang posisinya berada di samping kiri teks menggunakan tag <div>, atribut dasar style="float:left;" pada gambar dan beberapa tambahan modifikasi sebagaimana telah dijelaskan. 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, untuk meletakan gambar di tengah-tengah teks saya juga belum bisa
• 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 seperti contoh gambar 1 dan 2
• Untuk memberi ruang pada teks
  disebelah gambar, tentu ukuran lebar gambar (width) harus dikecilkan. Seberapa kecil tergantung tema yang digunakan.
• Kode tersebut sudah diuji cobakan pada WordPress, Blogspot dan Mywapblog dan berfungsi dengan baik, dan insya allah semua elemen yang digunakan sesuai dengan standar HTML5

Pemasangan gambar dengan kode tersebut bisa juga dipasang pada excerpt post sehingga pembaca tidak hanya akan membaca sedikit ringkasan dari sebuah postingan namun bisa melihat gambar ilustrasinya juga.

  sekian