Cara Memasang Image Lightbox Valid Amp Blogger Template
- Memasang Image Lightbox Valid AMP Blogger Template, Image Lightbox artinya 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.
Nah untuk kita para pengguna AMP Blogger Template, pastinya kita tidak sanggup mencicipi fitur bawaan dari blogger ini. Jadi, sesuai dengan panduan ampproject.com, kalau ingin mengaktifkan fitur ini, harus memasang komponen amp-lightbox-gallery pada template blog dan isyarat css untuk mengaktifkan image lightbox pada amp blog.
Bagaimana Cara Memasang Image Lightbox Valid AMP Blogger Template ?
Silahkan ikuti langkahnya dibawah ini :- Memasang Komponen amp-lightbox-gallery
- Pasang Komponen
amp-lightbox-gallerydibawah ini, copy paste dan taruh di atas isyarat</head>.
<script async='async' custom-element="amp-lightbox-gallery" src="https://cdn.ampproject.org/v0/amp-lightbox-gallery-0.1.js"></script>- Memasang Komponen amp-carousel
Berikutnya Anda copy paste komponen dibawah ini, kemudian taruh di atas isyarat
</head>.<script async='async' custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"></script> Memasang Kode CSS Image Lightbox pada AMP Template
Anda copy paste isyarat CSS berikut ini, dan taruh sehabis isyarat<style amp-custom='amp-custom'>.amp-img[lightbox] {cursor: pointer;}Mengaktifkan Image Lightbox Valid AMP Blogger Template
Untuk mengaktifkan image lightbox ketika gambar di artikel diklik, kita masukan taglightbox='lightbox' pada tag <amp-img> ketika memasukan gambar pada postingan blogger pada bab HTML, bukan Compose.Contohnya menyerupai di bawah ini, Anda klik gambarnya:
<amp-img lightbox='lightbox' alt="Cara Memasang Image Lightbox Valid AMP Blogger Template Cara Memasang Image Lightbox Valid AMP Blogger Template" height='320px' layout="fixed-height" src="https://2.bp.blogspot.com/-l6u_b1pEnAo/W5TsEs4U1iI/AAAAAAAACjs/uki91UWxon0pZHB2Y0IAqcaGl4108pZCACLcBGAs/w765/bloggernttpc.png"></amp-img>Jika dalam posting Anda, mengupload lebih dari satu image, maka akan muncul tombol NEXT_PREV pada image lightboxnya.
Atau untuk demo next-prev nya, Anda klik tautan berikut ini, Alternatif AdSense 2018, 3 Situs Penyedia Iklan Terbaik Untuk Blog Valid AMP Template.
Bagaimana? Praktis kan. Semoga posting Cara Memasang Image Lightbox Valid AMP Blogger Template sanggup bermamfaat untuk Anda.