Cara Membuat Galeri Foto Keren di Blogger dengan Efek Zoom (Lightbox)

4/06/2026
Cara membuat galeri foto di Blogger dengan efek zoom lightbox

Menampilkan banyak foto dalam satu artikel Blogger terkadang membuat halaman menjadi terlalu panjang dan kurang nyaman untuk dijelajahi. Salah satu solusi yang dapat digunakan adalah membuat galeri foto grid di Blogger dengan efek zoom atau lightbox.

Dengan tampilan galeri berbentuk kotak, beberapa foto dapat ditampilkan dalam area yang lebih ringkas. Ketika salah satu foto diklik, gambar akan ditampilkan dalam ukuran lebih besar dengan latar belakang gelap sehingga pengunjung dapat melihat detail foto tanpa harus berpindah halaman.

Teknik ini dapat digunakan untuk berbagai kebutuhan, mulai dari galeri dokumentasi, portofolio, foto produk, dokumentasi acara, hingga galeri perjalanan. Menariknya, Anda dapat membuatnya menggunakan kombinasi HTML, CSS, dan JavaScript tanpa membutuhkan plugin tambahan.

Apa Itu Galeri Foto Grid Lightbox?

Galeri foto grid adalah metode untuk menyusun beberapa gambar dalam bentuk kolom dan baris sehingga penggunaan ruang pada halaman menjadi lebih efisien. Sementara itu, lightbox merupakan tampilan overlay yang digunakan untuk memperbesar gambar ketika pengunjung mengklik salah satu foto.

Pada tutorial ini, HTML digunakan untuk membuat struktur galeri, CSS digunakan untuk mengatur tampilan grid dan efek visual, sedangkan JavaScript digunakan untuk membuka dan menutup gambar dalam tampilan lightbox.

Hasil akhirnya adalah galeri yang tetap terlihat rapi pada layar desktop maupun perangkat mobile.

Keuntungan Menggunakan Galeri Lightbox di Blogger

Menggunakan galeri grid dengan efek lightbox dapat memberikan beberapa keuntungan dari sisi tampilan dan pengalaman pengguna.

  • Menghemat ruang artikel karena beberapa gambar dapat ditampilkan dalam bentuk grid.
  • Membuat tampilan foto lebih terorganisir dan tidak terlalu panjang.
  • Memudahkan pengunjung melihat gambar berukuran besar tanpa berpindah halaman.
  • Cocok untuk berbagai jenis konten, seperti portofolio, foto produk, dokumentasi dan perjalanan.
  • Tidak membutuhkan library lightbox eksternal karena fungsi dasar dibuat menggunakan JavaScript.
  • Dapat disesuaikan dengan desain blog melalui CSS.

Walaupun kode ini cukup sederhana, jumlah dan ukuran gambar tetap perlu diperhatikan karena file gambar yang besar tetap dapat memengaruhi waktu pemuatan halaman.

Contoh Penggunaan Galeri Foto di Blogger

Galeri lightbox dapat digunakan pada berbagai jenis artikel. Misalnya, Anda memiliki artikel dokumentasi kegiatan dan ingin menampilkan 10 hingga 20 foto sekaligus. Daripada menampilkan semua gambar secara vertikal, foto dapat disusun dalam beberapa kolom menggunakan sistem grid.

Teknik yang sama juga dapat digunakan untuk portofolio desain grafis, hasil fotografi, katalog visual, dokumentasi acara, review produk, tutorial bergambar, dan artikel wisata.

Kode HTML Galeri Foto dengan Efek Lightbox

Berikut kode lengkap yang menggabungkan HTML, CSS, dan JavaScript. Anda hanya perlu mengganti bagian URL_GAMBAR_1, URL_GAMBAR_2, dan seterusnya dengan URL gambar milik Anda.


<!-- Awal Galeri Grid Lightbox -->

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

.galeri-item {
  width: 100%;
  height: 150px;
  object-fit: cover;
  border-radius: 8px;
  cursor: pointer;
  transition: transform 0.3s ease;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.galeri-item:hover {
  transform: scale(1.05);
}

.lightbox-overlay {
  display: none;
  position: fixed;
  z-index: 9999;
  inset: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  align-items: center;
  justify-content: center;
}

.lightbox-overlay.aktif {
  display: flex;
}

.lightbox-img {
  max-width: 90%;
  max-height: 90%;
  border-radius: 8px;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
}

.lightbox-tutup {
  position: absolute;
  top: 20px;
  right: 30px;
  color: white;
  font-size: 40px;
  font-weight: bold;
  cursor: pointer;
  user-select: none;
}

@media screen and (max-width: 600px) {
  .galeri-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }

  .galeri-item {
    height: 130px;
  }

  .lightbox-img {
    max-width: 94%;
    max-height: 85%;
  }

  .lightbox-tutup {
    top: 10px;
    right: 18px;
    font-size: 34px;
  }
}
</style>

