Skip to content Skip to sidebar Skip to footer

ads.header2

Cara Membuat Tampilan Grid Gambar Sejajar di Postingan Blogger Blogspot

cara membuat gambar sejajar di postingan blog
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. 

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.
Qowim Musthofa
Qowim Musthofa Dosen IIQ An-Nur Yogyakarta Fakultas Ushuluddin Prodi Ilmu Hadis

Post a Comment for "Cara Membuat Tampilan Grid Gambar Sejajar di Postingan Blogger Blogspot"