Customize Blogger EU Cookies Notification Bar in AMP Blog

Customize Blogger Cookies Notification Bar in AMP HTML Blogger

Actually, Blogger already have cookies bar by default, so users do not have to install their own cookies bar.

But the appearance of cookies bar on this blogger caused an error on blogs that use AMP (if I'm not mistaken). But I still have not figured out how to disable this blogger cookies bar for blogs with AMP HTML.

While looking for a way to disable the blogger cookies bar, I will now share how to put cookies bar in AMP blogspot.

This AMP cookies bar uses amp-user-notification that is provided for things like cookies bar.

First, Please copy and paste the following JS above the code </ 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>

If the second or one of the js is already in the blog then you do not need to install it again.

Then save the following CSS in the amp-custom='amp-custom' style of your blog.

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}

Then save the following HTML above the code </ 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://amp-blogger.com" target="_blank" title="More Info">More Info</a></p>

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

  </amp-user-notification>

Please replace the URL http://amp-blogger.com with the your URL of privacy policy.

Then make sure you also have installed the amp-analitycs code, if not please put the following code above the code </ body>

  <amp-analytics id='analytics1' type='googleanalytics'>

<script type='application/json'>

{

  "vars": {

    "account": "UA-xxxxxxxxxx"

  },

  "triggers": {

    "trackPageview": {

      "on": "visible",

      "request": "pageview"

    }

  }

}

</script>

</amp-analytics>

Replace UA-xxxxxxxxxx code with your blog analitycs account code.