Setup a modified cookie notification bar into your blogger blog - In my previous post I already informed you the actual importance of the cookie notification bar. So today I'm going to show you how you can easily add a new cookie notification bar according to your choice. According to your choice means here is 2 new modified cookie notification bars are available for your blog. The first one comes with light theme and the second one comes with dark theme. So choose a best notification bar which compatible with your blog template and then follow the below steps to set up this cookie notification bar into your blog. (Also read - EU cookie notification bar for blogger)
How Add Modified Cookie Notification Bar?
First login with your Gmail account and go to your blogger dashboard - Login
After that go to the "Template" section and then click on the "Edit template" button.
Now find the below code by pressing "Ctrl + F" key together from your keyboard.
]]></b:skin>
And then, copy the below CSS code (Any one Light or Dark) and paste is just before ]]></b:skin>.
Dark Cookie Notification Bar?
/* Custom Cookies Info 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;}
.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}Light Cookie Notification Bar?
/* Custom Cookies Info 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);}
.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}
Now hit on orange save template button to make changes.
Now go to "layout" section and then select " Add a widget ".
After that, select " Html/JavaScript ". (See the below image)
Now copy the below code and paste it in Html box.
<!-- 'Please do not remove this credit www.askwithloud.com See http://www.askwithloud.com/2015/08/add-modified-cookie-notification-bar.html for more details.' -->
<script src="//googledrive.com/host/0BxB51PrIeBaiSjI4eDEtTW8tOXc" defer></script>
<script>
document.addEventListener('DOMContentLoaded', function(event) {
window.cookieChoices && cookieChoices.showCookieConsentBar && cookieChoices.showCookieConsentBar(
(window.cookieOptions && cookieOptions.msg) || '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.',
(window.cookieOptions && cookieOptions.close) || 'Got it',
(window.cookieOptions && cookieOptions.learn) || 'Learn More',
(window.cookieOptions && cookieOptions.link) || 'https://www.blogger.com/go/blogspot-cookies');
});
</script>
After that, click on the save widget button and then see the magic.
If you are using blogspot domain name then type co.uk after blogspot. (e.g www.askwithloud.blogspot.co.uk )
That's it! I hope you like this cookie notification bar! Stay tuned for more blogger tricks! Thanks for reading @Prince
0 Comment to "Modified Cookie Notification Bar For Blogger"
Post a Comment