Gambar Posting Lightbox di Blog AMP



Gambar ber-lightbox juga dapat disebut image viewer. Dalam dunia blog maksudnya adalah gambar yang memiliki review dengan diikuti cahaya transparan dibelakangnya. Namun, kali ini Fajrin.web.Id akan membagikan cara membuat gambar posting lightbox di blog AMP.

Adapun syarat yang harus terpenuhi dalam menerapkan tutorial ini, yaitu:

Menggunakan Blogger Terverifikasi AMP

Mengapa demikian? Sebab, apabila blog Anda belum terverifikasi AMP, Anda tidak bisa menerapkan tutorial ini. Mengapa harus AMP? Karena, blog AMP khususnya blogger disarankan untuk mengubah versi AMP. Dengan desain AMP, kinerja blog Anda akan menjadi lebih baik. Hal tersebut sudah dijelaskan pada alamat ini:
https://www.ampproject.org/id/learn/about-how/ 😎

Baca juga: Membuat Gambar Posting Blog Terverifikasi AMP

Kemudian, langsung pada tutorial membuat gambar posting lightbox di blog AMP.

1. Pasang Javascript

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

2. Pasang HTML Lightbox

<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://4.bp.blogspot.com/-lMQtz495Z44/WkUoMJQg1aI/AAAAAAAAFwM/_o55ZyWNQ3g90zBPIQT0BfYzn1NHiQwWACK4BGAYYCw/s1600/messi%2Bfajrin%2Bweb%2Bid-min.jpg"
width="700"
height="393"></amp-img>

3. Hasil gambar lightbox (silakan klik gambar)



Menambahkan caption pada gambar

<figure>
<amp-img on="tap:lightbox1"
role="button"
tabindex="0"
src="https://4.bp.blogspot.com/-lMQtz495Z44/WkUoMJQg1aI/AAAAAAAAFwM/_o55ZyWNQ3g90zBPIQT0BfYzn1NHiQwWACK4BGAYYCw/s1600/messi%2Bfajrin%2Bweb%2Bid-min.jpg"
alt="Picture messi"
title="Picture lightbox messi"
layout="responsive"
width="700"
height="393"></amp-img>
<figcaption>Deskripsi singkat gambar Anda.</figcaption>
</figure><

*) Tulisan bercetak tebal berwarna biru, silakan Anda ubah sesuai selera.
Bagaimana? Mudah bukan? Selamat mencoba.

Sumber: https://ampbyexample.com/components/amp-image-lightbox/

Comments and Reactions

Comment Policy: Saya sangat menerima komentar yang relevan dari Anda. Dengan hormat, diskusi hangat dari Anda, saya nantikan. Saya harap Anda sudah membaca kebijakan komentar secara lengkap.
Pendapatmu :
Buka Komentar