Cara Membuat Tombol Teks LightBox pada AMP Template

Pada tutorial saya sebelumnya sudah saya sampaikan tentang Cara Membuat Subscribe BOX yang valid AMP, untuk tutorial kali ini saya akan menuliskan tutorial Bagaimana Membuat Tombol Teks LightBOX dengan latar transparan.

Menurut hemat saya fungsi dari Teks LightBOX bisa bermacam-macam, tergantung tujuan dari kita masing-masing, disini katakanlah kita akan membuat suatu deskripsi berkenaan dengan tampilan sebuah gambar atau video yang kita postingkan.

Sehingga ketika ada pengunjung yang melihat sebuah video ataupun gambar maka mereka bisa dengan mudah melihat isi deskripsi dari video atau gambar tersebut hanya dengan menekan tombol Teks LightBOX yang kita sediakan, wow keren bukan?





Nah untuk dapat memasangnya di blog AMP, kita wajib mengikuti langkah-langkah yang akan saya jelaskan dibawah ini;

Membuat Tombol Teks LightBOX pada Template AMP

1. Sisipkan kode CSS dibawah ini setelah tag <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;}

2. Silahkan salin kode dibawah ini, edit HTML dan letakan pada halaman HTML blog anda sebelum tag </head>

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

Simpan template anda.

3. Buatlah sebuah postingan dan sisipkan kode dibawah ini pada HTML mode diarea yang ingin anda kehendaki.

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

4. Selanjutnya Publish postingan anda dan lihat hasilnya.

Bagaimana sangat mudah bukan? silahkan dicoba dan bereksperimen dengan imajinasi anda, sehingga didapat sebuah tampilan yang lebih dinamis dan indah, semoga bermanfaat, dan untk demo nya silahkan klik tombol dibawah ini kemudian klik tombol hijau pada halaman demo.

DEMO