Cara Buat Tombol AMP lightbox dan Amp Image Lightbox







BLOG MOBILE.



kembali lagi di blog saya yang sangat sederhana ini.

Setelah kemarin saya sudah membuat cara mudah membuat amp-image-lightbox. di blog yang sudah valid AMP HTML.
Kali ini saya akan mumbuat totorial sederhana buat tombol lightbox.

sebenarnya ini hampir sama seperti AMP image lightbox bedanya kalo AMP lightbox itu ada sebuah tombol nya jadi ketika di klik tombolnya maka lightbox nya akan mucul nah kalo AMP image lightbox kan harus di klik gambarnya baru gambarnya muncul.
Dan tombol AMP lightbox juga bisa kita sisipkan gambar,tulisan dan juga blockquote.

Langsung saja berikut ini caranya dan gampang untuk membuatnya hehe.

LANGKAH PERTAMA.

Seperti biasa untuk blog AMP sisipkan kode AMP js nya di tag </head>
Simpan script amp-lightbox ini.

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

Dan simpan juga CSS berikut ini di AMP costum.

.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;}

LANGKAH KEDUA.

Silahkan anda posting dan seperti biasa dan untuk membuat tombol amp-lightbox nya pastikan dalam mode HTML.
berikut ini contoh scrpit nya.

<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>

Dan untuk buat blockquote ini script nya.

<button on="tap:tweets-lb">See Quote</button>
<amp-lightbox id="tweets-lb" layout="nodisplay">
    <blockquote>"Don't talk to me about JavaScript fatigue" - Horse JS</blockquote>
    <button on="tap:tweets-lb.close">Nice!</button>
</amp-lightbox>

Jika ingin nambahkan gambar berikut ini script nya.

<button on="tap:my-lightbox">Open lightbox</button>

<amp-lightbox id="my-lightbox" layout="nodisplay">
  <div class="lightbox">
    <amp-img src="my-full-image.jpg" width=300 height=800 on="tap:my-lightbox.close">
  </div>
</amp-lightbox>


Hasilnya seperti di bawah ini.





Catatan amp lightbox tidak bisa di gunakan bersama dalam satu postingan misalnya jika ingin menggunakan blockquote dengan tulisan harus satu dan juga gambar karna otomatis postingan yang pertama misalnya blockquote tulisan dan kedua dengan gambar maka gambar tidak akan muncul karna mengikuti amp lightbox blockquote yang pertama


Nah mudah kan hehe.
Terimakasih sudah membaca dan berkunjung di blog saya semoga bemanfaat.
Jika ada pertanyaan gak usah ragu untuk kontak saya di kontak form saya hehe.

blog views
Reactions:
Donate via PayPal

You Might Also Like:

ADD A COMMENT WITH YOUR FACEBOOK PLEASE WAIT FOR FACEBOOK COMMENT WILL SOON OPEN

ADD A COMMENT WITH DISQUS HIDE COMMENT

Disqus Comments

ADD A COMMENT WITH GOOGLE PLUS HIDE COMMENT

google Comments

Hello, how may we help you? Just send us a message now to get assistance.

Facebook Messenger ×