✔ Cara Simple Mengaktifkan Image Lightbox Pada Amp Blogger

Setting CSS dan JS Gallery Image Lightbox pada Blogger Valid AMP

Image Lightbox dapat diartikan ketika gambar dalam sebuah artikel diklik, maka akan muncul sebuah overlay yang menampilkan gambar yang lebih besar.

Dan kalau di dalam postingan tersebut terdapat lebih dari satu gambar maka overlay tersebut akan menampilkan gambar-gambar tersebut dengan tombol next prev.

Blogger sendiri sudah mempunyai fitur bawaan ini, yang sanggup diaktifkan di hidangan setting. Namun, bagi kau pengguna blogger yang sudah mengkostum template sedemikian rupa, image lightbox bawaan tidak akan sanggup berjalan meskipun sudah diaktifkan.

Karena biasanya, beberapa orang yang sudah mendesain ulang template, akan menghilangkan css dan j4vascript bawaan blogger menyerupai blunded css.

Dan untuk anda yang sudah upgrade blogger ke AMP HTML, tentunya tidak akan mencicipi fitur bawaan blogger ini. Anda harus mengikuti ajaran ampproject.com kalau ingin mengaktifkan image lightbox dan halaman blog tetap valid AMP.

AMP Project sudah menyiapkan sebuah j4vascript khusus bagi anda yang ingin mengaktifkan ataupun memakai lightbox pada sebuah gambar.

Makara kalau gambar dalam artikel itu di klik, maka akan muncul overlay yang menampilkan gambar dalam ukuran lebih besar. 

Kali ini aku akan menjelaskan bagaimana cara menyeting j4vascript image lightbox pada blogger valid AMP. 

Setup Javascript Image Lightbox in AMP HTML

Untuk mengaktifkan fitur lightbox pada halaman AMP, anda harus memasukan sebuah j4vascript pada template anda, ialah amp-lightbox-gallery.

Silahkan copy aba-aba di bawah ini pada dashboard Edit HTML di Blogger anda. Tempelkan sebelum </head> :

<script async='async' custom-element="amp-lightbox-gallery" src="https://cdn.ampproject.org/v0/amp-lightbox-gallery-0.1.js"></script>

Jangan lupa juga untuk memasukan j4vascript AMP carousel di bawah ini kalau nada memakai ligthbox dengan carousel:

<script async='async' custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"></script>

Kemudian copy aba-aba CSS berikut ini, dan masukan sehabis aba-aba <style amp-custom='amp-custom'>. Copy Kode di bawah ini:
amp-img[lightbox] {cursor: pointer;}

Nah, untuk mengaktifkan lightbox ketika gambar di artikel diklik, anda harus memasukan tag lightbox='lightbox' pada tag <amp-img> dikala memasukan gambar pada postingan blogger anda. Contohnya menyerupai ini:

<amp-img lightbox='lightbox' alt=" Setting CSS dan JS Gallery Image Lightbox pada Blogger Valid AMP ✔ Cara Simple Mengaktifkan Image Lightbox pada AMP Blogger" height='320px' layout="fixed-height" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGsL4anTY1ZaiShlinMzQ82KCTnLNdB0eXvJo4iAEdBdW4pwueiLeJzphZFNtsiMjYRNQalMwJAXvYl4k44slYm4H0IvFJixxXW-U_Jn_jkPkI3bv33Emh6awqT6-1JChPeL7i4JJmwCgb/s320/sikunir+golden+sunrise.png"></amp-img>

Hasilnya menyerupai di bawah ini:

Jika anda mengupload lebih dari satu gambar pada postingan anda, maka akan ada tombol next-prev pada overlay lightbox anda.

Semoga berkhasiat :)

Sumber http://ampidn.blogspot.com

Share this post

Berlangganan update artikel terbaru via email: