Lompat ke konten Lompat ke sidebar Lompat ke footer

Cara Membuat 2 Gambar Berdampingan di Artikel Blog

Kali ini, izinkan saya berbagi tutorial bagaimana caranya membuat dua gambar berdampingan di artikel blogger. Karena biasanya, cara ini diterapkan di blog-blog yang berjualan online seperti jualan baju, celana, produk kecantikan, template dan sebagainya.

Cara Membuat 2 Gambar Berdampingan di Artikel Blog

Kode dasar yang dibutuhkan:

<center>
   <table>
     <tr>
      <td> gambar 1 </td>
      <td> gambar 2 </td>
    </tr>
  </table>
</center>

Perhatikan tag <td> dan </td>. Di tengah-tengah di antara kedua tag ini, kita perlu menambahkan kode:

<a href="LINK TUJUAN" target="_blank" rel="nofollow"><img src="LINK GAMBAR" alt="DESKRIPSI GAMBAR" title="DESKRIPSI GAMBAR"></a>

Sehingga, apabila digabungkan, maka akan menjadi seperti ini:

<center>
  <table>
  <tr>
    <td><a href="LINK TUJUAN" target="_blank" rel="nofollow"><img src="LINK GAMBAR" alt="DESKRIPSI GAMBAR" title="DESKRIPSI GAMBAR"></a></td>
    <td><a href="LINK TUJUAN" target="_blank" rel="nofollow"><img src="LINK GAMBAR" alt="DESKRIPSI GAMBAR" title="DESKRIPSI GAMBAR"></a></td>
  </tr>
  </table>
</center>

Apakah gambar di atas bisa ditambahkan menjadi 3 gambar yang disejajarkan di dalam postingan blog? Bisa. Cukup menjadikannya seperti ini:

<center>
 <table>
  <tr>
   <td> gambar 1 </td>
     <td> gambar 2 </td>
   <td> gambar 3 </td>
  </tr>
 </table>
</center>

Jika gambarnya terlalu besar atau bagaimana, bisa diatur dengan cara menambahkan tag width="250px" dan height="200px". Bisa disesuaikan sesuai keinginan sendiri. Contohnya?

<center>
  <table>
   <tr>
    <td><a href="LINK TUJUAN" target="_blank" rel="nofollow"><img src="LINK GAMBAR" alt="DESKRIPSI GAMBAR" title="DESKRIPSI GAMBAR" width="250px" height="200px"></a></td>
    <td><a href="LINK TUJUAN" target="_blank" rel="nofollow"><img src="LINK GAMBAR" alt="DESKRIPSI GAMBAR" title="DESKRIPSI GAMBAR" width="250px" height="200px"></a></td>
    </tr>
  </table>
</center>

Sebagai tambahan, target="_blank" merupakan kode yang mengartikan bahwa apabila diklik, maka akan membuka tab baru di browser. Sedangkan <center> dan </center>, agar tampilannya merata di tengah.

Download LinkMagz Versi 3.4 Terbaru Premium Gratis 2022Download LinkMagz Versi 3.4 Terbaru Premium Gratis 2022

Demikian tutorial bagaimana caranya membuat dan memasang gambar berdampingan (sejajar) di postingan blogspot.com (blogger.com). Semoga berguna.
Arief Ghozaly
Arief Ghozaly Blogger, Komputer, SEO, Xiaomi POCO, ThinkPad & Pecco #63. https://www.ariefghozaly.web.id/.

Posting Komentar untuk "Cara Membuat 2 Gambar Berdampingan di Artikel Blog"

Kontes Lomba Blog
Kontes Lomba Blog