Menampilkan banyak foto dalam satu artikel blog seringkali memakan banyak ruang dan membuat halaman terlihat panjang menjemukan. Solusi terbaik untuk mengatasi masalah tata letak ini adalah dengan membuat galeri foto berbentuk kotak-kotak rapi yang dilengkapi dengan fitur perbesaran gambar saat diklik. Fitur perbesaran ini sering disebut sebagai efek lightbox, sebuah trik visual yang akan memberikan pengalaman melihat foto menjadi jauh lebih elegan dan interaktif bagi para pengunjung blog Anda.
Apa Itu Kode HTML Galeri Grid Lightbox?
Kode galeri grid lightbox adalah sebuah kombinasi harmonis antara bahasa HTML untuk menyusun kerangka gambar, CSS untuk mengatur tata letak kotak-kotak yang simetris, dan sedikit JavaScript ringan untuk memunculkan efek layar penuh. Sistem grid yang digunakan akan secara otomatis menyesuaikan ukuran layar pengunjung, sementara efek lightbox akan menggelapkan latar belakang layar dan memfokuskan pandangan pengunjung murni pada foto tunggal yang sedang mereka pilih.
Manfaat Penggunaan Kode Ini di Blogger
Manfaat utama dari penerapan kode ini adalah menghemat ruang pada halaman artikel tanpa harus mengorbankan kualitas atau jumlah foto yang ingin Anda bagikan kepada pembaca. Tampilan blog Anda akan seketika terlihat jauh lebih profesional layaknya situs web portofolio fotografer mahal. Selain itu, kode yang dibagikan dalam tutorial ini dirancang sangat ringan dan berdiri sendiri, sehingga dijamin tidak akan membebani kecepatan pemuatan halaman blog Anda sama sekali.
Contoh Penerapan Galeri di Blog
Kode galeri ini sangat sempurna untuk diterapkan pada blog yang sering membagikan dokumentasi kegiatan acara, portofolio hasil karya desain grafis, ulasan produk dengan banyak sudut pandang, atau catatan dokumentasi perjalanan wisata. Anda bisa meletakkannya di bagian tengah atau akhir artikel untuk merangkum momen-momen penting tanpa membuat pengunjung merasa lelah karena harus terus menggulir layar ke bawah.
Kode HTML Lengkap Siap Pakai
Di bawah ini adalah kode gabungan yang terdiri dari gaya tampilan, kerangka gambar, dan fungsi tombol klik. Silakan salin keseluruhan kode di bawah ini secara utuh untuk dipasang di blog 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;
top: 0;
left: 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;
}
</style>
<div class="galeri-grid">
<img src="URL_GAMBAR_1" alt="Galeri 1" class="galeri-item" onclick="bukaLightbox(this.src)">
<img src="URL_GAMBAR_2" alt="Galeri 2" class="galeri-item" onclick="bukaLightbox(this.src)">
<img src="URL_GAMBAR_3" alt="Galeri 3" class="galeri-item" onclick="bukaLightbox(this.src)">
<img src="URL_GAMBAR_4" alt="Galeri 4" class="galeri-item" onclick="bukaLightbox(this.src)">
</div>
<div id="lightbox-bg" class="lightbox-overlay" onclick="tutupLightbox()">
<span class="lightbox-tutup" onclick="tutupLightbox()">×</span>
<img id="lightbox-gambar" class="lightbox-img" src="">
</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 Kode di Blogger
Langkah pertama, masuklah ke halaman dashboard Blogger Anda lalu buatlah sebuah Postingan Baru atau buka artikel lama yang ingin Anda sisipkan galeri foto. Anda bisa menulis paragraf pembuka atau penjelasan artikel seperti biasa terlebih dahulu sebelum memasukkan kodenya.
Langkah kedua, perhatikan ikon berbentuk pensil yang ada di sudut kiri atas layar editor artikel Anda. Klik ikon tersebut dan pindahkan mode penulisan dari Tampilan Menulis menjadi Tampilan HTML. Mengubah mode ini sangat penting agar sistem Blogger membaca teks yang Anda masukkan sebagai sebuah instruksi program.
Langkah ketiga, tempelkan semua kode yang sudah Anda salin tepat di baris yang Anda inginkan. Setelah tertempel dengan rapi, Anda bisa mengklik kembali ikon pensil di sudut kiri atas dan mengembalikannya ke mode Tampilan Menulis untuk melanjutkan penulisan paragraf penutup artikel Anda.
Panduan Penggunaan Langkah Demi Langkah
Langkah pertama untuk menggunakan kode ini adalah menyiapkan tautan URL gambar Anda. Anda perlu mengunggah foto-foto Anda terlebih dahulu ke dalam draf Blogger, lalu menyalin alamat tautan gambar tersebut satu per satu. Pastikan gambar yang Anda gunakan memiliki resolusi yang cukup baik agar tidak pecah saat diperbesar.
Langkah kedua, perhatikan pada bagian kerangka kode yang bertuliskan URL_GAMBAR_1 hingga angka keempat. Hapus tulisan tersebut dan gantikan dengan alamat tautan gambar asli yang sudah Anda salin sebelumnya. Jika Anda ingin menambah jumlah foto, Anda cukup menyalin sebaris kode gambar tersebut dan menempelkannya di bawahnya secara berurutan.
Panduan Cara Menguji Keberhasilan Script
Langkah pertama untuk melakukan pengujian adalah menekan tombol Pratinjau yang terletak di pojok kanan atas halaman editor Anda. Halaman baru akan terbuka dan menampilkan bagaimana bentuk artikel Anda jika diterbitkan nanti. Pastikan gambar-gambar tersebut sudah tersusun rapi berjajar membentuk pola kotak-kotak.
Langkah kedua, arahkan kursor Anda ke salah satu gambar. Gambar tersebut seharusnya akan sedikit membesar sebagai tanda bahwa elemen tersebut bisa ditekan. Klik gambar tersebut, dan seketika latar belakang layar akan berubah menjadi gelap sementara gambar akan muncul dalam ukuran penuh di tengah layar Anda. Klik di mana saja pada area gelap atau tekan tombol silang untuk menutupnya.
Pembahasan Tentang Kesalahan Umum Saat Mengedit
Kesalahan pertama yang sering ditemui adalah gambar gagal memuat atau terlihat seperti ikon dokumen rusak. Hal ini murni disebabkan oleh kesalahan saat memasukkan alamat tautan gambar. Pastikan Anda tidak tidak sengaja menghapus tanda kutip yang mengapit tautan URL gambar tersebut saat proses penyalinan.
Kesalahan kedua adalah efek perbesaran layar penuh tidak muncul saat gambar ditekan. Biasanya masalah ini terjadi karena bagian kerangka JavaScript yang berada di posisi paling bawah tertinggal atau terhapus secara tidak sengaja. Pastikan tag penutup naskah program sudah terpasang dengan benar agar fungsi interaktifnya berjalan normal.
Penutup
Menyajikan karya visual dalam bentuk yang rapi dan interaktif adalah salah satu cara ampuh untuk membuat pengunjung betah berlama-lama di blog Anda. Semoga tutorial cara membuat galeri foto grid dengan efek lightbox ini bisa membantu Anda menyulap tampilan blog menjadi jauh lebih menawan. Selamat mencoba berkreasi dengan foto-foto terbaik Anda!