Stylish And Awesome Customized 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.

It’s important to note that it is the bloggers responsibility to ensure that the notification bar is clearly visible and accurately describes what Cookies are being used. If you wish to remove it, it is your responsibility to inform your visitors and obtain consent for any Cookies that your blog uses. You can visit Google Blogger Cookie Notification News to read more about the Google Blogger Cookie Notification.

The notice bar shows on all blogs, either they are .blogspot.com, Custom domains as .com, .net, .org etc or on ccTLD. The notice bar is always shown to the visitors who are from the countries associated to the European Union. When the visitor will click Got it than it will disappear.

How To See The Cookies Notification Bar Outside The EU?

It will be shown only to visitors from European Union associated countries like Italy, France, UK, Denmark, Sweden, Greece, Germany etc. If you are using a Blogspot sub-domain then you can see the notification bar by changing the country code. For example – instead of your domain ending in .blogspot.com change it to .blogspot.fr or .blogspot.ie.

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 or will lead your to Learn More.

How To Hide/Disable The EU Cookies Notice?

1.) Go To Your www.blogger.com
2.) Open Your Desire “Blog”.
3.) Go To “Template”.
4.) Click “Edit HTML”.
5.) Now “Click” Within Code Box.
6.) Press [CTRL+F] To Search </head> Code.
7.) Now “Copy” The Below Code And “Paste” It Before </head> Code..
8.) Click “Save Template” And Done.

<script type="text/javascript">cookieChoices = {};</script>

How To Customize The EU Cookies Notice Bar?

1.) Go To Your www.blogger.com
2.) Open Your Desire “Blog”.
3.) Go To “Template”.
4.) Click “Edit HTML”.
5.) Now “Click” Within Code Box.
6.) Press [CTRL+F] To Search </head> Code.
7.) Now “Copy” The Below Code And “Paste” It Before </head> Code..
8.) Click “Save Template” And Done.

<!-- START Custom EU Cookies Notice --> 
<script type="text/javascript"> 
  cookieOptions = { 
    msg: "This site uses cookies from Google to deliver its services, to personalize 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.", 
    link: "https://www.blogger.com/go/blogspot-cookies", 
    close: "Okay!", 
    learn: "Learn More" }; 
</script> 
<!-- END Custom EU Cookies Notice -->

How To Add Customize CSS The EU Cookies Notice Bar?

1.) Go To Your www.blogger.com
2.) Open Your Desire “Blog”.
3.) Go To “Template”.
4.) Click “Edit HTML”.
5.) Now “Click” Within Code Box.
6.) Press [CTRL+F] To Search </head> Code.
7.) Now “Copy” The Below Code And “Paste” It Before </head> Code..
8.) Click “Save Template” And Done.

<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>

Last Words:

That’s all we have. If you have any problem with this code in your template then feel free to contact us with full explanation of your problem. We will reply you as time allow to us. Don’t forget to share this with your friends so they can also take benefit from it and leave your precious feedback in our comment form below. Happy blogging, See you in next article…