Skip to main content
Website Mini

follow us

Shortcode AMP Untuk Mempermudah Membuat Beberapa Elemen

Beberapan hari yang lalu Saya sudah posting Membuat Teks Berwarna (Gradasi) Hanya Dengan CSS Dan pada kesempatan kali ini saya akan coba posting Shortcode AMP Untuk Mempermudah Membuat Beberapa Elemen

Ada beberapa kode standar action atau shortcode pada AMP untuk mempermudah memberikan perintah tertentu pada suatu elemen seperti redirect, print, show, hide, toggle, scroll to, dan focus pada input.

Dengan perintah-perintah tersebut maka kita tidak memerlukan plugin AMP untuk menjalankan fungsinya. Contohnya seperti Membuat Tombol Buka Tutup Komentar Disqus Di Blog AMP yang menggunakan perintah show dan hide

Perintah-perintah tersebut di antaranya seperti di bawah ini.

AMP.navigateTo()


<button on="tap:AMP.navigateTo(url='http://google.com')">google.com</button>



AMP.print()


<button on="tap:AMP.print">Print</button>



Show, Hide, Toggle Visibility


<button on="tap:normal-element.show">Show</button>
<button on="tap:normal-element.hide">Hide</button>
<button on="tap:normal-element.toggleVisibility">Toggle Visibility</button>

<div id="normal-element" hidden>
  I was initially hidden.
</div>





Scroll To


  <button on="tap:normal-element2.scrollTo">ScrollTo</button>
  <button on="tap:normal-element2.scrollTo('position' = 'bottom')">ScrollTo Bottom</button>
  <button on="tap:normal-element2.scrollTo('position' = 'center')">ScrollTo Center</button>
  <button on="tap:normal-element2.scrollTo('duration' = 5000)">ScrollTo Slowly</button>

<div id="normal-element2">
  You have to scroll to see me.
</div>






Focus


<button on="tap:input-element.focus">Focus</button>



Menggabungkan Perintah


<button on="tap:normal-element2.scrollTo('position' = 'center'), input-element.focus">ScrollTo and Focus</button>













































Silahkan gunakan sesuai kebutuhan.
Baca juga: Membuat ScrollTo Pada Sticky Header Untuk Blog AMP

Sumber:
https://www.kompiajaib.com/2017/08/beberapa-shortcode-amp-untuk.html
https://github.com/ampproject/amphtml/blob/master/examples/standard-actions.amp.html

You Might Also Like:

Buka Komentar