Skip to main content

Membuat Image Lightbox Di Blog AMP

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://1.bp.blogspot.com/-M9TFTVHnUl8/WrJKbc27d4I/AAAAAAAAB0U/-5CPxlZvV0kjvQdh0qcuCq965-ddhujnQCLcBGAs/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.

You Might Also Like:

Buka Komentar