Have you noticed how almost every Blogger website has the same white-text on gray-background cookies notification bar when visiting from a European country? Google offers the notification as courtesy and according to the Blogger documentation, website owners are allowed to change the appearance of this annoying requirement.
Lets start!
How to Customize the Cookie Notification
All you have to do is add a new HTML/Javascript widget and add the code below inside it. Here's a step-by-step tutorial:
- In the Blogger dashboard go to Layout
- In the Sidebar section click Add a Gadget
- From the list of options that appear click on HTML/Javascript widget
- Paste the code below in the Content field of the Configure HTML/Javascript widget
This will add a new widget to your website that contains the necessary CSS and Javascript code for customizing the cookie notification bar for your website.
Code to add inside the widget
Add the below CSS style and Javascript code in the Content field of the HTML/Javascript widget you've created above:
Notice there are two parts to this code. First is the Javascript, which starts with <script> and ends with </script>. This Javascript is responsible with changing the text inside the notification bar.
The second part is the CSS, which starts with <style> and ends with </style>. The CSS is responsible with the appearance of the cookie notification bar.
Changing the color and background
In order to change the color of the cookie notice text or the background, one needs to use the <style> (CSS) section from the above code snippet.
The line that starts with #cookieChoiceInfo corresponds with the container (or box) of the notification. By default the background color of that box is gray (in HEX color the value is #777).