Cara Membuat Papan Notifikasi Amp Template di Area Footer

Pada Amp template sangat tidak dibolehkan kita meletakan sembarangan kode-kode script seperti yang biasa kita gunakan di template biasa, oleh karena itu untuk dapat membuat sebuah Amp Template tetap valid maka semua aturan Wajib! kita ikuti, termasuk kedalamnya meletakan kode iklan, papan pemberitahuan dan sebagainya. Silahkan baca juga artikel sebelumnya Cara Membuat Tombol Show Hide Disqus Comment Pada AMP Template.

Pada template biasa ketika kita ingin memasang papan pemberitahuan Cookies, dapat dilakukan hanya dengan meletakan beberapa element CSS dan fungsi Javascript pada bagian tertentu di HTML template milik kita, namun semua itu tidak berlaku bagi Template Amp, kerena dapat menyebabkan error dan tidak valid.

Untuk mengatasi masalah diatas dibawah ini saya akan tuliskan cara membuat papan Notifikasi atau pemberitahuan yang Valid AMP, dan jika ada diantara anda pembaca blog ini ingin memasangnya di blog AMP milik anda silahkan ikuti langkah-langkahnya dibawah ini:

Cara Membuat Papan Notifikasi Amp Template di Area Footer:

1. Salin kode dibawah ini dan sisipkan setelah tag <style amp-custom="amp-custom">

footer {

margin-bottom: 50px;}

amp-user-notification {

padding: 30px;

background: #000;

color:#fff}

2. Salin kode dibawah ini dan letajan sebelum tag </head>

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

3. Salin dan letakan kode HTML dibawah ini sebelum tag </body>

<amp-user-notification 


layout="nodisplay"


id="amp-user-notification1">


www.amp-bloggertheme.blogspot.com uses cookies to store information about visitors preferences.


<button on="tap:amp-user-notification1.dismiss">I accept</button>


</amp-user-notification>

4. Simpan Template anda dan lihat hasilnya.

DEMO

Bagaimana cukup mudah bukan selamat mencoba dan semoga berhasil.