<div class="galeri-grid">

  <img 
    src="URL_GAMBAR_1" 
    alt="Galeri foto 1" 
    class="galeri-item" 
    onclick="bukaLightbox(this.src)"
  >

  <img 
    src="URL_GAMBAR_2" 
    alt="Galeri foto 2" 
    class="galeri-item" 
    onclick="bukaLightbox(this.src)"
  >

  <img 
    src="URL_GAMBAR_3" 
    alt="Galeri foto 3" 
    class="galeri-item" 
    onclick="bukaLightbox(this.src)"
  >

  <img 
    src="URL_GAMBAR_4" 
    alt="Galeri foto 4" 
    class="galeri-item" 
    onclick="bukaLightbox(this.src)"
  >

</div>

<div 
  id="lightbox-bg" 
  class="lightbox-overlay" 
  onclick="tutupLightbox()"
>

  <span 
    class="lightbox-tutup" 
    onclick="tutupLightbox()"
  >&times;</span>

  <img 
    id="lightbox-gambar" 
    class="lightbox-img" 
    src="" 
    alt="Gambar diperbesar"
  >

</div>

<script>
function bukaLightbox(srcGambar) {
  document.getElementById('lightbox-gambar').src = srcGambar;
  document.getElementById('lightbox-bg').classList.add('aktif');
}

function tutupLightbox() {
  document.getElementById('lightbox-bg').classList.remove('aktif');
}
</script>

<!-- Akhir Galeri Grid Lightbox -->

Cara Memasang Galeri Foto Lightbox di Blogger

1. Siapkan Gambar yang Akan Digunakan

Siapkan beberapa foto yang ingin ditampilkan pada artikel. Sebaiknya gunakan gambar dengan kualitas yang cukup baik tetapi tetap memiliki ukuran file yang efisien.

Jika gambar berasal dari Blogger, Anda dapat mengunggahnya terlebih dahulu melalui editor postingan atau media yang tersedia, kemudian menggunakan URL gambar tersebut pada kode galeri.

2. Buka Postingan Blogger

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

3. Pilih Mode HTML

Pada editor postingan Blogger, ubah mode penulisan dari Tampilan Menulis menjadi Tampilan HTML. Mode ini diperlukan agar kode HTML, CSS, dan JavaScript dapat dimasukkan sebagai kode halaman.

4. Tempelkan Kode Galeri

Salin seluruh kode galeri di atas, kemudian tempelkan pada posisi artikel yang Anda inginkan. Anda dapat meletakkannya setelah paragraf pembuka, di tengah artikel, atau pada bagian dokumentasi foto.

5. Ganti URL Gambar

Cari bagian berikut:


src="URL_GAMBAR_1"
src="URL_GAMBAR_2"
src="URL_GAMBAR_3"
src="URL_GAMBAR_4"

Ganti setiap URL tersebut dengan alamat gambar yang ingin ditampilkan.

6. Tambahkan Foto Jika Diperlukan

Jika ingin menampilkan lebih dari empat gambar, Anda dapat menyalin salah satu elemen <img> dan menambahkannya di dalam .galeri-grid.


<img 
  src="URL_GAMBAR_5" 
  alt="Galeri foto 5" 
  class="galeri-item" 
  onclick="bukaLightbox(this.src)"
>

Ulangi cara tersebut sesuai jumlah foto yang ingin ditampilkan.

Cara Membuat Alt Text Gambar Lebih SEO Friendly

Setiap gambar sebaiknya memiliki atribut alt yang menggambarkan isi foto. Hindari menggunakan alt text yang terlalu umum seperti “gambar 1”, “foto”, atau “image”.

Contohnya, jika galeri berisi dokumentasi sebuah kegiatan, Anda dapat menggunakan deskripsi yang lebih relevan:


<img
  src="URL_GAMBAR"
  alt="Dokumentasi kegiatan seminar teknologi"
  class="galeri-item"
  onclick="bukaLightbox(this.src)"
>

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

Cara Menguji Galeri Foto di Blogger

Setelah kode dipasang, gunakan fitur Pratinjau Blogger sebelum menerbitkan artikel. Periksa beberapa bagian berikut:

  • Semua gambar dapat dimuat dengan baik.
  • Gambar tersusun dalam bentuk grid.
  • Efek hover bekerja pada perangkat yang mendukung hover.
  • Gambar dapat diklik untuk membuka lightbox.
  • Tombol tanda silang dapat digunakan untuk menutup lightbox.
  • Galeri tetap nyaman dilihat pada perangkat mobile.
  • Tidak ada elemen artikel lain yang tertutup oleh lightbox.

Untuk pengujian mobile, sebaiknya buka artikel menggunakan smartphone atau gunakan mode responsive pada Developer Tools browser.

Jika Gambar Tidak Muncul

Jika salah satu gambar tidak tampil, periksa kembali URL pada atribut src. Pastikan alamat gambar benar dan dapat diakses oleh browser.

Kesalahan kecil seperti URL yang tidak lengkap, tanda kutip yang hilang, atau alamat gambar yang sudah tidak aktif dapat menyebabkan gambar gagal dimuat.

Jika Efek Lightbox Tidak Berfungsi

Apabila gambar dapat terlihat tetapi tidak membuka tampilan lightbox ketika diklik, periksa bagian JavaScript pada kode. Pastikan fungsi bukaLightbox() dan tutupLightbox() tidak terhapus.

