Ditulis oleh: Ditulis pada: 3/16/2021
Komponen AMP Bisa Dipakai Di Halaman Non AMP - Seperti halnya Jquery Library pada halaman non AMP yang selama ini kita kenal, AMP juga memiliki library pokok seperti halnya Jquery. Library pokok ini harus ada di halaman AMP agar semua komponen bisa berjalan.
Dan setiap komponen juga memiliki ekstensi khusus atau kustom elemen yang harus disertakan ketika komponen dipakai di halaman sehingga komponen bisa berjalan sempurna. Dengan ini juga pembuatan komponen menjadi sederhana dan mudah.
Komponen-komponen AMP cukup beragam dan cukup menarik, dan ternyata bisa digunakan di halaman non AMP.
Jika Anda menggunakan blog non AMP, Anda bisa menggunakan komponen AMP jika Anda tertarik untuk menggunakannya.
Seperti contohnya, jika Anda tertarik untuk mencoba menggunakan scroll to top AMP yang sudah saya share sebelumnya. Anda bisa memasang scroll to top AMP tersebut pada blog non AMP Anda.
Yang penting dilakukan agar elemen AMP bisa dipasang di halaman non AMP yaitu menyimpan librari ini di atas kode </head>
<script async='async' src='https://cdn.ampproject.org/v0.js'></script>Selanjutnya setelah itu tinggal mengikuti tutorialnya, untuk js kustom elemen silahkan simpan di atas kode </head>, untuk CSS simpan di style blog, dan seterusnya mengikuti tutorialnya.
Ini berlaku untuk semua penerapan komponen AMP pada halaman non AMP seperti layaknya di halaman AMP. Ini juga berlaku untuk penggunaan action AMP seperti show hide dan lainnya.
Untuk penggunaan element AMP yang menggunakan js khusus untuk element tersebut, maka pastikan untuk memasang JS element tersebut di atas kode </head> seperti JS Library AMP di atas. Misalnya Anda ingin menggunakan amp-image-slider maka silahkan pasang JS-nya seperti berikut:
<script async="async" src="https://cdn.ampproject.org/v0/amp-image-slider-0.1.js"></script>Sebagai demonya, saya membuat scroll to top AMP di halaman non AMP pada JSFiddle berikut.
CATATAN: Sebenarnya penggunaan elemen/komponen AMP di halaman non AMP ini belum ada pernyataan resmi dari Google sebagai developer AMP, ini hanya berdasarkan percobaan yang saya lakukan.
Selamat mencoba dan semoga bermanfaat.