Tuesday, 19 January 2016

Styling the EU Notification Banner on BlogSpot

A small snippet of code which totally transforms the aesthetics of the EU cookies notification bar.  Relocating the notification to the bottom of the screen and co-ordinating the colours with those of your blog's pallet gives it more of a professional feel!

Styling the EU notification banner

Last summer you may recall receiving an official memo from Google advising that, as a BlogSpot blogger, you were responsible for advising your EU readers that your site uses cookies and that the notification had to be placed in a prominent position.  

That afternoon I sat reading the advice alongside the associated links and, to be honest, I hadn't a clue how to go about implementing one on my home page.  I had already included such information in my disclaimer page, but that, according to the memo wasn't prominent enough.  As Only Crumbs Remain was still very much a fledgling being only a couple of months old, I actually briefly flirted with the idea of closing down my site!  Yes, I know!  I bet I wasn't the only person either to be daunted by this piece of officialdom!  I didn't want to be breaking any of the laws which the clever people in the EU had made!  The following morning after receiving that memo, I was immensely relieved and pleased to see that Google had kindly placed their own EU notification banner onto my BlogSpot site!  Phew!  But....

....the notification banner was chunky, ugly and hid a large portion of my own site's banner.  Yes, OK, I wasn't sure how to go about placing one on my site myself, and I was grateful that Google had done the technical work for me, but I didn't want it to detract from the look and feel of my site. 

Styling the EU notification banner
Image courtesy of Pixabay

I'm certainly not a tech-head and wouldn't have a clue how to go about writing code, but although I clearly wanted to comply with the ruling I also wanted to make the notification more aesthetically pleasing.  After a little searching on the net I came across My Blogger Tricks which provided a great easy to follow tutorial for customising the banner.  I'm not going to recreate it here, because it's not my code, so just follow the link above for the details.  Basically, this is a one piece snippet of code which is pasted just below the tag ]]></b:skin> in your template and allows you to:
  • change the actual wording of the notification;
  • change the names of the buttons;
  • change the colour of the background, buttons, and font;
  • allows you to choose where to direct the reader should they click on the 'learn more' button (ie to Google's own cookies notification or to your blog's own policy);
  • relocate the notification to the bottom of the screen making the banner less intrusive (this code amendment can be found in comment number 11 as a response from the author to a query).
This code is easy to implement in BlogSpot taking just five or ten minutes of your time!  Seriously, it's that easy!  Just remember to back up your template before you start to be on the safe side :-)

I'm sure you'll agree that, after comparing the before and after screen-shots of Only Crumbs Remain's homepage, the required notification banner is far more aesthetically pleasing having been relocated and modified from the bulky, dull, intrusive feel of the default notice.

Screen shot before the code was implemented

Screen shot after the code was implemented

So, go on, personalise that bland EU cookies notification banner which Google provided, it's so easy and only takes a few minutes!

This post has been shared with :

Cuddle Fairy Brilliant blog posts on HonestMum.com Life Loving Linkie


  1. This looks great in your own colours and much better where it is positioned now. It's not necessary that it should be so prominent at the top. Much nicer. Thanks for sharing the info on this.

    Sally @ Life Loving

  2. Such a useful post, I am a complete novice at this and so at the moment I use a wordpress.com website although at some point I would like to go self hosted so I have pinned this for future reference. Thank you for joining #BloggeClubUK hope to see you again next week xx

    1. Thank you :-) I was hoping people would find it useful even though I've not recreated the code in the post. I don't know if the code will work in Wordpress, though if you do pop it in (successfully or otherwise) do let me know and I'll update the post.
      Thanks for popping by and of course for hosting
      Angela x


Thank you for spending your time reading my recipe posts. You're invited to leave a comment, thought or suggestion, all of which will be will be monitored (due to spam) before showing on the blog.

PLEASE NOTE: By leaving a comment you consent to any personally identifiable information (such as name and avatar) being collected by Only Crumbs Remain. Alternatively, you may choose to mark your comment anonymous by making the relevant selection from the dropdown box in the comment field. A link to our full privacy Policy can be found at the bottom of the page.

Flick through our recipes!