Customize Blogger EU Cookies Notification Bar

Blogger EU Cookies NoticeAll 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.

EU Cookies notice in Dashboard

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

Like in our case to visit mybloggertricks.com in united kingdom we will type the following URL in address bar:

http://www.mybloggertricks.com.prx.gb.teleport.to

Clicked the 'Got it' button and now you can not see the notice bar again?

Use the Netherlands proxy and it will appear again!  Make sure you don't click got it this time else you will have to delete your browser cookies to make it appear again :)

.prx.us.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>

How Do the Notice Look Like?

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:

EU cookies notice when navbar is enabled

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

EU cookies notice when navbar hidden

Lets Customize the EU Cookies Notice Bar!

Before: A Long Textual string with dull colors.

Default EU cookie Notice bar

After: A Neat and cleaner message with custom colors.

custom EU cookie Notice bar

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!

Need Help?

Let me know if you need any further clarification or help. We have also started a discussion related to this topic at our Forum where you can interact with more bloggers to help you setup the cookie bar for you. Join the discussion by clicking here.

I hope you are now more safe than before. Wish you all a safe blogging journey. Peace and blessings buddies! :)

If you don't want to get yourself into Serious Technical Trouble while editing your Blog Template then just sit back and relax and let us do the Job for you at a fairly reasonable cost. Submit your order details by Clicking Here »

68 comments

