How to customize the Blogger EU Cookies Notification Bar

I’ve been getting quite a few questions about the Cookie Notification that appears on Blogger blogs – from why it’s there, to can it be removed to how to customise it. This post is going to run through all the information about it and show you how to customise the notice to suit your blog design.

What is the Cookie Notification?

Firstly a web cookie is a small piece of data that is sent from a site you are browsing to the web browser you are using. Every time you load the site, the browser sends the cookie back to the server with information about your activity. Most websites you visit will use cookies in order to improve your user experience by enabling that website to remember you and your preferences.

European Law requires you to give your visitors from the EU information about the Cookies that are used on your blog. In many cases, it’s also required that you get consent. Google automatically added the EU Cookie Notification on blogs on the Blogger platform to help meet these regulations. The notice explains how Blogger Cookies, as well as the use of Google Analytics and Adwords Cookies. This will only be shown to visiors within the EU, and will disappear when the user clicks “Got it”.

Blogger EU Cookies Notice Bar

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 responsility to inform your visitors and obtain consent for any Cookies that your blog uses. You can visit here and here to read more about the Google Blogger Cookie Notification.

How to see the notification bar outside EU?

If you are using a blogspot subdomain 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.

If you’re using a custom domain on Blogger (like a .com instead of .blogspot.com), you can try a web proxy like Teleport or Local Browser to see your blog using a server in Europe.

How to Hide/Disable the EU Cookies Notice

As mentioned above, it is a law that this message is shown! If you are already showing a Cookie Notification and you wish to hide the Blogger Cookie Notification you can add a short script to the head section of your template

1. Go to Template > Edit HTML and find </head>
2. Above </head> place the following script

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

3. Save your template.

How to Customise the Text of the EU Cookie Notice

To customise the text shown in the notification, follow these steps

1. Go to Template > Edit HTML and find </head>
2. Above </head> place the following script

<!-- START XOMISSE Custom EU Cookies Notice --> 
<script type="text/javascript"> 
  cookieOptions = { 
    msg: "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.", 
    link: "https://www.blogger.com/go/blogspot-cookies", 
    close: "Okay!", 
    learn: "Learn More" }; 
</script> 
<!-- END XOMISSE Custom EU Cookies Notice -->

3. Edit the values above (the text in between quotes of msg, link, close, learn), see this page for help.

4. Save your template.

How to Customise the Design of the EU Cookie Notice

You may want to customise the design of the notification bar so that it better matches your blog design or doesn’t conflict with your design.

1. Go to Template > Edit HTML and find ]] </b:skin>

2. Above ]] </b:skin> add the following

.cookie-choices-info { /* Add your styles here to change overall wrapper design */ }

.cookie-choices-info .cookie-choices-text{ /* Add your styles here to change text styles */ }

.cookie-choices-info .cookie-choices-button { /* Add your styles here to change button styles */ }

.cookie-choices-info #cookieChoiceDismiss { /* Add your styles here to change dismiss button styles */ }

Change the design of Bloggers Cookies Notice

How to move the EU Cookies Notice to the bottom of the screen

On my personal blog I have a fixed navigation at the top of my blog which the Cookie Notification was hiding so I moved it to the bottom of the screen instead. To move the notification to the bottom of the screen use the following CSS. Add it above ]] </b:skin> in Template > Edit HTML.

.cookie-choices-info {position: fixed; top: auto !important; bottom: 0px !important;}

Move Cookie Notification on Blogger

Post last updated:

15 responses to “How to customize the Blogger EU Cookies Notification Bar”

  1. Hey quick question how do we change the background color?
    .cookie-choices-info {background-color: #000;} for some reason this code isn’t working for me.

    1. Hey Cassidy, you have quite a few errors in your CSS (including missing brackets, missing semi-colons, HTML and Script in the CSS) that will need to be cleared up before the CSS will be read correctly. Add !important with a space on either side after #000 and before ;, this will give it importance so that other code won’t override it.

      1. What semicolons and brackets are missing?

        1. On .mobile-index-title, .post-footer a, .post-title, .cookie-choices-info .cookie-choices-text, .jump-link a and a good few more before a lot of your closing brackets. Also an extra bracket at the bottom of your CSS, and a b:include HTML element.

  2. Great Blog. Thank you for sharing such a informative blog

  3. Thanks so much for this. I couldn’t find out how to see my .com blog using a European server. Done now and cookie message on my site. I’m happy.

  4. Thank you so much for this xx

  5. Hello. I living in Azerbaijan.
    We are not a member of european union. But I added the notification
    Did I do it right or do it appear automatically?
    Thank you.

    1. Hello Mehin. Yes it’s showing, I’ve uploaded a screenshot of it here for you to see.

  6. I used the css code move the eu coochies and it works. Thank you!

  7. If you want to see your blog from another country, add /ncr to the URL – it will stop an automatic redirect to your home domain
    For instance:
    blah.blogspot.co.uk/ncr

  8. Samuel

    Hello, I have applied this to my new blog but I don’t know if it’s working since I cannot view it. Would be glad if you can check for me. Thanks so much.

  9. Thanks for such a wonderful article. it helped me alot. Was annoyed with the cookie choice notice and its position. Especially in the mobile view.

  10. texnologia

    Thank you very much for the information was quite helpful and just if the problem

Join over 1,000 creators and small biz owners and be part of The Roundup

Ready to build your website, grow your audience and monetise your platforms? Receive the latest WordPress news, social media updates, SEO tips and industry insights straight to your inbox.

By signing up you’ll receive our fortnightly newsletter and free resources. No spam or unnecessary emails. You can unsubscribe at any time.