Kode Membuat Tampilan Galeri Foto Grid Sederhana dengan Efek Zoom (Lightbox)

4/07/2026
Kode Membuat Galeri Foto Grid dengan Efek Zoom Lightbox di Blogger

Galeri foto grid di Blogger dapat menjadi solusi praktis untuk menampilkan banyak gambar dalam satu artikel tanpa membuat halaman terlalu panjang. Daripada menampilkan foto secara berurutan dari atas ke bawah, Anda dapat menyusunnya dalam bentuk grid yang lebih rapi dan memanfaatkan efek zoom atau lightbox ketika gambar diklik.

Teknik ini cocok digunakan untuk berbagai kebutuhan, seperti galeri dokumentasi kegiatan, portofolio, artikel wisata, foto produk, dokumentasi masjid, kegiatan sekolah, maupun konten lainnya yang membutuhkan banyak gambar.

Menariknya, galeri foto seperti ini dapat dibuat menggunakan HTML, CSS, dan JavaScript tanpa harus memasang plugin galeri tambahan. Pada tutorial ini, Anda akan mempelajari cara membuat galeri foto grid sederhana di Blogger lengkap dengan efek pembesaran gambar atau lightbox.

Apa Itu Galeri Foto Grid dan Lightbox?

Galeri foto grid adalah tata letak gambar yang disusun dalam beberapa kolom sehingga beberapa foto dapat ditampilkan dalam satu area secara lebih ringkas.

Sementara itu, lightbox adalah fitur yang memungkinkan gambar diperbesar ketika pengunjung mengklik atau menyentuh gambar. Biasanya, gambar akan ditampilkan di atas halaman menggunakan lapisan atau overlay sehingga pengunjung dapat melihat gambar dalam ukuran yang lebih besar tanpa harus berpindah ke halaman lain.

Dalam tutorial ini, CSS digunakan untuk membuat susunan grid dan mengatur tampilan gambar. JavaScript digunakan untuk menangani interaksi ketika gambar diklik dan menampilkan gambar tersebut dalam tampilan lightbox.

Manfaat Menggunakan Galeri Foto Grid di Blogger

Menggunakan galeri grid dapat memberikan tampilan yang lebih terorganisir, terutama ketika sebuah artikel memiliki banyak dokumentasi foto.

  • Menghemat ruang vertikal karena beberapa foto dapat ditampilkan dalam satu baris.
  • Membuat artikel terlihat lebih rapi dan tidak dipenuhi gambar yang tersusun panjang ke bawah.
  • Memudahkan pengunjung melihat banyak foto dalam satu area.
  • Memberikan efek interaktif melalui fitur zoom atau lightbox.
  • Cocok untuk perangkat mobile jika grid dibuat menggunakan CSS responsif.
  • Tidak membutuhkan plugin tambahan karena fitur dibuat menggunakan kode HTML, CSS, dan JavaScript.

Walaupun galeri dapat membuat tampilan lebih menarik, tetap perhatikan ukuran file gambar. Gambar dengan ukuran terlalu besar dapat meningkatkan waktu pemuatan halaman, terutama pada perangkat dengan koneksi internet yang lambat.

Contoh Penggunaan Galeri Foto Grid

Misalnya Anda memiliki blog perjalanan wisata dan ingin menampilkan beberapa foto dari sebuah destinasi. Jika setiap foto diletakkan dalam satu baris, artikel akan menjadi sangat panjang.

Dengan menggunakan galeri foto grid, beberapa gambar dapat ditampilkan dalam beberapa kolom. Pengunjung dapat melihat seluruh koleksi foto secara ringkas, kemudian mengklik salah satu gambar untuk melihatnya dalam ukuran lebih besar.

Konsep yang sama juga dapat diterapkan untuk:

  • Galeri foto masjid.
  • Dokumentasi kegiatan sekolah.
  • Portofolio desain.
  • Foto produk.
  • Dokumentasi acara.
  • Galeri wisata.
  • Dokumentasi proyek.
  • Portofolio fotografi.

