Kebiasaannya gambar-gambar di dalam entry kita diletakkan secara satu persatu dan ke bawah. Akibatnya dan oleh kerana terlalu banyak gambar-gambar yang dipaparkan, entry tersebut menjadi panjang.
Bagi mereka yang mempunyai mouse yang ada scroll button agak mudah juga untuk melihat atau membaca entry tersebut, tetapi bagaimana pula bagi mereka yang tiada mouse dan hanya bergantung kepada arrow key? Jenuh juga untuk melihat atau membaca entry sebegitu yang sayup-sayup memanjang ke bawah...hehehe.
Pernahkah anda terfikir bagaimanakah caranya untuk meletakkan gambar-gambar di dalam post anda secara bersebelahan?
Lihat contoh di bawah:
 |  |
Menarik bukan?
Bagaimana pula dengan yang ini?
 |  |  |
Dan yang ini pulak?
 |  |
 |  |
 | |
At least, jika kita ingin meletakkan gambar-gambar yang banyak, entry kita tidaklah panjang sangat. Betul tak?
Bagamanakah caranya?
Rahsianya ialah dengan menggunakan "table" dan untuk itu anda perlu tahu kod-kod HTML yang berkaitan dengan table. Untuk itu aku kongsikan ilmu ini dengan anda. Sila lihat dan gunakanlah HTML code di bawah:
<center><table><tbody>
<tr><td><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5wIHl5nJLKUlCVLjxEeLHeUD8urARV4XdY2I7WS0T20qm70hEFkFANg4aU9d09Qml7w0Uj_Ym2JqpWKyO61FLfnWXF6sLg2gtjQVJsY1B3nLC8Oc_gBKJUyoUSLN0dcpGtnN6urbCeg/s1600/hug_a_cat.jpg" style="height: 250px; width: 250px;" /> </td> <td><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpF4VAoFTHz7iq6azuDYYHyuxofYFHzi2_VoQH0_uFT8Vs3zdFP2OohWEuqqMXBiaGuUT1PGOgd6lV-PxAdLBtE-PVCUIkCaLTU70sz0J9alTrEx8E5SMsWF9qTZkccU4Zw0UN0xmVow/s1600/5307214270_014d951482.jpg" style="height: 250px; width: 250px;" /> </td></tr>
</tbody></table>
</center>
<tr><td><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5wIHl5nJLKUlCVLjxEeLHeUD8urARV4XdY2I7WS0T20qm70hEFkFANg4aU9d09Qml7w0Uj_Ym2JqpWKyO61FLfnWXF6sLg2gtjQVJsY1B3nLC8Oc_gBKJUyoUSLN0dcpGtnN6urbCeg/s1600/hug_a_cat.jpg" style="height: 250px; width: 250px;" /> </td> <td><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpF4VAoFTHz7iq6azuDYYHyuxofYFHzi2_VoQH0_uFT8Vs3zdFP2OohWEuqqMXBiaGuUT1PGOgd6lV-PxAdLBtE-PVCUIkCaLTU70sz0J9alTrEx8E5SMsWF9qTZkccU4Zw0UN0xmVow/s1600/5307214270_014d951482.jpg" style="height: 250px; width: 250px;" /> </td></tr>
</tbody></table>
</center>
Anda perlu gantikan link berwarna merah dengan link untuk gambar-gambar anda. Bagi memastikan size gambar yang dipaparkan adalah sama anda perlu menetapkannya dengan memasukkan text (kod) berwarna biru.
Aku harap, maklumat ini bermanafaat kepada anda. Bagi anda yang telahpun tahu bagaimana caranya, anggap sahaja entry ini sebagai refresher post atau tinggalkan sahaja dan silakan baca artikel lain.
Sekian.
Subscribe to email feed
Bagus....untuk blogger yang baru ..mcm saya. Terima kasih
Kod untuk 3 gambar sebaris camne ye Abang Long...
Salam M dan Akhbaraman..thanx sudi komen. Bukan nak tunjuk pandai tapi nak share ilmu kpd yg memerlukannya. Saya akan buat satu lg post tentang ini..
salam. tq. sesuai tuk saya yg baru belajar. :-)
Salam Mamafaris..thanx sudi komen. Semoga artikel ini dapat membantu. Ada tambahan info lagi di entry berikutnya.