Pastikan juga kode JavaScript tetap berada di dalam tag <script> dan seluruh bagian kode ditempelkan dengan lengkap.

Cara Menambah Jumlah Kolom Galeri

Jumlah kolom galeri dapat disesuaikan melalui CSS. Kode bawaan menggunakan:


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

Dengan pengaturan tersebut, browser akan menyesuaikan jumlah kolom berdasarkan lebar area yang tersedia.

Jika Anda ingin menggunakan jumlah kolom tertentu pada layar desktop, Anda juga dapat menggunakan contoh berikut:


.galeri-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 15px;
}

Untuk perangkat mobile, gunakan media query agar jumlah kolom dapat dikurangi sehingga gambar tetap memiliki ukuran yang nyaman untuk dilihat.

Tips Agar Galeri Blogger Tetap Ringan

Galeri yang berisi banyak gambar dapat meningkatkan jumlah data yang harus dimuat oleh browser. Karena itu, jumlah foto dan ukuran file perlu diperhatikan.

  • Gunakan gambar dengan ukuran yang sesuai kebutuhan.
  • Kompres gambar sebelum mengunggahnya jika ukuran file terlalu besar.
  • Gunakan format gambar modern jika sesuai dengan kebutuhan template dan browser.
  • Hindari memasukkan puluhan gambar beresolusi sangat tinggi tanpa optimasi.
  • Gunakan atribut alt yang relevan pada setiap gambar.
  • Uji halaman menggunakan perangkat desktop dan mobile.

Efek lightbox sendiri bukan berarti gambar menjadi lebih ringan. Jika gambar asli berukuran besar, gambar tersebut tetap membutuhkan data untuk dimuat ketika digunakan.

Apakah Galeri Lightbox Bisa Digunakan untuk Foto Produk?

Ya. Galeri lightbox sangat cocok untuk menampilkan beberapa sudut pandang produk dalam satu artikel. Misalnya, Anda dapat menampilkan foto bagian depan, belakang, samping, detail bahan, dan penggunaan produk.

Pengunjung dapat melihat thumbnail terlebih dahulu kemudian mengklik gambar tertentu untuk melihat detailnya dalam ukuran yang lebih besar.

Apakah Galeri Lightbox Bisa Digunakan di Mobile?

Ya. Sistem grid pada kode di atas menggunakan CSS Grid dan dilengkapi aturan responsive untuk layar yang lebih kecil. Namun, hasil akhirnya tetap bergantung pada lebar area konten dan CSS template Blogger yang digunakan.

Karena itu, selalu lakukan pengujian langsung pada beberapa ukuran layar sebelum artikel diterbitkan.

Kesimpulan

Membuat galeri foto grid dengan efek lightbox di Blogger dapat menjadi solusi praktis untuk menampilkan banyak gambar tanpa membuat artikel terlihat terlalu panjang. Dengan kombinasi HTML, CSS, dan JavaScript, Anda dapat membuat galeri yang memiliki tampilan lebih terorganisir serta memungkinkan pengunjung memperbesar gambar ketika diperlukan.

Teknik ini dapat diterapkan untuk portofolio, dokumentasi kegiatan, foto produk, artikel wisata, fotografi, desain grafis, dan berbagai jenis konten visual lainnya.

Agar hasilnya tetap optimal, jangan hanya memperhatikan tampilan galeri. Pastikan ukuran gambar efisien, gunakan alt text yang relevan, periksa tampilan pada perangkat mobile, dan uji seluruh fungsi lightbox sebelum artikel dipublikasikan.

FAQ Galeri Foto Lightbox di Blogger

Apa itu galeri foto lightbox di Blogger?

Galeri foto lightbox adalah tampilan galeri yang menyusun beberapa gambar dalam bentuk grid dan menampilkan gambar dalam ukuran lebih besar ketika pengunjung mengklik salah satu foto.

Apakah galeri lightbox membutuhkan plugin Blogger?

Tidak. Contoh pada tutorial ini menggunakan HTML, CSS, dan JavaScript sehingga tidak membutuhkan library atau plugin lightbox eksternal.

Apakah galeri foto ini responsif di HP?

Kode menggunakan CSS Grid dan media query sehingga dapat menyesuaikan tampilan pada layar yang lebih kecil. Namun, hasil akhirnya dapat dipengaruhi oleh struktur dan CSS template Blogger yang digunakan.

Bagaimana cara menambahkan lebih banyak foto?

Salin elemen gambar dengan class galeri-item, kemudian tambahkan ke dalam elemen galeri-grid. Jangan lupa mengganti URL dan alt text sesuai gambar yang digunakan.

Apakah galeri lightbox membuat loading Blogger lebih cepat?

Tidak secara otomatis. Lightbox hanya mengatur cara gambar ditampilkan. Kecepatan halaman tetap dipengaruhi oleh ukuran file gambar, jumlah gambar, script, CSS, dan elemen lain yang dimuat pada halaman.

Baca Artikel Lainnya

Kembali ke Beranda
Link profil berhasil disalin!