Struktur Galeri Foto yang Akan Dibuat

Galeri pada tutorial ini terdiri dari tiga bagian utama:

  1. CSS untuk membuat susunan grid dan mengatur tampilan galeri.
  2. HTML sebagai tempat untuk memasukkan gambar.
  3. JavaScript untuk membuat efek lightbox ketika gambar diklik.

Dengan memisahkan ketiga bagian tersebut, kode menjadi lebih mudah dipahami dan dapat dimodifikasi sesuai kebutuhan.

Kode CSS Galeri Foto Grid Blogger

Bagian pertama adalah CSS yang digunakan untuk membuat susunan gambar menjadi grid responsif. Kode berikut menggunakan CSS Grid sehingga jumlah kolom dapat menyesuaikan lebar area yang tersedia.

<style>
.wadah-galeri-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 15px;
  margin: 25px 0;
}

.foto-dalam-galeri {
  width: 100%;
  height: 150px;
  object-fit: cover;
  border-radius: 8px;
  cursor: zoom-in;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.foto-dalam-galeri:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 12px rgba(0,0,0,0.2);
}

#layar-gelap-lightbox {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999999;
  cursor: zoom-out;
  opacity: 0;
  animation: munculTerang 0.3s forwards;
}

#layar-gelap-lightbox img {
  max-width: 90%;
  max-height: 90vh;
  border-radius: 6px;
  box-shadow: 0 5px 25px rgba(0,0,0,0.5);
}

@keyframes munculTerang {
  to {
    opacity: 1;
  }
}
</style>

Penjelasan CSS Galeri

CSS Grid

Bagian berikut digunakan untuk membuat layout grid:

display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));

Dengan auto-fit, browser dapat menyesuaikan jumlah kolom berdasarkan ruang yang tersedia. Nilai minmax(150px, 1fr) menentukan ukuran minimum setiap kolom sekaligus memungkinkan kolom berkembang mengikuti area yang tersedia.

Ukuran Gambar

Gambar menggunakan:

width: 100%;
height: 150px;
object-fit: cover;

Properti object-fit: cover membantu menjaga gambar tetap memenuhi area yang tersedia tanpa membuat gambar terlihat gepeng akibat perubahan rasio.

Efek Hover

Ketika kursor diarahkan ke gambar pada perangkat yang mendukung hover, gambar akan sedikit terangkat menggunakan transformasi:

transform: translateY(-5px);

Efek tersebut hanya bersifat visual dan dapat dihapus jika Anda menginginkan tampilan yang lebih sederhana.

Kode HTML untuk Membuat Galeri

Setelah CSS tersedia, bagian berikut digunakan sebagai wadah gambar. Ganti URL gambar dengan alamat gambar milik Anda sendiri.

<div class="wadah-galeri-grid">

  <img src="URL_GAMBAR_ANDA_1"
       class="foto-dalam-galeri"
       alt="Deskripsi Foto 1" />

  <img src="URL_GAMBAR_ANDA_2"
       class="foto-dalam-galeri"
       alt="Deskripsi Foto 2" />

  <img src="URL_GAMBAR_ANDA_3"
       class="foto-dalam-galeri"
       alt="Deskripsi Foto 3" />

  <img src="URL_GAMBAR_ANDA_4"
       class="foto-dalam-galeri"
       alt="Deskripsi Foto 4" />

</div>

Anda dapat menambahkan gambar sebanyak yang diperlukan dengan menyalin elemen <img> dan mengganti URL serta teks alt.

Pentingnya Menggunakan Alt Text pada Gambar

Setiap gambar sebaiknya memiliki atribut alt yang menjelaskan isi gambar secara singkat dan relevan.

Contohnya:

<img
  src="https://contoh.com/foto-masjid.jpg"
  class="foto-dalam-galeri"
  alt="Dokumentasi kegiatan masjid">

Gunakan deskripsi yang benar-benar sesuai dengan isi gambar. Hindari memasukkan kata kunci secara berlebihan hanya untuk tujuan SEO.

