Cara Menciptakan 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 ihwal bagaimana cara menampilkan gambar berdampingan di dalam postingan blog. Bisa juga ditampilkan di halaman statis (Static Page) blog.

Yang kau butuhkan hanyalah atribut HTML menyerupai <table>, <td> dan <tr> yang mengatur tata letak gambar biar dapat berdampingan (sejajar) di Content.

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

Cara memasangnya menyerupai berikut:

• Buat dulu artikel hingga selesai
• Setelahnya ambil URL dari gambar tersebut (boleh dari mana saja)
• Masuk ke mode HTML (bukan Compose)
• Lalu praktekan sebagaimana instruksi 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 memakai beberapa atribut penting lainnya menyerupai 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=" Trik Cara Membuat dan Menampilkan Gambar Sejajar Cara Membuat Gambar Sejajar 2, 3, 4 di Postingan Blog" title="Cara Membuat Gambar Sejajar 2, 3, 4 di Postingan Blog"></a> </td>
<td> <a href="Target Situs" target="_blank" rel="nofollow"><img src="Disini-Link-Gambar" alt=" Trik Cara Membuat dan Menampilkan Gambar Sejajar Cara Membuat Gambar Sejajar 2, 3, 4 di Postingan Blog" title="Cara Membuat Gambar Sejajar 2, 3, 4 di Postingan Blog"></a> </td>
</tr>
</table>

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

<a href="Target Situs" target="_blank" rel="nofollow" width="250px" height="200px"><img src="Disini-Link-Gambar" alt=" Trik Cara Membuat dan Menampilkan Gambar Sejajar Cara Membuat Gambar Sejajar 2, 3, 4 di Postingan Blog"color: red;">Deskripsi Gambar" title="Cara Membuat Gambar Sejajar 2, 3, 4 di Postingan Blog"color: red;">Deskripsi Gambar"></a>

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

Jika kau tidak membutuhkan fitur yang ada di atas ini, maka hapus instruksi ini:

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

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

<img src="Disini-Link-Gambar" alt=" Trik Cara Membuat dan Menampilkan Gambar Sejajar Cara Membuat Gambar Sejajar 2, 3, 4 di Postingan Blog"color: red;">Deskripsi Gambar" title="Cara Membuat Gambar Sejajar 2, 3, 4 di Postingan Blog"color: red;">Deskripsi Gambar" width="250px" height="200px">

...dengan praktek menyerupai ini:

<table>
<tr>
<td> <img src="Disini-Link-Gambar" alt=" Trik Cara Membuat dan Menampilkan Gambar Sejajar Cara Membuat Gambar Sejajar 2, 3, 4 di Postingan Blog" title="Cara Membuat Gambar Sejajar 2, 3, 4 di Postingan Blog"> </td>
<td> <img src="Disini-Link-Gambar" alt=" Trik Cara Membuat dan Menampilkan Gambar Sejajar Cara Membuat Gambar Sejajar 2, 3, 4 di Postingan Blog" title="Cara Membuat Gambar Sejajar 2, 3, 4 di Postingan Blog"> </td>
</tr>
</table>

Maka balasannya kurang lebih akan menyerupai ini:


Di atas ialah 2 gambar sejajar di dalam postingan blog.


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

Bagaimana? Cukup mudah, kan?
Sumber http://addbloggerthemes.blogspot.com

Share this post