Cara Membuat Gambar Berjajar di WordPress.com

2 Oktober 2011

Cara Membuat Gambar Thumbnails dalam Kotak Berjajar


posisi 1	posisi 2	posisi 3	kembali ke posisi 1

gambar dari artikel ini

Untuk membuat gambar berjajar seperti di atas tidak susah kok. Sobat hanya perlu memanfaatkan fungsi tabel saja. Caranya adalah: buat postingan baru lalu masuk ke HTML Mode. Struktur kode HTML-nya kira-kira seperti ini:

<table border="1"> <tbody> <tr> <td>linkgambar1</td> <td>linkgambar2</td> <td>linkgambar3</td></tr> <tr> <td>namagambar1</td> <td>namagambar2</td> <td>namagambar3</td> </tr> </tbody> </table>

Saya berikan contoh kode HTML dari gambar berjajar diatas yah:

<table border=”1″>
<tbody>
<tr>
<td><img src=”https://annunaki.files.wordpress.com/2011/09/fawnia27_legcrossover1sm.jpg” width=”125″ height=”125″ /></td>
<td><img src=”https://annunaki.files.wordpress.com/2011/09/fawnia27_legcrossover2sm.jpg” width=”125″ height=”125″ /></td>
<td><img src=”https://annunaki.files.wordpress.com/2011/09/fawnia27_legcrossover3sm.jpg” width=”125″ height=”125″ /></td>
<td><img src=”https://annunaki.files.wordpress.com/2011/09/fawnia27_legcrossover1sm.jpg” width=”125″ height=”125″ /></td>
</tr>
<tr>
<td>posisi 1</td>
<td >posisi 2</td>
<td>posisi 3</td>
<td>kembali ke posisi 1</td>
</tr>
</tbody>
</table>

Catatan:

yang dibold biru adalah link dari gambar yang akan dibuat berjajar
yang dibold ungu adalah nama dari gambar yang ada di bawah gambar
yang dibold merah adalah besar dari sebuah gambar. Ini harus menjadi perhatian sobat karena jika ukuran gambar tsb amat besar misalnya 400 x 400 maka besar kemungkinan tidak bisa dibuat berjajar untuk 2 gambar atau lebih (gambar lainnya akan “hilang” alias tidak nampak di postingan). Pada contoh ini saya menggunakan ukuran 125 x 125

Gampang sekali kan? Silahkan dicoba coba di blog sobat sendiri. Selamat mencoba!

sumber: