CSS: BLOGGER CUSTOM COOKIES NOTIFICATION

Custom Cookies Notification for Blogger - Blogspot is using Cookies Notification by the default itself if the visitor visits the site from Europe region.

BLOGGER DEFAULT COOKIES USAGE EXAMPLE

This EU Cookies Notification Bar can be viewed only if your browsing it from Europe domain.
For example:
• Change from *.com to *.fr
• Change from *.com to *.co.uk

http://blogname.blogspot.fr

Change 'blogname' to your blog URI.

CUSTOM COOKIES NOTIFICATION FOR BLOGGER

This code made no change to that, this custom CSS just make the notification bar became more stylish and flat style. There is two style on this CSS, the light (white) and the dark ( dark grey) color.

HOW TO MODIFY THE COOKIES NOTIFICATION FOR BLOGGER

1. Login to Blogger Template Edit HTML
2. Put this CSS code before ]]></b:skin> or </style>

DEFAULT CUSTOM COOKIES NOTIFICATION DARK

/* Custom Cookies Notification Dark */
.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-info .cookie-choices-button:nth-child(2){background:#f68c2e!important;transition:all .6s linear}
.cookie-choices-info .cookie-choices-button:hover,.cookie-choices-info .cookie-choices-button:nth-child(2):hover{background:#282f36!important;transition:all .1s linear}

DEFAULT CUSTOM COOKIES NOTIFICATION DARK

/* Custom Cookies Notification Light */
.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 .cookie-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-info .cookie-choices-button:nth-child(2){background:#f68c2e!important;transition:all .6s linear}
.cookie-choices-info .cookie-choices-button:hover,.cookie-choices-info .cookie-choices-button:nth-child(2):hover{background:#999!important;transition:all .1s linear}

Read also: JavaScript: CUSTOM COOKIES NOTIFICATION BAR FOR WEBSITE