Therefore this new law requires you to get visitor approval when you are on your blog.Blogger has added a notification feature about using cookies to every visitor, especially from the European Union.
So for example, if you come from European Union countries then visit this site, a notification will appear that this blog uses cookies.
Associating with blogger which is owned by Google means that if you have a site created from blogger, you want it with a blogspot domain or already use a top level domain (TLD), but the site is not entirely yours because the hosting is still from Google.
That is a little explanation about data policy that is currently being discussed.
Now, related to that here I will explain how to modify the appearance of cookies bar by using the css code.
Making modifications to notifications or cookie notifications in blogger with the aim of making them look cooler and easier to see by visitors is a good thing.
Please note that notification of cookie bars will only be seen by visitors coming from European Union countries, so if other than from that country we cannot see these cookies bar in blogger.
To enhance the appearance of these cookies bar you can make modifications using the css code, for more details, please follow the steps below.
How to Modify Display Cookies Bar on Blogger
As I said before the blogger platform uses cookies to collect visitor data.
If you use an IP from one of the European Union countries then visit one of the existing blogs, a notification or notification about cookies will appear as below.
This site uses cookies from Google to deliver its services and to analyze traffic. Your IP address and user agent are shared with Google, together with performance and security metrics, to ensure quality of service, generate usage statistics and address abuse.
The default display is as shown below:
The interface is very simple and is at the top of your blog, to enhance its appearance we need to add the following css code.
Please install this css code above the code]]> </ b: skin> or </ style>
/ * Custom Cookies Light Info * /Dark Version
.cookie-choices-info {background-color: rgba (255,255,255, .99)! important; line-height: normal! important; top: initial! important; bottom: 0! important; font-family: inherit! important; box -shadow: 0 0 10px rgba (0,0,0,0.2); - webkit-transform: translateZ (0)}
.cookie-choices-info. text-choices-text {font-size: 14px! important; color: # 222! important}
.cookie-choices-info. cookie-choices-button {color: #fff! important; margin-left: 5px! important; padding: 3px 6px! important; background: # 3fbdf3! important; border-radius: 2px; transition: all .6s linear}
cookie-choices-button: nth-child (2) {background: # f68c2e! important; transition: all .6s linear}
.cookie-choices.cookie-choices-button: hover, .cookie-choices-info. cookie-choices-button: nth-child (2): hover {background: # 999! important; transition: all .1s linear }
If you want to change the color please use the Color Picker tool.
/ * Custom Cookies Dark Info * /That's an article about how to modify the appearance of cookies bar with css, hopefully useful.
.cookie-choices-info {background-color: rgba (56,66,75, .97)! important; line-height: normal! important; top: initial! important; bottom: 0! important; font-family: inherit ! important; -webkit-transform: translateZ (0)}
.cookie-choices-info. cookie-choices-text {font-size: 14px! important; color: # cee6ea! important}
.cookie-choices-info. cookie-choices-button {color: #fff! important; margin-left: 5px! important; padding: 3px 6px! important; background: # 3fbdf3! important; border-radius: 2px; transition: all .6s linear}
cookie-choices-button: nth-child (2) {background: # f68c2e! important; transition: all .6s linear}
.cookie-choices-info. cookie-choices-button: hover, .cookie-choices-info. choices-button: nth-child (2): hover {background: # 282f36! important; transition: all .1s linear }