Cara Menampilkan Gambar Berjajar pada Postingan

Assalamu'alaikum...

Mayasa©. Setelah kita mempelajari cara menampilkan/ membuat tabel pada postingan yang lalu, maka pada postingan kali ini saya akan menguraikan cara menampilkan gambar secara berjajar dipostingan blog. Bagi teman-teman yang sudah ahli saya mohon maaf karena memposting ini. Tapi bagi anda yang belum tahu atau masih mengalami kesulitan untuk membuat gambar berjajar di postingan blog seperti gambar berikut ini, dapat anda pelajari disini.

Cara membuatnya sangat mudah, jika anda perhatikan kode berikut mirip dengan saat kita membuat tabel. Perbedaannya adalah kita hanya menggunakan perintah <td>...</td> yakni perintah untuk membuat kolom.

Setelah anda login dan siap membuat postingan, copas kode dibawah ini pada Mode Edit HTML ingat bukan pada Mode Compose.

<table><tr>

<td><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMdnxaHIZ6Kcurekvf7yovtSAmnW__lx3Q8e-t8vp3GSy9yOS2XZRIPirHI9Ulev0XSCfFdpu6OG4ZgA3uZ9ILkeBQZIJ4ZIB2TvP_r0RaswtpnkUSYrmNqxnBrNYa9bxyHCCw1ZTLwpHq/s300/BLINK-BLINK.gif" /></td>

<td><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMdnxaHIZ6Kcurekvf7yovtSAmnW__lx3Q8e-t8vp3GSy9yOS2XZRIPirHI9Ulev0XSCfFdpu6OG4ZgA3uZ9ILkeBQZIJ4ZIB2TvP_r0RaswtpnkUSYrmNqxnBrNYa9bxyHCCw1ZTLwpHq/s300/BLINK-BLINK.gif" /></td>

</tr></table>

Kode di atas adalah contoh untuk menampilkan 2 gambar berjajar. Jika anda ingin menambahnya, cukup anda tambahkan kode berikut ini

<td><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMdnxaHIZ6Kcurekvf7yovtSAmnW__lx3Q8e-t8vp3GSy9yOS2XZRIPirHI9Ulev0XSCfFdpu6OG4ZgA3uZ9ILkeBQZIJ4ZIB2TvP_r0RaswtpnkUSYrmNqxnBrNYa9bxyHCCw1ZTLwpHq/s300/BLINK-BLINK.gif" /></td>

Untuk membuat gambarnya rata tengah seperti gambar di atas maka tambahkan kode <center> sebelum kode HTML dan </center> sesudah kode HTML sehingga menjadi seperti berikut ini

<center>
<table><tr>
<td><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMdnxaHIZ6Kcurekvf7yovtSAmnW__lx3Q8e-t8vp3GSy9yOS2XZRIPirHI9Ulev0XSCfFdpu6OG4ZgA3uZ9ILkeBQZIJ4ZIB2TvP_r0RaswtpnkUSYrmNqxnBrNYa9bxyHCCw1ZTLwpHq/s300/BLINK-BLINK.gif" /></td>
<td><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMdnxaHIZ6Kcurekvf7yovtSAmnW__lx3Q8e-t8vp3GSy9yOS2XZRIPirHI9Ulev0XSCfFdpu6OG4ZgA3uZ9ILkeBQZIJ4ZIB2TvP_r0RaswtpnkUSYrmNqxnBrNYa9bxyHCCw1ZTLwpHq/s300/BLINK-BLINK.gif" /></td>

</tr></table>  
</center>

Ganti tulisan yang berwarna merah dengan kode gambar anda.

Berikut contoh kode gambar yang sederhana

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMdnxaHIZ6Kcurekvf7yovtSAmnW__lx3Q8e-t8vp3GSy9yOS2XZRIPirHI9Ulev0XSCfFdpu6OG4ZgA3uZ9ILkeBQZIJ4ZIB2TvP_r0RaswtpnkUSYrmNqxnBrNYa9bxyHCCw1ZTLwpHq/s300/BLINK-BLINK.gif" />

Gantilah tulisan warna biru ganti dengan URL gambar anda masing-masing.

Bagaimana, mudah bukan. Selamat mencoba.

Semoga bermanfaat, jangan lupa mengunjungi tutorial blog yang lain.

Wassalamu'alaikum... 

source