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=”http://annunaki.files.wordpress.com/2011/09/fawnia27_legcrossover1sm.jpg” width=”125″ height=”125″ /></td>
<td><img src=”http://annunaki.files.wordpress.com/2011/09/fawnia27_legcrossover2sm.jpg” width=”125″ height=”125″ /></td>
<td><img src=”http://annunaki.files.wordpress.com/2011/09/fawnia27_legcrossover3sm.jpg” width=”125″ height=”125″ /></td>
<td><img src=”http://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:

Rider Tua

inget umur mbah !

update dari masbro Jackysan:

Nambanih dikit boleh ya om… Hehhe
Bisa juga dengan membuat tabel kosong di ms word kemudian copas ke artikel, baru ntr disono tambahin gambar….