Add Custom Cookie Notification Widget for Blogger Themes with AMP HTML

When using a customize Blogger Theme with AMP HTML integrations on Blogger platform, users can add their own cookie notification if this is not available on their AMP powered blogs or the theme does not support the javascripts included by Blogger platform.

A live & working example for this custom cookie notification is available on this Blogger Theme with AMP HTML integration, scroll to bottom & look at the the top of the page footer.

What is unique about this cookie notification when applied on Blogger blog with AMP HTML:-

• Fully customize to your own text & links.
• Use existing Blogger widgets and valid AMP HTML
• Editable from Blogger Layout panel.
• Supports <amp-accordion/> components
• Has a clickable "dismiss" button to hide when viewed.
• Widget compatible with any AMP integrations for Blogger themes.

Earlier in this blog, we have shared how to add EU cookie notification using amp-notification components for Blogger theme with AMP HTML. Read the full tutorial & guide here.

Here's why Blogger users needs to display EU Cookie Notification as explained here at Blogger Support/Help article: Cookie Notification for European Union Countries.

Here's how to add this custom EU Cookie Notification on Blogger blogs with AMP HTML integrations.

How to Add Custom Cookie Notification on Blogger AMP Themes 

For this example, we will display the cookie notification somewhere in the footer section of a blog.

• Go to Theme > Edit HTML
• find <footer>
• copy and paste below codes above/before <footer> tag.

      <b:section class='blogramp-cookie' id='blogramp-cookie' showaddelement='no'>
        <b:widget id='HTML101' locked='false' title='Cookie Notify' type='HTML' version='1'>
          <b:widget-settings>
            <b:widget-setting name='content'>&lt;p&gt;This website uses cookies to enhance user experience browsing web pages.
&lt;br /&gt;
View our &lt;a href=&quot;/p/privacy.html&quot;&gt;Privacy Policy&lt;/a&gt; for more information.
&lt;/p&gt;</b:widget-setting>
          </b:widget-settings>
          <b:includable id='main'>
    <amp-accordion class='cookies' expr:id='&quot;cookies-&quot; + data:widget.instanceId + &quot;?m=0&quot;'>
      <section expanded='expanded'>
        <h4><span>x</span></h4>
        <div>
        <data:content/>
        </div>
      </section>
    </amp-accordion>  
</b:includable>
        </b:widget>
      </b:section>

• Click Save Theme

If during Save Theme an error occurs, update the widget ID to a new unique ID. Currently a unique ID have been assigned.

Add Styles for Custom Cookie Notification on Blogger Blogs.

• Scroll up your theme codes & find <style amp-custom> tag
• copy & paste below CSS above/before the  </style> tag

.blogramp-cookie {
  background-color: #3b3b3b;
  color: #fff;
  text-align: center;
  font-size: 85%;
}

.blogramp-cookie a {
  color: inherit;
  border-bottom: 1px dotted #fff;
}

.blogramp-cookie p {
  margin-bottom: 0;
}

.blogramp-cookie amp-accordion section {
  padding: 1em 0;
}

.blogramp-cookie amp-accordion,
.blogramp-cookie amp-accordion div {
  border: 0;
  border-radius: 0;
  margin: 0;
  padding:0;
}

.blogramp-cookie amp-accordion h4 {
  font-size:100%;
  color: inherit;
  background-color: transparent;
  border:0;
  border-radius:0;
  margin:0;
  display:inline-block;
  padding:0;
}

.blogramp-cookie amp-accordion h4>span {
  display:inline-block;
  float: right;
  height: 40px;
  width:40px;
  position: relative;
}

.blogramp-cookie amp-accordion div {
  margin: -40px 50px 0;
}

.blogramp-cookie amp-accordion section {
  display: none;
}

body .blogramp-cookie amp-accordion section[expanded] {
  display: block;
}

click Save Theme

Update the cookie notification background color & text color accordingly.

Update Text for Custom Cookies Notification

• Go to Layout panel
• Refresh your Layout panel if the browser have not done so.
• Find the newly added widget with title "Cookie Notify"
• click Edit and make your changes here.
• click Save to save your changes.

Subscibe to our blog to recieve current & new updates on Blogger AMP HTML integrations right here.

Custom cookies notification like this allows users to customize text & use the dismiss cookie feature to hide them if required by users. This dismiss action is also saved by <amp-accordion/> component & will not display if it is clicked until the same user clear his/her browser cookies & cache.

This custom Blogger theme widget technique is used on Blogger AMP theme like this blog -- where users do not need to edit Theme codes to apply custom settings.

Makes managing Blogger blog layout & customization super easy -- even for beginners!

Contact Theme contributors for further information, theme downloads & installation guide.