Cara membuat gambar menyamping di html

Ini dia Cara Membuat Gambar Berdampingan Sejajar di Blog. Kemarin sempet nyari-nyari script kode HTML untuk membuat gambar sejajar atau berdampingan di blog atau postingan yang ingin dibuat. Setelah googling gak ketemu karena kata kuncinya kurang tepat mungkin. Sengaja saya save kode script HTML nya di blog mr-yellows barang kali sewaktu-waktu membutuhkan script ini dan ternyata mudah sekali.

Dalam setiap postingan di blog tentunya kita ingin menyisipkan beberapa gambar. Jika berbaris atau berjajar ke bawah kelihatannya kurang menarik walau pun memang masalah ini (bukan masalah sih), persoalan mengenai penempatan gambar disesuaikan saja dengan kebutuhannya. baik itu mau sejajar kesamping atau pun mengurut ke bawah sah-sah saja.

Namun dalam beberapa postingan yang memang mengharuskan ada image yang banyak alangkah bagusnya bila dilihat 2 - 3 jajar atau lebih agar pengunjung pun enak gitu lihatnya rapi dan gak berantakan. Seperti contoh pada gambar situs mobil yang memiliki beberapa fitur dengan gaya tampilan tampak depan, tampak samping atau tampak belakang dan ini sangat bagus jika gambar-gambarnya disejajarkan atau berdampingan saja.

Bagaimana sih cara membuat gambar berdampingan sejajar di blog agar postingan gambar terlihat rapi. Ini dia kode HTML-nya :

<table><tr>
<td>Gambar 1</td>
<td>Gambar 2 </td>
</tr></table>

<table><tr>
<td>Gambar 1</td>
<td>Gambar 2</td>
<td>Gambar 3</td>
</tr></table>

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

<p ><img src=”URL gambar” style=”float:left;” />tulis teks disini</p>

<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

<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.

Apa itu excerpt?

Excerpt post adalah sebuah kutipan atau ringkasan dari sebuah tulisan artikel atau postingan yang dibuat sendiri dan muncul di halaman utama dengan disertai link yang menuju ke isi post secara keseluruhan.

Excerpt sifatnya opsional (boleh digunakan boleh tidak) dan bebas, dalam arti setelah kita membuat satu tulisan kita bebas untuk membuat sebuah ulasan singkat mengenai inti dari tulisan tersebut. Dan jika tidak digunakan, paragraf pertama tulisan tersebut yang otomatis akan menggantikan.

Cara membuat excerpt

WordPress sudah mendukung fitur excerpt ini begitu juga dengan my opera blog, cuma di my opera istilahnya sedikit berbeda yaitu “post intro”. Untuk membuat excerpt buatlah sebuah postingan terlebih dahulu di post editor setelah itu lihat dibawahnya ada menu excerpt dengan teks area kosong, isi dengan kalimat anda sendiri yang menggambarkan isi postingan tadi.

Jika tidak ada coba klik menu screen option di pojok kanan atas dan pastikan kata “excerpt” dicentang kotaknya. Untuk informasi lebih lanjut lihat halaman bantuan wordpress untuk excerpt

Demikian sedikit tutorial tentang cara membuat posisi gambar disamping teks dan penerapannya dalam excerpt post semoga bermanfaat.

Bagaimana cara menampilkan gambar di HTML?

Apa HTML yang benar untuk menyisipkan gambar latar belakang?

Apa nama atribut yang digunakan untuk mengatur tampilan gambar menjadi sebelah kiri teks?

3 atribut apakah yang digunakan jika suatu gambar gagal ditampilkan?