Kode JavaScript untuk Efek Lightbox

Bagian berikut digunakan untuk membuat efek pembesaran gambar. JavaScript akan mendeteksi ketika salah satu gambar diklik, kemudian membuat overlay secara otomatis.

<script>
document.addEventListener("DOMContentLoaded", function() {

  var kumpulanFotoGaleri = document.querySelectorAll(".foto-dalam-galeri");

  kumpulanFotoGaleri.forEach(function(gambar) {

    gambar.addEventListener("click", function() {

      var sumberGambar = this.src;

      var layarOverlay = document.createElement("div");
      layarOverlay.id = "layar-gelap-lightbox";

      var gambarMembesar = document.createElement("img");
      gambarMembesar.src = sumberGambar;

      layarOverlay.appendChild(gambarMembesar);
      document.body.appendChild(layarOverlay);

      layarOverlay.addEventListener("click", function() {
        document.body.removeChild(layarOverlay);
      });

    });

  });

});
</script>

Cara Kerja Efek Lightbox

JavaScript tersebut bekerja dengan beberapa tahapan sederhana.

  1. Mencari semua gambar yang memiliki class .foto-dalam-galeri.
  2. Menunggu pengunjung mengklik salah satu gambar.
  3. Mengambil URL gambar yang diklik.
  4. Membuat elemen overlay secara otomatis.
  5. Memasukkan gambar ke dalam overlay.
  6. Menampilkan gambar dalam ukuran yang lebih besar.
  7. Menghapus overlay ketika area gelap diklik.

Dengan metode ini, Anda tidak perlu membuat elemen lightbox secara manual untuk setiap gambar.

Cara Memasang Galeri Foto di Blogger

Galeri dapat dipasang langsung pada postingan atau halaman tertentu sehingga Anda tidak perlu mengubah seluruh template jika hanya ingin menggunakannya pada artikel tertentu.

Langkah 1: Buat atau Edit Postingan

Masuk ke dashboard Blogger, kemudian buat postingan baru atau buka artikel yang ingin diberi galeri foto.

Langkah 2: Buka Mode HTML

Ubah editor Blogger ke mode HTML. Tempatkan kode galeri pada lokasi artikel yang Anda inginkan.

Langkah 3: Masukkan CSS

Tempelkan kode CSS galeri pada bagian yang sesuai di artikel.

Langkah 4: Masukkan HTML Galeri

Setelah CSS, masukkan struktur HTML galeri kemudian ganti setiap URL_GAMBAR_ANDA dengan URL gambar sebenarnya.

Langkah 5: Masukkan JavaScript

Tambahkan kode JavaScript untuk mengaktifkan fitur lightbox.

Langkah 6: Simpan dan Pratinjau

Simpan artikel kemudian gunakan fitur Pratinjau untuk memastikan galeri tampil dengan benar.

Contoh Struktur Lengkap dalam Satu Artikel

Jika Anda ingin menempatkan seluruh komponen secara berurutan, strukturnya dapat dibuat seperti berikut:

<style>

/* CSS GALERI DI SINI */

</style>

<div class="wadah-galeri-grid">

  <img src="URL_GAMBAR_1"
       class="foto-dalam-galeri"
       alt="Deskripsi gambar pertama">

  <img src="URL_GAMBAR_2"
       class="foto-dalam-galeri"
       alt="Deskripsi gambar kedua">

  <img src="URL_GAMBAR_3"
       class="foto-dalam-galeri"
       alt="Deskripsi gambar ketiga">

  <img src="URL_GAMBAR_4"
       class="foto-dalam-galeri"
       alt="Deskripsi gambar keempat">

</div>

<script>

/* JAVASCRIPT LIGHTBOX DI SINI */

</script>

Anda dapat menggunakan struktur tersebut sebagai dasar dan mengganti bagian CSS, HTML gambar, serta JavaScript sesuai kebutuhan.

Cara Menambahkan Lebih Banyak Foto

Untuk menambahkan foto baru, Anda cukup menyalin satu elemen gambar:

