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.
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 sajian 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 javascript 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 anutan ampproject.com kalau ingin mengaktifkan image lightbox dan halaman blog tetap valid AMP.
AMP Project sudah menyiapkan sebuah javascript khusus bagi anda yang ingin mengaktifkan ataupun memakai lightbox pada sebuah gambar.
Kaprikornus kalau gambar dalam artikel itu di klik, maka akan muncul overlay yang menampilkan gambar dalam ukuran lebih besar.
Kaprikornus 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 javascript image lightbox pada blogger valid AMP.
Setup Javascript Image Lightbox in AMP HTML
Untuk mengaktifkan fitur lightbox pada halaman AMP, anda harus memasukan sebuah javascript pada template anda, ialah amp-lightbox-gallery.
Silahkan copy isyarat 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 javascript 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 isyarat CSS berikut ini, dan masukan sehabis isyarat
<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
Hasilnya menyerupai di bawah ini:
Semoga berkhasiat :)
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/AVvXsEiSjCNCCmvvx-ljCrxeUeWo9p3DxOzZGYu33YSfbgXVl5PSWCy3bh8vEIP7VZVNSXE98HdXMQiYFOvdW2pL2ZmPZla5o7_jK5JAfIEaqgEiMkfsnrH67M2_MXjLFdhREzTEYCHWfAkKbICg/s320/sikunir+golden+sunrise.png"></amp-img>Hasilnya menyerupai di bawah ini:
Semoga berkhasiat :)
