All blogspot users are recently informed in their dashboards that European Union (EU) laws require all publishers to give EU visitors information about cookies used on their blogs. For that reason Blogger team has automatically added a notice bar on all blogs to help meet these regulations. The notice lets visitors know about Google's use of certain Blogger and other cookies used on these blogs, including Google Analytics and AdSense cookies. It is a publisher's responsibility to ensure that the Notification bar must be clearly visible on the blog and must not be disabled in any case using CSS or JavaScript unless the publisher is already displaying a custom bar notifying users about the use of cookies on his site.
Will Blogger Show The notice on Custom Domains also?
Of course it will!
Note that all blogspot blogs which are using the default .blogspot.com Domains ( country-code Top Level Domain or ccTLD) or custom domains (such as .com, .net, .org etc.) will automatically show the following sticky Notice at the top of the page when a user visits that blog from a browser in a European Country:
This site uses cookies from Google to deliver its services, to personalise ads and to analyse traffic. Information about your use of this site is shared with Google. By using this site, you agree to its use of cookies.Learn More Got it
The message will disappear when the user clicks Got it.
Is it shown on all Country Specific URLs ccTLD?
It will be shown only to visitors from European Union associated countries like Italy, France, UK, Denmark, Sweden, Greece, Germany etc.
You won't see the notice outside of the EU.
How to see the Notice if you are Outside European Union?
To see the notice if you’re outside of the EU, view your blog and change the country code, for example blogspot.it, blogspot.fr or blogspot.co.uk.
If you use a custom domain, you can use a EU IP Proxy address to browser your site. A Simple trick is to add the following string parameter just after your custom domain:
.prx.gb.teleport.to
Like in our case to visit mybloggertricks.com in united kingdom we will type the following URL in address bar:
http://www.mybloggertricks.com.prx.gb.teleport.to
Clicked the 'Got it' button and now you can not see the notice bar again?
Use the Netherlands proxy and it will appear again! Make sure you don't click got it this time else you will have to delete your browser cookies to make it appear again :)
.prx.us.teleport.to
Can We Hide or Disable the EU Cookies Notice?
Yes you can but only if you are already displaying a custom message using custom script on Top of your blog which informs users about the use of cookies on your site. If you are not using any such script to inform readers about cookies then you are obliged to display the Blogger Default notice instead. You must not choose to avoid informing readers about the use of Cookies on your blog. Doing such may cause your blog to get banned.
If you are already using a custom script to inform readers about Cookies used by 3rd part services on your blog and the message clearly links to your Privacy Statement page then you can surely choose to disable the default notice by add the following script just above </head> tag inside your template
<script type="text/javascript">
cookieChoices = {};
</script>
How Do the Notice Look Like?
You must not try to hide this notice bar like we normally hide the Blogger navbar. If in case you have not hidden the blogger navbar then the message will look like this:
If you have chosen to hide the navbar then the message will display like this:
Lets Customize the EU Cookies Notice Bar!
Before: A Long Textual string with dull colors.
After: A Neat and cleaner message with custom colors.
The default Notice is a long lengthy text with dull colors, in order to make sure to display a custom Short message to your readers that may also match your Template color theme then follow the steps below:
1 Go To blogger > Template > Backup your template
2 Click Edit HTML
3 Paste the following code just below ]]></b:skin> tag
<!--Custom EU Cookies Notice by STCnetwork.org-->
<script type="text/javascript">
cookieOptions = {
msg: "This site uses cookies to help deliver services. By using this site, you agree to the use of cookies.",
link: "https://www.blogger.com/go/blogspot-cookies",
close: "Got it!",
learn: "Learn More" };
</script>
<style>.cookie-choices-info {z-index:999999!important;background-color:#333333!important;border-bottom: 1px solid #6FC415;
box-shadow: 1px 2px 2px #000!important; padding:3px 0px!important;}.cookie-choices-info .cookie-choices-text{font-size:14px !important; color:#dddddd!important;}.cookie-choices-info .cookie-choices-button{ background-color: #6FC415!important;border-radius: 1px!important;box-shadow: 2px 3px 2px #000!important; padding:6px!important;text-transform: none!important;}</style>
You can make the following customizations if you want:
- Replace the black bolded text with any message you may like.
- If you want you can replace the yellow highlighted link with your Custom Privacy Statement page else you can leave it as it is because the default link points to Blogger's Privacy page for Cookies info.
- To change Notice Bar background color edit #333333
- To change the green border that appears at the bottom of the bar edit #6FC415
- To change the background color of Buttons edit #6FC415
- To change the font color edit #dddddd
4 Save your template and you are all done!
Need Help?
Let me know if you need any further clarification or help. We have also started a discussion related to this topic at our Forum where you can interact with more bloggers to help you setup the cookie bar for you. Join the discussion by clicking here.
I hope you are now more safe than before. Wish you all a safe blogging journey. Peace and blessings buddies! :)
If you don't want to get yourself into Serious Technical Trouble while editing your Blog Template then just sit back and relax and let us do the Job for you at a fairly reasonable cost. Submit your order details by Clicking Here »
Hi Mustafa sir, Glad you came up with this. When that notification appeared I promptly closed it and missed reading it. Then I read about it on the forum. That custom cookie notification looks really cool because it agrees to your blog theme.
ReplyDeleteThanks for sharing. :)
A Custom control of elements on any webpage is the best way to make sure you control everything as per your preferences. So glad you found it interesting and useful =)
DeleteDone, but now I wanted to test and have to delete cookies because the message is not showing thanks to cookies... lol
ReplyDeletelol that is surely funny in this case but it has a solution too. Try different IP address like instead of using the UK proxy, use that of sweden or italy! =d
DeleteIt works this way
Brother i am not seeing any notice bar on my blog. I tried to view using UK proxy address but still not seeing. I am still confused.
ReplyDeleteDo i have to add it manually on by blog?
It must display even if you have not added the script above.
DeleteAdd the code I shared above and then test again. If it did not work then share your URL here
Helpful post. It cleared all my confusions.
ReplyDeleteThanks
I am so glad it helped you better understand EU cookies Policy :)
DeleteThank you so much for this tip. Its working like a charm.
ReplyDeleteAll pleasure is ours. Thank you for trying it out :)
DeleteHello, I followed your directions and I haven't noticed that a notice bar comes up when I tested it. Could you please help me?
ReplyDeleteKindly share your URL so that we could help.
DeleteFirst kindly add the script that we shared above
What if we redirect them to our own blog page where we define how Google uses cookies instant of Google Privacy and term Page.
ReplyDeletesure you can do that! Just replace the link inside the script above :)
DeleteThank you Mohammad Bhai again
ReplyDeleteWhen it start displaying on my blogger control panel of my site http://munnartourguide.com/, I was little bit confused and worried. And really about to mentioned in MBT forum..
You guys as always on time in this case as well.. Thank you for clearing the doubts of bloggers like me
Keep educate us and keep going.. All the best for entire team
Thank you for your kind feedback. I am glad you found it useful :)
DeleteThnak you Mohammad!
ReplyDeleteI live in Bulgaria, EU and this EU requirement made such blogs really ugly. I used your method and it is better, but still problematic. Half of the name of my site of the home page is not visible. Could this bar be more narrow? And could it be even a little transparent?
Thanky you in advance.
Veselin Kisiov,
Your faithful reader. :)
To make it thinner add this css code :
Delete.cookie-choices-info .cookie-choices-inner { padding: 5px 8px!important;}
We can make it transparent but then it wont be supported in IE browsers properly.
Thank you for being a great reader always :)
Thank you very much, Mohammad! It is much better now. I couldn't do it without you :)
DeleteWell thanks for this awesome post. And also for helping me out and publishing this detailed post.
ReplyDeleteAlways welcomed dear hassan :)
DeleteIs there a way this bar to be put on the downside, not on the top?
ReplyDeleteReplace this code:
Delete.cookie-choices-info {z-index:999999!important;background-color:#333333!important;border-bottom: 1px solid #6FC415; color:#ffffff!important;
box-shadow: 1px 2px 2px #000;}
with this:
.cookie-choices-info {z-index:999999!important;background-color:#333333!important;border-bottom: 1px solid #6FC415; color:#ffffff!important;
box-shadow: 1px 2px 2px #000;bottom:0!important; top: inherit!important;}
That simple! :)
Hi! on my blog, http://www.ateaspoonofemily.com/, I followed your instructions but my cookie policy is still showing at the top. Any advice?
DeleteThanks in advance
This is a great help for me. There is small mistake.... add a comma between this classes .cookie-choices-info, .cookie-choices-button so that the code works and one more thing no need of style tag as we are ding this in css section otherwise a comment like symbol is appearing. thanks once again.
ReplyDeleteThat is not a mistake buddy but the way to declare a sub css class inside a parent class.
DeleteStyle tags are important because I have mentioned in the tutorial to paste the code outside b:skin tag and not inside it.
I just checked them but its not showing any-kind of message on my blog .. Please help me .. I just done like what you said
ReplyDeletehttp://www.howi.in.prx.gb.teleport.to/
but i can't see any message .
I also on the Nav bar ... But no message
I checked your blog and it is working just fine. I guess you fixed it :)
DeleteThank You for the tip! My question is I have privacy policy page which is generated using online tool and have cookies statement! so, what should I do? should I also do the same thing.
ReplyDeleteok Thank You so much! Got it! I have fully customized it! Mustafa! You are real helper buddy! I was confused with the message and you solved the great problem!
ReplyDeleteI am so glad your confusion is removed now. A sticky bar is important and inside it you can link to your privacy statment page if you want.
DeleteI am glad you installed the above script which is a better option for most of us :)
Thank You! I have customized my EU Cookies Notification Bar.
ReplyDeleteMohammad sir
ReplyDeletei do this in my blog but
message box not appear http://www.supportgujarat.com
Add our script and then delete your browser cookies. Recheck it will appear again
DeleteHi! How I can change the text size for message and for button? Thank you!
ReplyDeleteThanks for posting this! It works like a charm.
ReplyDeleteI see automatically changed the font size and color. What can be the same as before?
ReplyDeleteI have updated the code. Please use the updated styles.
DeleteMohammad, do you think I could remove the standard "cookies bar" and add the Sticky Bar with the same information?
ReplyDeleteI see many pages displaying the cookies message on the footer, and it looks less intrusive :)
You can surely do that but the advantage of using the above script is that. This notice bar will be shown only to EU visitors and not to everyone.
DeleteIt looks quite annoying if all your visitors are shown this notice.
Plus once the user clicks "Got it" the notice bar is not shown again.
You can show the script in blog footer as well by simply making this change:
Replace this code:
.cookie-choices-info {z-index:999999!important;background-color:#333333!important;border-bottom: 1px solid #6FC415; color:#ffffff!important;
box-shadow: 1px 2px 2px #000;}
with this:
.cookie-choices-info {z-index:999999!important;background-color:#333333!important;border-bottom: 1px solid #6FC415; color:#ffffff!important;
box-shadow: 1px 2px 2px #000;bottom:0!important; top: inherit!important;}
That simple! :)
Best it showed on my site but when i click on learn more then there was 404 page in front of me. is it remain like this or there is solution to it
ReplyDeleteMohammad I stripped out the .blogerspot portion from my blog name PennyPimnghersPal dot com and used your suggestion of the IP proxy to test and I get a popup notification similar to the one that Google uses, but it does not look the same. I was wondering if you could explain why it looks different? Thank you for the tutorial as it relieved me of some anxiety I was feeling when I thought that my site would not be in compliance with the new EU law.
ReplyDeleteInstall my custom script and CSS styles to make sure it looks like the one shown in demo buddy :)
Deleteafter how much time the notification will be remove because i do that all but cookies EU bar not removed from mine blog dashboard :(
ReplyDeleteClick the cross button on the notification in your dashboard. It may not appear again. If it does, see that you have installed the script I provided above.
DeleteIf it appears again, then just ignore it and the blogger team will remove it once they see the script installed on your blog
Update
ReplyDeleteBlogger has rewrite the stylesheet for notice bar so I have updated the CSS styles accordingly. If you have noticed the font colors and size changing, then you may kindly install the updated code shared above in the tutorial.
Please my cookies policy is not showing. am using a third party template. please check. www.blogmallnigeria.blogspot.com Thank you. need it to be showing to everyone not a specific country.
DeleteWorks perfectly. Thank you very much Mohammed!
ReplyDeleteHello Mohammed, I know someone has asked about how to make the notice show at the bottom of the page and not the top. You have provide a code change to make the notice show at the bottom and the top.
ReplyDeletePlease is there a way to have the notice show only at the bottom and for only EU visitors?
Thanks for all your help to us all with your wonderful tutorials and answers!
Buddy I have already answered this question twice. Kindly read this comment
DeleteThat simple! :)
Thank you so much for your help! I've been searching for how to make the cookie bar look pretty in a long time and I finally found your tutorial! You've got a new fan.
ReplyDeletesame here
ReplyDeleteBuddy all you need to do is install the script I? shared above inside your template. That is it!
ReplyDeleteIt will display the navbar only in European countries. If you have a proxy enabled server or better use a service like "Zenmate" to see it appearing for European proxies.
:)
This comment has been removed by the author.
ReplyDeleteThis comment has been removed by the author.
ReplyDeleteThank you very very much brother Muhammad brother I really appreciate your work
ReplyDeleteI have a little issue bro but that is not related with this post. the issue is that when i check page speed in google inside that show to remove above the render issue. do you know how to solve?
Hi, I love being able to customize this notification, but my theme is annoyingly hiding it. http://www.sparklewitch.com is my blog page if you'd like to check it out. Can you tell me how I might move the notification, to the bottom of the screen for example, so that it doesn't get hidden by my nav bar? Thank you very much!
ReplyDeleteLook at his reply to my comment here: http://www.mybloggertricks.com/2015/07/Custom-Cookies-notification-for-European-Union-countries.html?showComment=1439826221354#c3354526289954246148
DeleteThank you for all the information ! My site end with .in , and the bar is not showing.Can you please guide me ?
ReplyDeleteI try it, but for some reason does not work on my tamplate. I remove the original one with the code, but the code for the custom one didn't work.
ReplyDeleteMy url is naskingston.blogspot.com
Thank you! :]
ReplyDeleteI have tried to get this working, added the code, but still cannot get it to appear on my site. I'd like to be compliant, but have no way to know. chasingslow.net
ReplyDeleteThanks! However proxy address given in this post is not working for my website http://www.funwithpuzzles.com/
ReplyDeleteIs there any other way to check how it looks in EU?
Thank you so much! you're the best
ReplyDeletei pasted the code but i can't see the cookie notice on my blog.
ReplyDeletetechtush.blogspot.com
When I add .prx.gb.teleport.to to the end of my blog (healthandbeautygirl.com) I just get a blank page as if it's an error
ReplyDeletei made as you explained, but absolutely nothing has happened, there is no cookie message by this code on my blog:(
ReplyDeleteHow I put Eu cookies notification at the bottom of my blog to make it faster?
ReplyDelete