Mengganti Default Lightbox Blogger dengan SimpleLightbox

Mengganti Default Lightbox Blogger dengan SimpleLightbox oleh reload.id. Semakin hari blogger.com milik google senantiasa memperbarui fitur-fitur pada cms gratis dengan unlimitted bandwidth terbaik yang terkenal dengan subdomain .blogspot.com serta dapat dicustom domain seperti web reload.id ini. update terkini yang baru-baru ini dilakukan oleh google yaitu merubah tampilan dashboard blogger dengan tampilan yang lebih menarik dan fast loading.

Dengan fitur-fitur dan widget yang sudah ada pada bawaan default blogger, dengan bermodalkan css dan js maka blogger menjadi website yang bisa dikustomisasi dari tampilan hingga fungsionalitasnya. Pada kesempatan kali ini admin mau share tentang Mengganti Default Lightbox Blogger dengan SimpleLightbox yang biasa admin terapkan pada template blog untuk jasa website client dari reload.id.

Contoh Lightbox Bawaan Blogger

Apa itu lightbox ?

Lightbox dalam dunia website adalah satu fitur untuk menampilkan gambar atau media lainnya pada kotak munculan tanpa menutup halaman yang sedang kita buka. media yang didukung bisa seperti gambar, video, iframe, ajax, dan lain-lain. Lightbox bisa ditambahkan pada website menggunakan Jquery, Vanilla JS / Pure JS (alias tanpa jquery) bahkan Pure CSS sekalipun. Keuntungan menggunakan lightbox pada website, kita tidak perlu membuka tab baru untuk membuka sebuah media dan tidak perlu melakukan reload atau meload ulang halaman yang sedang kita akses jika kita ingin kembali / menutup media tersebut. Kekurangannya kita menambah script berupa JS atau Library JS dan CSS pada website kita.

SimpleLightbox adalah lightbox yang ringan (ligthweight) dan responsif tanpa dependencies. Dapat menampilkan gambar, galeri, video atau konten khusus dan kontrol lightbox Anda dengan api yang mudah digunakan. Beratnya kurang dari 3KB saja.

Contoh Lightbox Custom Content berupa Div dari HTML

Pada kesempatan kali ini kita akan menerapkan SimpleLightbox untuk menggantikan default Lightbox Image milik Blogger, Berikut langkah-langkahnya :

Menonaktifkan Default Lightbox Bawaan Blogger.

1. Masuk ke Blogger
2. Pilih Setting
3. Scroll ke Bawah pada bagian Posts 
4. Nonaktifkan Image Lightbox.

Adapun langkah untuk menonaktifkan Image lightbox blogger bisa dengan cara mengedit template html untuk menghapus file js bawaan blogger. namun untuk saat ini kita cukup menonaktifkan lewat pengaturan.

Memasang SimpleLightbox pada Template Blogger

1. Masuk ke Blogger
2. Pilih Menu Theme klik tombol Customise, pilih Edit HTML
   
   
   
3. Tambahkan script js dan css simplelightbox berikut bisa ditaro sebelum </head> atau sebelum </body> :
   [code]<b:if cond='data:blog.pageType != &quot;index&quot;'> <!-- aktif diselain halaman index --> <link href='https://cdnjs.cloudflare.com/ajax/libs/SimpleLightbox/2.1.0/simpleLightbox.min.css' rel='stylesheet'/> <script src='https://cdnjs.cloudflare.com/ajax/libs/SimpleLightbox/2.1.0/simpleLightbox.min.js'/> </b:if>[/code]
4. Untuk selectornya bisa menggunakan versi JS atau Jquery. Untuk selector gambar blogger defaultnya memliki class separator sebelum kode ahref ke link gambar. maka kita tambahkan kode berikut setelah sebelum kode </body> :
   [js]<script> // Pure js new SimpleLightbox({elements: '.separator a'}); // atau jQuery $('.separator a').simpleLightbox(); </script>[/js]
5. Terakhir simpan dan lihat pada halaman statis atau item post artikel kita.

Untuk demonya bisa lihat pada halaman gallery demo reload.id karena di website ini pun sudah diterapkan menggunakan simplelightbox. jika ada yang perlu ditanyakan silahkan berkomenter.

Untuk versi bahasa inggris alias sumbernya bisa lihat dihalaman http://dbrekalo.github.io/simpleLightbox/

Sekian untuk tutorial Mengganti Default Lightbox Blogger dengan SimpleLightbox mudah-mudah bisa bermanfaat buat sobat semua.

Share this post