Cara Membuat Gambar Tumbnail dalam Kotak Berjajar

Logo Berwarna Logo Hitam Putih

Contoh: gambar di blog 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 di atas yah:

<table border=”1″>
<tbody>
<tr>
<td><a href=”https://abusyauqitamim.files.wordpress.com/2011/11/uniski-colour.jpg”><img title=”UNISKI (Colour)” src=”https://abusyauqitamim.files.wordpress.com/2011/11/uniski-colour.jpg?w=214&amp;h=215&#8243; alt=”” width=”214″ height=”215″ /></a></td>
<td><a href=”https://abusyauqitamim.files.wordpress.com/2011/11/uniski-bw.jpg”><img title=”UNISKI (BW)” src=”https://abusyauqitamim.files.wordpress.com/2011/11/uniski-bw.jpg?w=206&amp;h=206&#8243; alt=”” width=”206” height=”206” /></a></td>
</tr>
<tr>
<td>Logo Berwarna</td>
<td>Logo Hitam Putih</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 kan! Silahkan coba di blog sobat sendiri. Selamat mencoba!

 

 

Sumber: http://annunaki.wordpress.com

Diakses pada tanggal 30 November 2011 pukul 18.43 WIB

Tinggalkan komentar