Ditulis oleh: Ditulis pada: 10/09/2017
Sebenarnya untuk blogger sendiri sudah memiliki cookies bar secara default, jadi pengguna tidak perlu memasang sendiri cookies bar. Namun kemunculan cookies bar pada blogger ini menyebabkan error pada blog yang menggunakan AMP (kalau saya tidak salah). Tetapi saya masih belum menemukan cara untuk menonaktifkan cookies bar blogger ini untuk blog dengan AMP HTML.Sambil mencari cara untuk menonaktifkan blogger cookies bar tersebut, kini saya akan membagikan cara untuk memasang cookies bar AMP. Tampilannya saya mengambil tampilan custom cookies bar untuk blog non AMP.
Untuk demo cookies bar AMP ini silahkan lihat pada tombol di bawah ini.
Cookies bar AMP ini menggunakan amp-user-notification yang memang disediakan untuk keperluan hal-hal seperti cookies bar ini.
Silahkan simpan js-js berikut di atas kode
</head>
<script async="" custom-element="amp-user-notification" src="https://cdn.ampproject.org/v0/amp-user-notification-0.1.js"></script>
<script async="" custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
Jika kedua atau salah satu dari js tersebut sudah ada di blog maka Anda tidak perlu memasangnya lagi.
Kemudian simpan CSS berikut di style amp-custom='amp-custom' blog Anda.
amp-user-notification#amp-user-notification1{background: #fff;color: #999;padding: 10px;font-size: 17px;font-family: "Helvetica Neue Light", "HelveticaNeue-Light", "Helvetica Neue", Calibri, Helvetica, Arial;border-top: 1px solid #ccc}
amp-user-notification#amp-user-notification1 p{display:inline;float:left;margin:3px 0 0}
amp-user-notification#amp-user-notification1 button{text-align: center;line-height:1;padding: 8px 10px;color:#000;background-color:#f1d600;border:none;border-radius: 5px;-webkit-border-radius: 5px;width: 33%;display: block;margin-left: 10px;float: right;max-width: 120px}
Kemudian simpan HTML berikut di atas kode
</body>
<amp-user-notification layout=nodisplay
id="amp-user-notification1">
<p>This website uses cookies to ensure you get the best experience on our website. <a href="http://adhysuryadi.xyz/privacy/" target="_blank" title="More Info">More Info</a></p>
<button on="tap:amp-user-notification1.dismiss">I accept</button>
</amp-user-notification>
Silahkan ganti URL
http://adhysuryadi.xyz/privacy/ dengan URL halaman privacy blog Anda.Kemudian pastikan Anda juga sudah memasang kode amp-analitycs, jika belum silahkan pasang kode berikut ini di atas kode
</body>
<amp-analytics id='analytics1' type='googleanalytics'>
<script type='application/json'>
{
"vars": {
"account": "UA-xxxxxxxxxx"
},
"triggers": {
"trackPageview": {
"on": "visible",
"request": "pageview"
}
}
}
</script>
</amp-analytics>
Ganti kode
UA-xxxxxxxxxx dengan kode akun analitycs blog Anda.