Cara Memasang Image Lightbox Valid AMP Blogger Template

Cara Memasang Image Lightbox Valid AMP Blogger Template

Cara Memasang Image Lightbox Valid AMP Blogger Template



Bloggerntt.com - 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 jika 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 bisa merasakan fitur bawaan dari blogger ini. Jadi, sesuai dengan panduan ampproject.com, jika ingin mengaktifkan fitur ini, harus memasang komponen amp-lightbox-gallery pada template blog dan kode 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

  1. Pasang Komponen amp-lightbox-gallery dibawah ini, copy paste dan taruh di atas kode </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, lalu taruh di atas kode </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 kode CSS berikut ini, dan taruh setelah kode <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 tag lightbox='lightbox' pada tag <amp-img> saat memasukan gambar pada postingan blogger pada bagian HTML, bukan Compose.

Contohnya seperti di bawah ini, Anda klik gambarnya:

<amp-img lightbox='lightbox' alt="amp lightbox" 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? Mudah kan. Semoga posting Cara Memasang Image Lightbox Valid AMP Blogger Template dapat bermamfaat untuk Anda.
Blogger
Disqus
Pilih Sistem Komentar

No comments

۝ Peraturan dalam berkomentar :

☛ UpsS,. Budayakan berkomentar sesudah membaca artikel sob.
☛ Dilarang Menghina, Promosi (Iklan), Menyelipkan Link Aktiv, dsb.
☛ Dilarang berkomentar berbau Porno, Spam, Sara, Politic, Profokasi.
☛ Berkomentarlah yang Sopan,Bijak, dan Sesuai Artikel (Dilarang OOT)
☛ Saya sangat berterima kasih atas semua yang mau berkomentar diblog saya.
☛ Saya PASTI akan berkunjung balik ke blog Sobat yang sudah mau berkomentar di sini.

Copyright © 2018 - Blogger NTT® Bloggerntt.com✓

Advertiser