Skip to main content

follow us



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.

Baca juga :

  1. Cara Mendapatkan Matched Content Dari Google Adsense untuk Blogger
  2. Daftar HPK (High Paying Keywords) Google Adsense Indonesia 2019 Terbaru
  3. Cara Melindungi Konten Blog dengan Widget DMCA Badge di Blogger AMP HTML
  4. Cara Terbaru Seting robot.txt dan Header Tag Super SEO 2019 pada Blog AMP

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.

You Might Also Like:

Comment Policy: Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.
Buka Komentar