<img src="URL_GAMBAR_ANDA"
     class="foto-dalam-galeri"
     alt="Deskripsi gambar">

Kemudian tempelkan elemen tersebut sebelum penutup:

</div>

Contohnya:

<div class="wadah-galeri-grid">

  <img src="foto1.jpg" class="foto-dalam-galeri" alt="Foto pertama">
  <img src="foto2.jpg" class="foto-dalam-galeri" alt="Foto kedua">
  <img src="foto3.jpg" class="foto-dalam-galeri" alt="Foto ketiga">
  <img src="foto4.jpg" class="foto-dalam-galeri" alt="Foto keempat">
  <img src="foto5.jpg" class="foto-dalam-galeri" alt="Foto kelima">
  <img src="foto6.jpg" class="foto-dalam-galeri" alt="Foto keenam">

</div>

CSS Grid akan mengatur posisi gambar secara otomatis berdasarkan ruang yang tersedia.

Cara Mengubah Jarak Antar Foto

Jarak antar gambar dapat diatur melalui properti gap.

gap: 15px;

Jika ingin jarak lebih kecil:

gap: 10px;

Jika ingin jarak lebih besar:

gap: 20px;

Sesuaikan nilai tersebut dengan lebar konten dan desain template Blogger Anda.

Cara Mengubah Ukuran Thumbnail Galeri

Ukuran tinggi thumbnail dapat diubah melalui:

height: 150px;

Misalnya menjadi:

height: 180px;

Jika Anda ingin thumbnail lebih kecil:

height: 120px;

Gunakan ukuran yang tetap nyaman dilihat pada perangkat mobile.

Tips Membuat Galeri Blogger Lebih Responsif

Galeri foto sebaiknya diuji pada beberapa ukuran layar. Jangan hanya memeriksa tampilannya melalui komputer karena sebagian besar pengunjung dapat mengakses blog menggunakan smartphone.

  • Gunakan width: 100% pada gambar.
  • Hindari menentukan lebar gambar secara tetap terlalu besar.
  • Gunakan CSS Grid atau Flexbox untuk layout responsif.
  • Pastikan gambar tidak menyebabkan halaman melebar.
  • Periksa tampilan pada smartphone dan desktop.
  • Gunakan gambar dengan ukuran file yang wajar.

Tips Optimasi Gambar untuk SEO dan Kecepatan Blogger

Galeri yang berisi banyak gambar dapat meningkatkan ukuran halaman. Oleh karena itu, optimasi gambar tetap penting.

  • Gunakan format gambar yang sesuai seperti WebP jika tersedia.
  • Kompres gambar sebelum diunggah jika ukuran file terlalu besar.
  • Gunakan nama file yang menggambarkan isi gambar.
  • Tambahkan atribut alt yang relevan.
  • Hindari menggunakan gambar beresolusi sangat tinggi jika tidak diperlukan.
  • Gunakan ukuran gambar yang sesuai dengan kebutuhan tampilan.

Optimasi gambar membantu mengurangi beban halaman dan memberikan pengalaman yang lebih baik bagi pengunjung.

Kesalahan yang Sering Terjadi Saat Membuat Galeri

1. Gambar Tidak Muncul

Periksa kembali URL gambar. Pastikan URL mengarah langsung ke file gambar yang dapat diakses oleh browser.

2. Efek Lightbox Tidak Berfungsi

Pastikan class gambar menggunakan:

foto-dalam-galeri

Class tersebut harus sama dengan selector yang digunakan JavaScript.

3. Galeri Tidak Berbentuk Grid

Periksa apakah class wadah-galeri-grid sudah digunakan pada elemen pembungkus gambar dan CSS berhasil dimuat.

4. Gambar Terlihat Terpotong

Gambar menggunakan object-fit: cover, sehingga bagian tertentu dapat terpotong agar seluruh thumbnail memenuhi area. Jika ingin menampilkan gambar secara utuh, Anda dapat menggunakan:

object-fit: contain;

