Cara meletakkan gambar sebelah menyebelah dalam post dan page

Eh, tiba-tiba ada post baru 😅😅😅

Tiba-tiba mood rajin melanda, so terpanggil untuk melawat blog sendiri yang dah lama bersawang 😩

So, bila melawat blog ni, ada sahajalah yang nak diubah. Kali ini Mama cuba belajar susun gambar di page School Holidays dan Special Events Remembered agar lebih tersusun dan kemas guna kod html. Mama create this post supaya lepas ni senang buat rujukan.

<div style="float: left;">
<a href="url pautan 1" imageanchor="1" style="margin-left: 3em; margin-right: 1em;"><img border="0" height="320" src="url gambar 1" width="224" /></a>
<div style="font-size: large; line-height: 15px; padding-left: 15px;">
Teks gambar baris 1
teks baris 2
teks baris 3</div>
</div>

<div style="float: left;">
<a href="url pautan 2" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="url gambar 2" width="224" /></a>
<div style="font-size: large; line-height: 15px; padding-left: 15px;">
Teks gambar baris 1
teks baris 2
teks baris 3</div>
</div>

<div style="float: left;">
<a href="url pautan 3" imageanchor="1" style="margin-left: 1em; margin-right: 3em;"><img border="0" height="320" src="url gambar 3" width="224" /></a>
<div style="font-size: large; line-height: 15px; padding-left: 15px;">
Teks gambar baris 1
teks baris 2
teks baris 3</div>
</div>

<div style="clear: both;"></div>

Inilah kod html yang boleh digunakan untuk menyusun gambar sebelah menyebelah dengan kemas dan tersusun agar galeri pages kita tidak berselerak. Kod html ini sesuai untuk gambar yang kita nak letak link url ke pautan post atau page lain. 

Untuk saiz gambar boleh ubah je saiz "height" dan "width" tu ikut kesesuaian. Untuk jarakkan kedudukan gambar boleh ubah saiz margin-left dan margin-right tu.

Kalau nak tambah baris, untuk jarakkan gambar atas dan bawah, boleh tambah kod html ini : <br />

Kalau nak ubah jarak di Compose view, boleh tekan "enter" je..

Kalau nak letak susun gambar sebelah menyebelah TANPA pautan url link, boleh guna kod html yang ini 👇

<table style="width:100%">
  <tr>
    <td><img src="URL_GAMBAR_1" style="width:100%"></td>
    <td><img src="URL_GAMBAR_2" style="width:100%"></td>
  </tr>
</table>

Ini wajah baru page School Holidaysss!!! yang susunan gambarnya lebih tersusun. Terlupa nak screenshot paparan sebelum diubah penampilannya. 😅

Tapiiiiiiii.... kalau buka kat handphone, paparan mobile, berselerak jugaaakk... hahahaaaa 😆😆😆

Mama juga dah ubah outer-wrapper di page Atif Raihan. Letak skin yang bertema bola sepak. 😉

Page Atif Raihan yang mama dah tukar outer-wrapper dan content-wrapper dengan blog skin bertema bola sepak. Ada rumput hijau, ada pemain bola sepak tu.. 😃