PLEASE NOTE:
We have Zero Tolerance to Spam. Chessy Comments and Comments with 'Links' will be deleted immediately upon our review.
  1. Hi Mustafa sir, Glad you came up with this. When that notification appeared I promptly closed it and missed reading it. Then I read about it on the forum. That custom cookie notification looks really cool because it agrees to your blog theme.

    Thanks for sharing. :)

    ReplyDelete
    Replies
    1. A Custom control of elements on any webpage is the best way to make sure you control everything as per your preferences. So glad you found it interesting and useful =)

      Delete
  2. Done, but now I wanted to test and have to delete cookies because the message is not showing thanks to cookies... lol

    ReplyDelete
    Replies
    1. lol that is surely funny in this case but it has a solution too. Try different IP address like instead of using the UK proxy, use that of sweden or italy! =d

      It works this way

      Delete
  3. Brother i am not seeing any notice bar on my blog. I tried to view using UK proxy address but still not seeing. I am still confused.

    Do i have to add it manually on by blog?

    ReplyDelete
    Replies
    1. It must display even if you have not added the script above.

      Add the code I shared above and then test again. If it did not work then share your URL here

      Delete
  4. Helpful post. It cleared all my confusions.
    Thanks

    ReplyDelete
    Replies
    1. I am so glad it helped you better understand EU cookies Policy :)

      Delete
  5. Thank you so much for this tip. Its working like a charm.

    ReplyDelete
  6. Hello, I followed your directions and I haven't noticed that a notice bar comes up when I tested it. Could you please help me?

    ReplyDelete
    Replies
    1. Kindly share your URL so that we could help.

      First kindly add the script that we shared above

      Delete
  7. What if we redirect them to our own blog page where we define how Google uses cookies instant of Google Privacy and term Page.

    ReplyDelete
    Replies
    1. sure you can do that! Just replace the link inside the script above :)

      Delete
  8. Thank you Mohammad Bhai again

    When it start displaying on my blogger control panel of my site http://munnartourguide.com/, I was little bit confused and worried. And really about to mentioned in MBT forum..

    You guys as always on time in this case as well.. Thank you for clearing the doubts of bloggers like me

    Keep educate us and keep going.. All the best for entire team

    ReplyDelete
    Replies
    1. Thank you for your kind feedback. I am glad you found it useful :)

      Delete
  9. Thnak you Mohammad!
    I live in Bulgaria, EU and this EU requirement made such blogs really ugly. I used your method and it is better, but still problematic. Half of the name of my site of the home page is not visible. Could this bar be more narrow? And could it be even a little transparent?
    Thanky you in advance.

    Veselin Kisiov,
    Your faithful reader. :)

    ReplyDelete
    Replies
    1. To make it thinner add this css code :

      .cookie-choices-info .cookie-choices-inner { padding: 5px 8px!important;}

      We can make it transparent but then it wont be supported in IE browsers properly.

      Thank you for being a great reader always :)

      Delete
    2. Thank you very much, Mohammad! It is much better now. I couldn't do it without you :)

      Delete
  10. Well thanks for this awesome post. And also for helping me out and publishing this detailed post.

    ReplyDelete
  11. Is there a way this bar to be put on the downside, not on the top?

    ReplyDelete
    Replies
    1. Replace this code:

      .cookie-choices-info {z-index:999999!important;background-color:#333333!important;border-bottom: 1px solid #6FC415; color:#ffffff!important;
      box-shadow: 1px 2px 2px #000;}



      with this:


      .cookie-choices-info {z-index:999999!important;background-color:#333333!important;border-bottom: 1px solid #6FC415; color:#ffffff!important;
      box-shadow: 1px 2px 2px #000;bottom:0!important; top: inherit!important;}


      That simple! :)

      Delete
    2. Hi! on my blog, http://www.ateaspoonofemily.com/, I followed your instructions but my cookie policy is still showing at the top. Any advice?

      Thanks in advance

      Delete
  12. This is a great help for me. There is small mistake.... add a comma between this classes .cookie-choices-info, .cookie-choices-button so that the code works and one more thing no need of style tag as we are ding this in css section otherwise a comment like symbol is appearing. thanks once again.

    ReplyDelete
    Replies
    1. That is not a mistake buddy but the way to declare a sub css class inside a parent class.

      Style tags are important because I have mentioned in the tutorial to paste the code outside b:skin tag and not inside it.

      Delete
  13. I just checked them but its not showing any-kind of message on my blog .. Please help me .. I just done like what you said
    http://www.howi.in.prx.gb.teleport.to/
    but i can't see any message .
    I also on the Nav bar ... But no message

    ReplyDelete
    Replies
    1. I checked your blog and it is working just fine. I guess you fixed it :)

      Delete
  14. Thank You for the tip! My question is I have privacy policy page which is generated using online tool and have cookies statement! so, what should I do? should I also do the same thing.

    ReplyDelete
  15. ok Thank You so much! Got it! I have fully customized it! Mustafa! You are real helper buddy! I was confused with the message and you solved the great problem!

    ReplyDelete
    Replies
    1. I am so glad your confusion is removed now. A sticky bar is important and inside it you can link to your privacy statment page if you want.

      I am glad you installed the above script which is a better option for most of us :)

      Delete
  16. Thank You! I have customized my EU Cookies Notification Bar.

    ReplyDelete
  17. Mohammad sir
    i do this in my blog but
    message box not appear http://www.supportgujarat.com

    ReplyDelete
    Replies
    1. Add our script and then delete your browser cookies. Recheck it will appear again

      Delete
  18. Hi! How I can change the text size for message and for button? Thank you!

    ReplyDelete
  19. Thanks for posting this! It works like a charm.

    ReplyDelete
  20. I see automatically changed the font size and color. What can be the same as before?

    ReplyDelete
    Replies
    1. I have updated the code. Please use the updated styles.

      Delete
  21. Mohammad, do you think I could remove the standard "cookies bar" and add the Sticky Bar with the same information?

    I see many pages displaying the cookies message on the footer, and it looks less intrusive :)

    ReplyDelete
    Replies
    1. You can surely do that but the advantage of using the above script is that. This notice bar will be shown only to EU visitors and not to everyone.

      It looks quite annoying if all your visitors are shown this notice.

      Plus once the user clicks "Got it" the notice bar is not shown again.

      You can show the script in blog footer as well by simply making this change:


      Replace this code:

      .cookie-choices-info {z-index:999999!important;background-color:#333333!important;border-bottom: 1px solid #6FC415; color:#ffffff!important;
      box-shadow: 1px 2px 2px #000;}



      with this:


      .cookie-choices-info {z-index:999999!important;background-color:#333333!important;border-bottom: 1px solid #6FC415; color:#ffffff!important;
      box-shadow: 1px 2px 2px #000;bottom:0!important; top: inherit!important;}


      That simple! :)

      Delete
  22. Best it showed on my site but when i click on learn more then there was 404 page in front of me. is it remain like this or there is solution to it

    ReplyDelete
  23. Mohammad I stripped out the .blogerspot portion from my blog name PennyPimnghersPal dot com and used your suggestion of the IP proxy to test and I get a popup notification similar to the one that Google uses, but it does not look the same. I was wondering if you could explain why it looks different? Thank you for the tutorial as it relieved me of some anxiety I was feeling when I thought that my site would not be in compliance with the new EU law.

    ReplyDelete
    Replies
    1. Install my custom script and CSS styles to make sure it looks like the one shown in demo buddy :)

      Delete
  24. after how much time the notification will be remove because i do that all but cookies EU bar not removed from mine blog dashboard :(

    ReplyDelete
    Replies
    1. Click the cross button on the notification in your dashboard. It may not appear again. If it does, see that you have installed the script I provided above.

      If it appears again, then just ignore it and the blogger team will remove it once they see the script installed on your blog

      Delete
  25. Update

    Blogger has rewrite the stylesheet for notice bar so I have updated the CSS styles accordingly. If you have noticed the font colors and size changing, then you may kindly install the updated code shared above in the tutorial.

    ReplyDelete
    Replies
    1. Please my cookies policy is not showing. am using a third party template. please check. www.blogmallnigeria.blogspot.com Thank you. need it to be showing to everyone not a specific country.

      Delete
  26. Works perfectly. Thank you very much Mohammed!

    ReplyDelete
  27. Hello Mohammed, I know someone has asked about how to make the notice show at the bottom of the page and not the top. You have provide a code change to make the notice show at the bottom and the top.

    Please is there a way to have the notice show only at the bottom and for only EU visitors?

    Thanks for all your help to us all with your wonderful tutorials and answers!

    ReplyDelete
    Replies
    1. Buddy I have already answered this question twice. Kindly read this comment


      That simple! :)

      Delete
  28. Thank you so much for your help! I've been searching for how to make the cookie bar look pretty in a long time and I finally found your tutorial! You've got a new fan.

    ReplyDelete
  29. Buddy all you need to do is install the script I? shared above inside your template. That is it!

    It will display the navbar only in European countries. If you have a proxy enabled server or better use a service like "Zenmate" to see it appearing for European proxies.

    :)

    ReplyDelete
  30. This comment has been removed by the author.

    ReplyDelete
  31. This comment has been removed by the author.

    ReplyDelete
  32. Thank you very very much brother Muhammad brother I really appreciate your work

    I have a little issue bro but that is not related with this post. the issue is that when i check page speed in google inside that show to remove above the render issue. do you know how to solve?

    ReplyDelete
  33. Hi, I love being able to customize this notification, but my theme is annoyingly hiding it. http://www.sparklewitch.com is my blog page if you'd like to check it out. Can you tell me how I might move the notification, to the bottom of the screen for example, so that it doesn't get hidden by my nav bar? Thank you very much!

    ReplyDelete
    Replies
    1. Look at his reply to my comment here: http://www.mybloggertricks.com/2015/07/Custom-Cookies-notification-for-European-Union-countries.html?showComment=1439826221354#c3354526289954246148

      Delete
  34. Thank you for all the information ! My site end with .in , and the bar is not showing.Can you please guide me ?

    ReplyDelete
  35. I try it, but for some reason does not work on my tamplate. I remove the original one with the code, but the code for the custom one didn't work.

    My url is naskingston.blogspot.com

    ReplyDelete
  36. I have tried to get this working, added the code, but still cannot get it to appear on my site. I'd like to be compliant, but have no way to know. chasingslow.net

    ReplyDelete
  37. Thanks! However proxy address given in this post is not working for my website http://www.funwithpuzzles.com/
    Is there any other way to check how it looks in EU?

    ReplyDelete
  38. Thank you so much! you're the best

    ReplyDelete
  39. i pasted the code but i can't see the cookie notice on my blog.
    techtush.blogspot.com

    ReplyDelete
  40. When I add .prx.gb.teleport.to to the end of my blog (healthandbeautygirl.com) I just get a blank page as if it's an error

    ReplyDelete
  41. i made as you explained, but absolutely nothing has happened, there is no cookie message by this code on my blog:(

    ReplyDelete
  42. How I put Eu cookies notification at the bottom of my blog to make it faster?

    ReplyDelete