Ingin menambahkan galeri foto dengan efek lightbox yang elegan di blog kamu? Sekarang segalanya tampak lebih mudah. Kamu tidak harus menuliskan kode sendiri baris per baris. Karena di luar sana ada yang menuliskan kodenya atau saatnya content delivery network bekerja untuk Anda.
SimpleLightbox JS adalah salah satu plugin JavaScript yang ringan dan mudah digunakan untuk menampilkan gambar dalam format lightbox. Pada artikel ini, kita akan membahas langkah-langkah sederhana untuk memasang SimpleLightbox JS pada template Blogger kamu.
Apa Itu SimpleLightbox?
SimpleLightbox adalah plugin JavaScript yang memungkinkan kamu menampilkan gambar dalam sebuah tampilan modal (pop-up) dengan latar belakang gelap, sehingga pengunjung bisa fokus pada gambar yang diperbesar. Fitur ini sangat populer di situs-situs modern, terutama pada galeri gambar.
Simplelightbox dibuat oleh Andre Rinas, kamu bisa mengunjungi webnya langsung di SimpleLightbox. Di sana kamu bisa membaca dokumentasi cara penggunaannya secara lengkap. Namun mungkin akan sedikit ragu-ragu bagi pengguna Blogger. Untuk itulah, artikel ini dibuat agar membantu para blogger khususnya pemula yang baru belajar secara otodidak.
Oia, catatan tambahan untuk artikel kali ini yaitu:"Versi SimpleLightbox yang digunakan sebagai contoh praktek adalah 2.1.0. Untuk mendapatkan pembaruan versi dari SimpleLightbox silahkan kunjungi langsung website milik Andre Rinas yang telah disebutkan di atas.
Dan sumber referensi lainnya selain website di atas bisa juga kunjungi simplelightbox CDN by jsDelivr. Di situs ini terlihat versi baru dari Simplelightbox yaitu 2.14.3. Mau coba yang mana, silahkan pilih sesuka hati ya.
Langkah-langkah Menggunakan SimpleLightbox di Blogger
1. Persiapkan Template Blogger
Sebelum mulai, pastikan kamu telah masuk ke akun Blogger dan membuka blog yang ingin kamu modifikasi. Setelah itu, ikuti langkah berikut:
1. Masuk ke dasbor Blogger kamu.
2. Klik menu "Tema" atau (Theme).
3. Klik "Edit HTML" untuk membuka kode template blog kamu.
4. Tambahkan Kode CSS SimpleLightbox. Agar lebih mudah kita gunakan link via CDN saja ya seperti contoh praktek berikut ini. Ya, silahkan cari tag `</head>` dalam template, lalu tambahkan kode berikut sebelum tag `</head>`:
5. Tambahkan link CDN Simplelightbox JS pada bagian akhir sebelum tag </html>.
6. Aktifkan SimpleLightBox dengan kode Javascript yang ditempatkan sebelum tag akhir </body>.
Kode di atas akan mengaktifkan SimpleLightbox pada setiap link di dalam elemen dengan kelas `porfolio' dan 'portfolio-box'.
7. Selanjutnya membuat struktur HTML yang dikaitkan dengan class yang terkait dengan simplelightbox. Pada contoh nomor 6 diatas yaitu class:portfolio dan portfolio-box. Maka kamu harus membuat galeri gambar dengan struktur HTML yang sesuai dengan class tersebut. Berikut contoh sederhananya:
<div class="portfolio">
<a href="URL_GAMBAR_1.jpg"><img src="URL_THUMBNAIL_1.jpg" alt="Deskripsi gambar 1"></a>
<a href="URL_GAMBAR_2.jpg"><img src="URL_THUMBNAIL_2.jpg" alt="Deskripsi gambar 2"></a>
<a href="URL_GAMBAR_3.jpg"><img src="URL_THUMBNAIL_3.jpg" alt="Deskripsi gambar 3"></a>
</div>
```
Pada bagian ini, gantikan `URL_GAMBAR` dengan URL gambar yang ingin kamu tampilkan. Kamu juga bisa menambahkan lebih banyak gambar sesuai kebutuhan.
8. Simpan dan Lihat Hasilnya
Setelah semua langkah di atas selesai, simpan template kamu dan lihat blog kamu untuk memastikan galeri dengan efek lightbox sudah berfungsi. Ketika pengunjung mengklik gambar, akan muncul tampilan "modal" dengan gambar yang diperbesar.
Kesimpulan
Dengan mengikuti langkah-langkah di atas, kamu sudah berhasil menambahkan SimpleLightbox JS ke template Blogger kamu. Untuk informasi lebih lanjut kamu bisa mengecek dokumentasi resmi SimpleLightbox di webnya langsung.
Sekarang, blog kamu sudahkah memiliki galeri gambar yang menarik dan interaktif?
Selamat mencoba.
Tidak ada komentar:
Posting Komentar