Putting images side by side part 2

Salam...

Aku ingin menyambung kembali entry aku yang terdahulu tentang bagaimana untuk meletakkan gambar-gambar di dalam entry berkedudukan sebelah-menyebelah dan sebaris. Jika anda ingin membaca kembali entry tersebut sila klik link berikut "Putting Images Side By Side".

Entry ini juga sebagai memenuhi permintaan saudara Akhbaraman untuk penerangan lebih lanjut tentang teknik meletakkan gambar-gambar tersebut.

Lagipun, dengan membuat entry ini dapatlah aku mengurangkan rasa lonely mengenangkan orang yang jauh di mata. Lebih-lebih lagi semalam merupakan hari jadi beliau dan kami tidak dapat menyambutbya bersama-sama...isk3..sedihnya.

Ok, let's rolling...

Sekali lagi aku ingin mengingatkan bahawa untuk memasukkan kod HTML ke dalam entry anda perlu melakukan editing di dalam mode "Edit HTML". Anda perlu klik butang tersebut yang terletak di penjuru kanan atas bersebelahan butang "Compose"

Entry sebelum ini aku memberikan contoh (HTML code) bagaimana meletakkan 2 gambar secara bersebelahan. Contoh tersebut hanyalah sesuatu yang basic. Jika anda perhatikan tiada link untuk setiap gambar yang dipaparkan. So, gambarnya tidak boleh diperbesarkan atau tidak membawa anda ke mana-mana laman web yang berkaitan.

Untuk entry tambahan ini, aku akan menerangkan serba sedikit bagaimana untuk menambah jumlah gambar untuk diletakkan ke dalam entry secara bersebelahan serta meletakkan link yang berkaitan.

Pertamanya, kita perlu tahu dan faham tentang penggunaan table dan kod-kod yang berkaitan. Sila lihat contoh kod HTML di bawah (3 gambar bersebelahan):

<table>
<tbody>

<tr>

<td><img src="http://Link image anda no 1" style="width:190px;height:170px;"/></p></td>
<td><img src="http://Link image anda no 2" style="width:190px;height:170px;"/></p></td>
<td><img src="http://Link image anda no 3" style="width:190px;height:170px;"/></p></td>

</tr>

</tbody>
</table>

Kod "TR" bermaksud Table Row dan jika anda ingin meletakkan beberapa gambar sebaris, anda perlu memulakannya dengan kod tersebut dan mematikan kod tersebut dengan "/TR".

Keduanya, anda perlu tahu alamat link gambar-gambar yang anda ingin letakkan.

Bagaimana jika gambar-gambar tersebut adalah baru dan tidak pernah anda masukkan ke dalam entry anda sebelum ini? Actually, mudah sahaja. Anda upload terlebih dahulu gambar-gambar tersebut ke dalam entry (buat sementara). Anda klik gambar yang anda telah upload tersebut dan select "Edit Link" dan link gambar tersebut akan dipaparkan. Anda copy sahaja alamat link tersebut dan paste ke Notepad. Gambar tersebut kemudiannya anda boleh remove.

Alamat link tersebut anda paste ke kod HTML yang aku paparkan di atas (warna merah).

Sebelum itu, anda juga perlu tahu tentang saiz lebar blog post anda atau Main Wrapper blog. Ini kerana jika anda meletakkan gambar secara sebaris tanpa mengambil kira saiz gambar-gambar dan lebar blog post anda, gambar-gambar tersebut mungkin tidak terpapar sepenuhnya (truncated).

Untuk itu anda perlu menetapkan saiz gambar-gambar yang ingin anda paparkan dengan memasukkan kod HTML seperti contoh di atas (warna biru). Pastikan jumlah "width" jika dicampurkan kesemuanya tidak melebihi saiz lebar blog post anda. Adalah lebih baik anda Preview dahulu entry anda sebelum anda Publish.

Mari lihat contoh di bawah:



Ada masalah?

Ya. Gambar-gambar tersebut tidak boleh di "klik" dan tiada link yang dipaparkan.

Untuk menambahkan link yang berkaitan kita perlu menambahnya di bahagian kod HTML. Sila lihat kembali contoh kod HTML yang hampir sama dengan sebelum ini  tetapi aku telah tambahkan kod untuk gambar-gambar tersebut supaya mempunyai link tersendiri.

<table>
<tbody>
<tr>
<td><a href="http://Link Image anda no 1" target="_blank"><img src="http://Link Image anda no 1" style="width:250px;height:220px;"/></a> </p></td>
<td><a href="http://Link Image anda no 2" target="_blank"><img src="http://Link Image anda no 2" style="width:250px;height:220px;"/></a> </p></td>
<td><a href="http://Link Image anda no 3" target="_blank"><img src="http://Link Image anda no 3" style="width:250px;height:220px;"/></a> </p></td>
</tr>
</tbody>
</table>

Tambahan kod HTML aku telah highlight dengan warna merah.

Sila lihat kembali contoh gambar di bawah:



Bagaimana?

Ok. Itu sahaja caranya.

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.