Memasang Cookies Kafe Pada Blog Amp Html

Sebenarnya untuk blogger sendiri sudah mempunyai cookies kafetaria secara default, jadi pengguna tidak perlu memasang sendiri cookies bar. Namun kemunculan cookies kafetaria pada blogger ini mengakibatkan error pada blog yang memakai AMP (kalau saya tidak salah). Tetapi saya masih belum menemukan cara untuk menonaktifkan cookies kafetaria blogger ini untuk blog dengan AMP HTML.

Sambil mencari cara untuk menonaktifkan blogger cookies kafetaria tersebut, sekarang saya akan membagikan cara untuk memasang cookies kafetaria AMP. Tampilannya saya mengambil tampilan custom cookies bar untuk blog non AMP.

Untuk demo cookies kafetaria AMP ini silahkan lihat pada tombol di bawah ini.

DEMO

Cookies kafetaria AMP ini memakai amp-user-notification yang memang disediakan untuk keperluan hal-hal menyerupai cookies kafetaria ini.

Silahkan simpan js-js berikut di atas arahan </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 arahan </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="Memasang Cookies Bar Pada Blog AMP HTML">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 arahan amp-analitycs, kalau belum silahkan pasang arahan berikut ini di atas arahan </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 arahan UA-xxxxxxxxxx dengan arahan akun analitycs blog Anda.


Sumber https://www.kompiajaib.com/

Share this post