AMP Blogger Tutorial

Membuat Image Lightbox Di Blog AMP - Image Lightbox adalah ketika sebuah gambar di postingan di klik, maka akan muncul sebuah overlay yang menampilkan gambar yang lebih besar.

Sebenarnya Blogger sendiri sudah memiliki fitur lightbox dan kita bisa mengaktifkannya pada setting di dashboard Blogger. Namun bagi Anda yang sudah melakukan validasi AMP maka Anda tidak bisa menggunakan fitur lightbox Blogger tersebut.

Namun tidak perlu khawatir, disini Saya akan mencoba membagikan artikel Membuat Image Lightbox Di Blog AMP, menggunakan js amp-image-lighbox.

Jika sobat blogger ingin membuat image lightbox di blog amp sobat, ikuti langkahnya dibawah ini.

Silahkan simpan js amp-image-lightbox di bawah ini diatas kode </head>

<script async='async' custom-element='amp-image-lightbox' src='https://cdn.ampproject.org/v0/amp-image-lightbox-0.1.js'></script>

Kemudian untuk menghasilkan gambar lighbox, gunakan html seperti dibawah ini.

<amp-image-lightbox id="lightbox1"
layout="nodisplay"></amp-image-lightbox>

<amp-img 
alt="images"
on="tap:lightbox1"
role="button"
tabindex="0"
layout="responsive"
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEt_BuLUodkFezPNifkmYTDFqa9zoA8SFyhrMZuOYQWCzcjhFSbNgj6qBGORzNpmEEnxHn2UxaL34W3s_QCMDJPZMYSxbs81h-bUDD7Ydmb8XD52tYILJ3M50Vbc3J4hqAo5yglCtQA1k/s1600/membuat-image-light-box-amp.png"
width="750"
height="450"></amp-img>

Maka hasilnya seperti dibawah ini, coba sobat klik pada gambar dibawah ini.

Bagaimana menurut sobat blogger, cukup mudah bukan? Semoga bermanfaat.

Diposkan oleh: Warim Pada:

Berlangganan Lewat Email

Kirim alamat email Anda untuk mendapatkan notifikasi artikel terbaru dari blog Website Mini secara GRATIS langsung di kotak masuk Anda.