Cara Membuat Tampilan Grid Gambar Sejajar di Postingan Blogger Blogspot

qowim.net

Blogspot merupakan platform paling lengkap dalam pandangan saya, jika kita bisa mengoperasikannya dengan baik, meskipun dengan koding-koding sederhana. Termasuk tentang cara membuat tampilan grid atau gambar sejajar di postingan blogger blogspot. Bagi saya, iti salah satu kelebihan blogspot daripada wordpress.

Tampilan gambar secara grid ini biasanya digunakan untuk menyejajarkan gambar before-after atau rangkaian/proses kejadian.

Untuk membuat tampilan grid atau gambar sejajar di postingan hanya memerlukan sedikit saja pemahaman tentang tag tabel. 

Ada 3 macam dalam membuat gambar grid di postingan blogger. Pertama hanya gambar saja, kedua gambar dan tautan yang dituju atau hyperlink, ketiga jika berkehendak untuk menambahkan caption (keterangan foto).

Oke, kita bahas satu-satu. Langsung praktik saja biar makin mudah dipahami.

#1 Gambar Sejajar Saja

• Pegi ke postingan baru 
• Klik gambar pensil di bagian kiri atas di bawah judul.
• Pilih tampilan HTML
• Salin kode di bawah ini lalu tempel

  <table>
  <tbody><tr>
  <td><img src="URL Gambar 1 di Sini"</td>
  <td><img src="URL Gambar 2 di Sini"</td>
  </tr>
  </tbody></table>

  Keterangan
  Tempel alamat URL gambar yang anda inginkan. Jika ingin menambah gambar menjadi sejajar 3 atau lebih, maka caranya tinggal menambahkan kode pembuka <td>alamat url lalu ditutup </td>
  Hasilnya kurang lebih seperti ini

#2 Gambar Sejajar dengan Hyperlink

• Ikuti panduan nomor 1
• Salin kode di bawah ini lalu tempel

  <table>
  <tr>
  <td> <a href="Target Situs" target="_blank" rel="nofollow" width="250px" height="200px"><img src="URL Gambar 1"</a> </td>
  <td> <a href="Target Situs" target="_blank" rel="nofollow"><img src="URL Gambar 2"</a> </td>
  </tr>
  </table>

  Keterangan
  Target situs merupakan alamat url yang dituju jika gambar tersebut diklik. Kode target="_blank" merupakan bahasa pemrogaman ketika Anda klik maka akan membukan tab baru. 
  Hasilnya akan seperti ini
  Silakan klik salah satu gambar di atas. Maka akan menuju pada tautan yang sudah saya sisipkan di sana.

#3 Gambar Sejajar dengan Caption

• Ikuti panduan nomor 1 
• Salin kode di bawah ini lalu tempel

  <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>

  Keterangan
  Silakan isi tautan/URL di tanda petik dan isi saja deskripsi gambar/caption yang diinginkan.

Sudah, ya. Segitu aja tutorialnya. Mudah, kan? Begitulah caranya membuat tampilan grid atau gambar sejajar di postingan blogspot. Sangat mudah dan tidak ribet.