28 July 2015

BTT #5 | HOW TO CUSTOMISE THE BLOGGER COOKIE MESSAGE

If like me this morning, you woke up to find that your blog now has a large, ugly grey sign at the top to disclose your use of cookies, you may of been a little miffed! But I quickly wrote up a code so that we can make it more pleasing to the eye. Whilst you can get rid of the message with a little coding (which I will share in the next BTT) I would advise you not to, as it's very important to disclose your use of cookies. Instead why not add this code and make it part of your design! You can customise it to suit your colour scheme too!

HOW TO ADD THE CODE:


Head to your TEMPLATE tab on the left side of your dashboard, and choose EDIT HTML. When the page opens, click into the code box and press CTRL + F to open the search bar and then type in </head> click enter and it will take you to that code. DIRECTLY above that , paste the code below:

  <style>
.cookie-choices-text {
text-transform:uppercase!important;
font-weight:normal!important;
font-size:9px!important;
font-family: pt sans!important;
letter-spacing:1px!important;
color: #222!important;
background:#fff!important;
height:40px!important;
line-height:19px!important;
    }
#cookieChoiceInfo{
text-transform:uppercase!important;
font-weight:normal!important;
font-size:9px!important;
font-family: pt sans!important;
letter-spacing:1px!important;
color: #222!important;
background:#fff!important;
height:40px!important;
margin-top:-15px!important;
}
#cookieChoiceInfo a{
text-transform:uppercase!important;
font-weight:normal!important;
font-size:9px!important;
font-family: pt sans!important;
letter-spacing:1px!important;
color: #222!important;
background:#ffcad6!important;
height:40px!important;
margin-top:-15px!important;
}
#cookieChoiceInfo a:hover{
text-transform:uppercase!important;
font-weight:normal!important;
font-size:9px!important;
font-family: pt sans!important;
letter-spacing:1px!important;
color: #222!important;
background:#efefe7!important;
height:40px!important;
margin-top:-10px!important;
}
</style>

Click SAVE TEMPLATE and then view your blog to see the message (you may need to press CTRL + F5 to make the message show again) and you should see your new design! From here you can customise it to suit you!
#cookieChoiceInfo{ is the whole bar itself, so you can edit the font, background colour and font colours.
#cookieChoiceInfo a{ is the buttons for Learn More and Got It. I just altered the background colour here to make them stand out.
#cookieChoiceInfo a:hover{ is what will happen to the buttons when you hover over them, again I just changed the background colour to make the buttons change as you hover.
I hope this has been helpful and be sure to check out my blog design store for designs and tweaks. If you would rather not do this code yourself if you are a bit nervous about coding, head to my store and purchase my 'CUSTOMISE COOKIE MESSAGE' bolt on for £4. 
Share: Pin This Email This

MEET THE AUTHOR: Serena Ozgowicz is a 24 year old Puggle owner with a passion for beauty, crafts and coding! You can follow her on facebook, twitter and instagram. Thank you for reading this post!

No comments//

Post a Comment

CUSTOM BLOG DESIGN STYLED BY PRETTYWILDTHINGS