Customize Blogger EU Cookies Notification Bar

All blogspot users are recently informed in their dashboards that European Union (EU) laws require all publishers to give EU visitors information about cookies used on their blogs. For that reason Blogger team has automatically added a notice bar on all blogs to help meet these regulations. The notice lets visitors know about Google's use of certain Blogger and other cookies used on these blogs, including Google Analytics and AdSense cookies. It is a publisher's responsibility to ensure that the Notification bar must be clearly visible on the blog and must 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.

Will Blogger Show The notice on Custom Domains also?

Of course it will!

Note that all blogspot blogs which are using the default .blogspot.com Domains ( country-code Top Level Domain or ccTLD) or custom domains (such as .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 in a European Country:

This site uses cookies from Google to deliver its services, to personalise ads and to analyse traffic. Information about your use of this site is shared with Google. By using this site, you agree to its use of cookies.Learn More Got it

The message will disappear when the user clicks Got it.

Is it shown on all Country Specific URLs ccTLD?

It will be shown only to visitors from European Union associated countries like Italy, France, UK, Denmark, Sweden, Greece, Germany etc.

You won't see the notice outside of the EU.

How to see the Notice if you are Outside European Union?

To see the notice if you’re outside of the EU, view your blog and change the country code, for example blogspot.it,  blogspot.fr or blogspot.co.uk.

If you use a custom domain, you can use a EU IP Proxy address to browser your site. A Simple trick is to add the following string parameter just after your custom domain:

.prx.gb.teleport.to

Can We Hide or Disable the EU Cookies Notice?

Yes you can but only if you are already displaying a custom message using custom script on Top of your blog which informs users about the use of cookies on your site. If you are not using any such script to inform readers about cookies then you are obliged to display the Blogger Default notice instead. You must not choose to avoid informing readers about the use of Cookies on your blog. Doing such may cause your blog to get banned.

If you are already using a custom script to inform readers about Cookies used by 3rd part services on your blog and the message clearly links to your Privacy Statement page then you can surely choose to disable the default notice by add the following script just above </head> tag inside your template.

<script type="text/javascript">  

cookieChoices = {};

 </script>

You must not try to hide this notice bar like we normally hide the Blogger navbar. If in case you have not hidden the blogger navbar then the message will look like this:

If you have chosen to hide the navbar then the message will display like this:

The default Notice is a long lengthy text with dull colors, in order to make sure to display a custom Short message to your readers that may also match your Template color theme then follow the steps below:

1. Go To blogger > Template > Backup your template
2. Click Edit HTML
3. Paste the following code just below ]]></b:skin> tag

<!--Custom EU Cookies Notice by STCnetwork.org-->
<script type="text/javascript">
cookieOptions = {
msg: "This site uses cookies to help deliver services. By using this site, you agree to the use of cookies.",
link: "https://www.blogger.com/go/blogspot-cookies",
close: "Got it!",
learn: "Learn More" };
</script>
<style>.cookie-choices-info {z-index:999999!important;background-color:#333333!important;border-bottom: 1px solid #6FC415;
box-shadow: 1px 2px 2px #000!important; padding:3px 0px!important;}.cookie-choices-info .cookie-choices-text{font-size:14px !important; color:#dddddd!important;}.cookie-choices-info .cookie-choices-button{ background-color: #6FC415!important;border-radius: 1px!important;box-shadow: 2px 3px 2px #000!important; padding:6px!important;text-transform: none!important;}</style> 

You can make the following customizations if you want:

• Replace the black bolded text with any message you may like.
• If you want you can replace the yellow highlighted link with your Custom Privacy Statement page else you can leave it as it is because the default link points to Blogger's Privacy page for Cookies info.
• To change Notice Bar background color edit #333333
• To change the green border that appears at the bottom of the bar edit #6FC415
• To change the background color of Buttons edit #6FC415
• To change the font color edit #dddddd

 4.Save your template and you are all done!