How To Customize Blogger EU Cookies Notification Bar

I’ve been getting fairly a number of questions regarding  the Cookie Notification that appears on a Blogger blog website. In this post we will discuss from why it’s there, how to customize it for better viewing of the site and how to disable the EU Cookies Notification  Bar Feature in a blogger blog.

What is EU Cookie Notification?'

Firstly an online website cookie is a small piece of information that's dispatched from a website you're looking to the net browser you're utilizing. Each time you load the location, the browser sends the cookie again to the server with details about your browsing exercise. Most web sites you go to will use cookies so as to enhance your consumer expertise by enabling that web site to recollect you and your preferences. Blogger Blog website have the EU Cookies enabled by default and hence its the user duty to know how the cookies work and how they should be integrated in the website.

European Regulation requires you to present your guests from the EU details about the Cookies which can be used in your weblog. In lots of instances, it’s additionally required that you just get consent. Google added the EU Cookie Notification using robots on blogs on the Blogger platform to assist meet these laws. You cannot easily disable cookies in blogger, but you can hide the notification. I am going to take you Step by Step in disabling it.
The discover explains how Blogger Cookies, in addition to using Google Analytics and Ad-words Cookies. This may solely be proven to visitors inside the EU, and can disappear when the consumer clicks.

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 Customize the Notification  EU Cookie Style

1. Cookie Notice Style One

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 joecalih Custom EU Cookies Notice --> 
<script type="text/javascript"> 
  cookieOptions = { 
    msg: "This site uses cookies from Google ", 
    link: "", 
    close: "Okay!", 
    learn: "Learn More" }; 
<!-- END joecalih 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.

2. Stylish Cookies  Notification Style Two.

Step 1 Login To Your Blogger Website.
Step 2 Choose the blogger blog you want to employ the stylish  cookie notification custom bar.
Step 3 Click on Theme and then Edit HTML.
Step 4 Now find ]]></b:skin>  by using Crtl F in windows & CMD F in Mac.
Step 5 Copy the code from below and paste it before/After ]]></b:skin>

<script type="text/javascript"> cookieOptions = { msg: "This site uses cookies from Google to deliver its services. By using this site, you agree to its use of cookies.", link: "", close: "Got it!", learn: "Learn More" }; </script> <style> .cookie-choices-info { z-index:999999!important; background-color:#181818!important; border-bottom: 3px solid #0697FD; box-shadow: 4px 4px 0px rgba(33,33,33,0.45)!important; padding:3px 0px!important; } .cookie-choices-info .cookie-choices-text{ font-size:14px !important; font-weight:500; color:#dddddd!important; } .cookie-choices-info .cookie-choices-button{ background-color: #0697FD!important; border-radius: 50px!important; box-shadow:4px 4px 0px rgba(33,33,33,0.45); padding:6px!important; text-transform: uppercase!important;} </style>

How to Customize the Design of the EU Cookie Notice

You may want to customize the design of the notification bar so that it better matches your blog design or doesn’t conflict with your design. Many have tried to make their cookies notification pleasing to the user to reduce bounce rate. Take an example of the bellow design of notification.
How to Customise the Design of the EU Cookie Notice

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 */ }

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;}

The First Cookie message you receive from blogger.

When you fist opened up a blogger Account This Was the cookies policy message that you first receive. There are laws set aside on use of cookies. They vary from one country to another and violation of this may cause a bad impact to your blogger blog.

Thank You for being Part of this good article.I hope that i have impacted some good SEO information that can help you Design your Blogger Blog Best for ranking. In-case you face any difficulty while implementing the following fields please reach me by Commenting bellow Or Contact Me.

Post a Comment

Previous Post Next Post

About Joecalih

This website is a Blogger template, tutorials and Photography blog resource equipped with Presets and Luts for cinematic editing. + Learning tutorials for Blogger website development entailing widgets, plugins and SEO solutions are featured - Enjoy Reading.


Web resource for blogger widgets and desigh plugins for development.


Free download blogger templates and purchace top Blogger Premiun templates.


Get step to step guide for blogger solutions with tips and tricks for Blogger solutions.


Archive for Joecalih Portifolio and Gear lessons from the profesional Photographer, Book Today.


Download best editting Presets and Cinematic Luts from Preset Archive resources.


Learn Search Engine Optimization (SEO) to improve your website search ranking.