Cara Membuat Gambar Sejajar 2, 3, 4 di Postingan Blog

Tutorial: Tips & Trik Cara Membuat dan Menampilkan Gambar Sejajar (Berdampingan) Dua, Tiga, Empat Kolom di Postingan (Artikel) Blog

Tutorial Blogger kali ini tentang bagaimana cara menampilkan gambar berdampingan di dalam postingan blog. Bisa juga ditampilkan di halaman statis (Static Page) blog.

Yang kamu butuhkan hanyalah atribut HTML seperti <table>, <td> dan <tr> yang mengatur tata letak gambar agar bisa berdampingan (sejajar) di Content.

Cara Membuat Gambar Sejajar 2, 3, 4 di Postingan Blog

Cara memasangnya seperti berikut:

• Buat dulu artikel sampai selesai
• Setelahnya ambil URL dari gambar tersebut (boleh dari mana saja)
• Masuk ke mode HTML (bukan Compose)
• Lalu praktekan sebagaimana kode atribut HTML di bawah ini

Kode atribut HTML yang kita gunakan adalah:

<table>
<tr>
<td>URL Gambar 1 di Sini</td>
<td>URL Gambar 2 di Sini</td>
</tr>
</table>

Karena sifatnya URL, maka praktek yang harus dilakukan menggunakan beberapa atribut penting lainnya seperti penerapan di bawah ini:

<table>
<tr>
<td> <a href="Target Situs" target="_blank" rel="nofollow" width="250px" height="200px"><img src="Disini-Link-Gambar" alt="Deskripsi Gambar" title="Deskripsi Gambar"></a> </td>
<td> <a href="Target Situs" target="_blank" rel="nofollow"><img src="Disini-Link-Gambar" alt="Deskripsi Gambar" title="Deskripsi Gambar"></a> </td>
</tr>
</table>

Catatan: URL Gambar 1 di Sini (kode pertama di atas) saya mengubahnya dengan kode ini:

<a href="Target Situs" target="_blank" rel="nofollow" width="250px" height="200px"><img src="Disini-Link-Gambar" alt="Deskripsi Gambar" title="Deskripsi Gambar"></a>

Kode href="Target Situs" adalah apabila gambar di klik akan mengarah suatu tempat, sedangkan kode target="_blank" apabila di klik akan membuka halaman baru (tanpa menghapus halaman sebelumnya), sedangkan kode rel="nofollow" merupakan kebalikan dari Link Dofollow.

Jika kamu tidak membutuhkan fitur yang ada di atas ini, maka hapus kode ini:

<a href="Target Situs" target="_blank" rel="nofollow">

...dan kode penutupnya yakni </a> hingga menyisakan:

<img src="Disini-Link-Gambar" alt="Deskripsi Gambar" title="Deskripsi Gambar" width="250px" height="200px">

...dengan praktek seperti ini:

<table>
<tr>
<td> <img src="Disini-Link-Gambar" alt="Deskripsi Gambar" title="Deskripsi Gambar"> </td>
<td> <img src="Disini-Link-Gambar" alt="Deskripsi Gambar" title="Deskripsi Gambar"> </td>
</tr>
</table>

Maka hasilnya kurang lebih akan seperti ini:


Di atas adalah 2 gambar sejajar di dalam postingan blog.


...sedangkan di atas adalah 3 gambar sejajar di dalam postingan blog.

Bagaimana? Cukup mudah, kan?

Labels: Tutorial Blogger

Thanks for reading Cara Membuat Gambar Sejajar 2, 3, 4 di Postingan Blog. Please share this article.

Share this post