Customize Blogger Cookies Notification Bar

Monday, September 19, 2016 No Comment

This post may contain referral links. For more info, please read my disclosure policy.

Blogger Cookies notification

Google Blogspot users frequently get this automated Cookies notification on their blogs for EU visitors.
The cookie message appears at the top of your blog.

Though the notification is annoying but here is why it is important:
European laws require that digital publishers give visitors to their sites and apps information about their use of cookies and other forms of local storage. In many cases these laws also require that consent be obtained.

It is a publisher's responsibility to ensure that the Notification bar is shown on his blog and it should not be disabled in any case using CSS or JavaScript unless the publisher is already displaying a custom bar notifying users about the use of cookies on his site.

all blogspot blogs using the default .blogspot.com sub-domains ( country-code Top Level Domain or ccTLD) or custom domains (be it  .com, .net, .org etc.) will automatically show the following sticky Notice at the top of the page when a user visits that blog from a browser with an European IP:



Customizing the EU Cookies Notice Bar
1. Go To blogger > Template > Backup your template

 2. Click Edit HTML

 3. Paste the following code just below ]]></b:skin> tag

<script type='text/javascript'> 
  cookieOptions = { 
    msg: &quot;This site uses cookies to help deliver services. By using this site, you agree to the use of cookies.&quot;, 
    link: &quot;https://www.blogger.com/go/blogspot-cookies",l&quot;, 
    close: &quot;Got it!&quot;, 
    learn: &quot;Learn More&quot; }; 
</script> 
    <style>.cookie-choices-info {z-index:999999!important;background-color:#ffe2dc!important;border-bottom: 1px solid #333333;  
        box-shadow: 1px 2px 2px #000!important; padding:3px 0px!important;}.cookie-choices-info .cookie-choices-text{font-size:14px !important; color:#333333!important;}.cookie-choices-info .cookie-choices-button{  background-color: #333333!important;border-radius: 1px!important;box-shadow: 2px 3px 2px #000!important; padding:6px!important;text-transform: none!important;}
</style>
Editing the CSS 
Replace the black bolded text with any message you may
like.
 you can replace the  highlighted link with your Custom Privacy Statement page if you don't want to link to https://www.blogger.com/go/blogspot-
cookies". The default link points to Blogger's Privacy page for Cookies info.

To change Notice Bar background color edit #ff2edc
To change the border that appears at the bottom of
the bar edit #333333
To change the background color of Buttons edit #333333
To change the font color edit #333333

End result
If you paste the above directly to your template html, your cookies notification changes from; 

This

To


This

No Comment Yet - Be The First!

Blog Archive

Contact / Address

Mr Sunday Joseph's Compound,
Off Goodnews street, Azikoro,
Yenagoa Bayelsa State
Nigeria.
Zipcode: 569101

Reach Us on
+2348122329659
or
Contact@blogtrovert.com

Blog Owned and managed By:
Joseph Onome.