How to Modify Display Cookies Bar with CSS

Google has recently updated privacy policies including Blogger users who use cookies to collect data from every visitor to your site.This cookie law is intended for visitors from the European Union about cookies used and data collected on blogs.

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.
How to Modify Display Cookies Bar with CSS
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 * /
.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 }
Dark Version
If you want to change the color please use the Color Picker tool.

/ * Custom Cookies Dark Info * /
.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 }
That's an article about how to modify the appearance of cookies bar with css, hopefully useful.

0 Belum ada Komentar untuk "How to Modify Display Cookies Bar with CSS"

Post a Comment

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel