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 jika di dalam postingan tersebut terdapat lebih dari satu gambar maka overlay tersebut akan menampilkan gambar-gambar tersebut dengan tombol next prev.
Dan jika di dalam postingan tersebut terdapat lebih dari satu gambar maka overlay tersebut akan menampilkan gambar-gambar tersebut dengan tombol next prev.
Blogger sendiri sudah memiliki fitur bawaan ini, yang bisa diaktifkan di menu setting. Namun, bagi kamu pengguna blogger yang sudah mengkostum template sedemikian rupa, image lightbox bawaan tidak akan bisa berjalan meskipun sudah diaktifkan.
Karena biasanya, beberapa orang yang sudah mendesain ulang template, akan menghilangkan css dan javascript bawaan blogger seperti blunded css.
Dan untuk anda yang sudah upgrade blogger ke AMP HTML, tentunya tidak akan merasakan fitur bawaan blogger ini. Anda harus mengikuti pedoman ampproject.com jika ingin mengaktifkan image lightbox dan halaman blog tetap valid AMP.
AMP Project sudah menyiapkan sebuah javascript khusus bagi anda yang ingin mengaktifkan ataupun menggunakan lightbox pada sebuah gambar.
Jadi jika gambar dalam artikel itu di klik, maka akan muncul overlay yang menampilkan gambar dalam ukuran lebih besar.
Jadi jika gambar dalam artikel itu di klik, maka akan muncul overlay yang menampilkan gambar dalam ukuran lebih besar.
Kali ini saya 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, yaitu amp-lightbox-gallery.
Silahkan copy kode 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 jika anda menggunakan ligthbox dengan carousel:
<script async='async' custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"></script>Kemudian copy kode CSS berikut ini, dan masukan setelah kode
<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 seperti di bawah ini:
Semoga berguna :)
lightbox='lightbox' pada tag <amp-img> saat memasukan gambar pada postingan blogger anda. Contohnya seperti ini:<amp-img lightbox='lightbox' alt="amp lightbox" height='320px' layout="fixed-height" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0sj_KqjwBjBKlnOeftJBF-vi9Um1qA0ffoe4OxlJM6kbt-BSxCgZObwR3YDksmVvpEmordI0mu9wuh1qTCIkLitvl5EvmKgBusUM0Y4rebLxdP-AndRMMQHzB8ChAUmKtppnD_Xm87fLT/s320/sikunir+golden+sunrise.png"></amp-img>Hasilnya seperti di bawah ini:
Semoga berguna :)