Buat Tombol Lightbox Di AMP

Blogger yang sudah suport amp pasti banyak banget kesusahan kalau baru punya blog yang versi seperti ini , tetapi menggunakan AMP kamu bisa mendapatkan sensi yang lebih cepat dari blog yang biasa nya. Kali ini saya kan memberikan cara Buat Tombol Lightbox Di AMP jika ada pertanyaan bisa comment di bawah dan semoga sukses oprek blog versi amp nya . Berikut ini tutorial nya


Pertama kamu masukan css di bawah <style amp-custom='amp-custom'>

.lightbox {background:rgba(0,0,0,0.8);width:100%;height:100%;position: absolute;top:0} .lightbox p,.lightbox h1 {padding:70px 50px;color:#ffffff;}

Setelah itu cari kode </head> lalu letakan sccript di bawah ini tepat di atasnya

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

selesai sekarang simpan template kamu lalu buatlah sebuah postingan dan masukan kode di bawah ini di tempat mana yang akan anda tampilkan

<button on="tap:my-lightbox"       role="button"       tabindex="0"> TOMBOL TEKS LIGHTBOX </button> <amp-lightbox id="my-lightbox"       layout="nodisplay"> <div class="lightbox"         on="tap:my-lightbox.close"         role="button"         tabindex="0"> <h1>JUDUL DESKRIPSINYA</h1> <p>LETAKAN DESKRIPSI NYA DISINI</p> </div> </amp-lightbox>

silakan publish artikel yang sudah anda buat dan sudah menyisipkan script di atas untuk contoh dari script ini silakan cek demo di bawah ini

Demo