Namun, penggunaan contain dapat menghasilkan ruang kosong di sekitar gambar jika rasio gambar berbeda.

5. Galeri Membuat Loading Lambat

Hal ini biasanya lebih berkaitan dengan ukuran dan jumlah gambar daripada CSS grid itu sendiri. Kompres gambar dan gunakan ukuran yang sesuai dengan kebutuhan.

Apakah Galeri Foto Grid Mempengaruhi SEO?

Penggunaan galeri foto tidak secara otomatis meningkatkan ranking SEO. Namun, galeri yang dirancang dengan baik dapat membantu menyajikan konten visual secara lebih terstruktur dan memberikan pengalaman membaca yang lebih nyaman.

Untuk optimasi gambar, gunakan alt text yang deskriptif, nama file yang relevan, ukuran gambar yang sesuai, dan pastikan halaman tetap cepat dimuat.

Jangan memasukkan kata kunci secara berlebihan ke dalam atribut alt. Deskripsikan gambar sesuai dengan isi sebenarnya.

FAQ Galeri Foto Grid Blogger

Apakah galeri foto ini bisa digunakan di Blogger?

Ya. Galeri ini menggunakan HTML, CSS, dan JavaScript sehingga dapat digunakan pada artikel atau halaman Blogger dengan penyesuaian sesuai struktur template.

Apakah perlu memasang plugin untuk membuat lightbox?

Tidak untuk contoh yang digunakan dalam tutorial ini. Efek lightbox dibuat menggunakan JavaScript sehingga tidak membutuhkan plugin khusus.

Apakah jumlah foto dalam galeri dibatasi?

Tidak ada jumlah tertentu yang ditentukan oleh kode contoh ini. Anda dapat menambahkan gambar sesuai kebutuhan, tetapi semakin banyak gambar dan semakin besar ukuran file, semakin besar pula beban halaman yang harus dimuat.

Apakah galeri bisa digunakan di smartphone?

Ya. CSS Grid yang digunakan dapat menyesuaikan jumlah kolom berdasarkan lebar area yang tersedia. Tetap lakukan pengujian pada smartphone untuk memastikan tampilannya sesuai dengan template.

Apakah efek zoom bisa diubah?

Ya. Tampilan overlay, ukuran gambar, tingkat transparansi background, animasi, dan berbagai elemen visual lainnya dapat dimodifikasi melalui CSS dan JavaScript.

Apakah galeri foto otomatis membuat website lebih SEO-friendly?

Tidak secara otomatis. Galeri terutama berfungsi untuk meningkatkan penyajian konten visual. Optimasi SEO gambar tetap perlu dilakukan melalui penggunaan alt text yang relevan, ukuran gambar yang sesuai, konten berkualitas, dan performa halaman yang baik.

Kesimpulan

Cara membuat galeri foto grid dengan efek zoom lightbox di Blogger dapat dilakukan menggunakan kombinasi HTML, CSS, dan JavaScript sederhana. CSS digunakan untuk menyusun gambar menjadi grid, HTML digunakan sebagai wadah foto, sedangkan JavaScript menangani interaksi ketika gambar diklik.

Teknik ini sangat berguna untuk artikel yang memiliki banyak dokumentasi foto karena dapat menghemat ruang vertikal dan membuat tampilan halaman menjadi lebih rapi. Pengunjung juga dapat mengklik gambar untuk melihat versi yang lebih besar tanpa harus berpindah ke halaman lain.

Agar hasilnya tetap optimal, perhatikan ukuran file gambar, penggunaan alt text, responsivitas, serta jumlah gambar yang ditampilkan. Galeri yang menarik sebaiknya tetap mempertimbangkan kecepatan halaman dan kenyamanan pengguna.

Dengan struktur kode yang sederhana dan mudah dimodifikasi, Anda dapat membuat berbagai jenis galeri foto Blogger untuk kebutuhan dokumentasi, portofolio, wisata, produk, kegiatan, maupun berbagai konten visual lainnya.

Baca Artikel Lainnya

Kembali ke Beranda
Link profil berhasil disalin!