How to Add a Cookie Notification Bar in Blogger?
Blogger Snippet Tips
If your website/blog has visitors from EU (European Union) countries, then the cookies notification bar is an essential part of your website or blog. According to EU law, if visitors come to your site from their country, you must inform them about your site's cookie policy.
What Is a Cookie?
A cookie is a package file for the browser that contains small pieces of data, such as user account details that are exchanged between the user's computer and the web server, to identify specific users and enhance their browsing experience.For example, cookies allow websites to identify users and recall their individual login information and preferences. Such as, when a user logs in to their account on the web and then restarts the browser, the user does not need to log in to their account again because the cookie stores the user's account information internally. And the web server uses cookies that are already in the browser folder that contains the user's account information.
Cookies are created when a user first visits a website, and if the same user returns to that site in the future, the web browser returns the data to the web server in the form of a cookie.
Why Are Cookie Notifications Essential in Blogspot?
EU rules require you to provide information to EU visitors about the cookies used on your blog. In many cases, these laws also request your consent.If your Blogspot blog has visitors from European countries, you must notify them via an informative message about your blog's cookies policy.
As a courtesy, the Blogspot team added the following notice to all blogs to help their users comply with these rules:
"This site uses cookies from Google to deliver its services and analyze traffic. Your IP address and user-agent are shared with Google along with performance and security metrics to ensure quality of service, generate usage statistics, and to detect and address abuse."
This notice allows visitors to learn about the use of certain Google Blogger and Google cookies on your blog, including Google Analytics and AdSense cookies.
If you want to include a custom cookie notification below in your BlogSpot blog, you must disable the cookie message that is present on your blog by the Blogger.
To disable Blogger's built-in cookie notification, add the following javascript code under your blog theme header tag <head>.
<script type='text/javascript'>cookieChoices = {};</script>How Can You Add Cookie Notifications to Blogger Blogspot?
Follow these steps if you want to add a premium custom cookie notification to your blog.
Open Blogger Dashboard > Themes Menu > Click on the Three Dots and click the Edit HTML option, and then add the following CSS code before the </head>.
<style type='text/css'>
/* Asif Kamboh - www.asifkamboh.com */
.cookie-bubble {
position: fixed;
width: 100%;
max-width: 400px;
min-height: 100px;
background-color: #fff;
box-shadow: 0 1px 15px rgba(0, 0, 0, 0.1);
z-index: 990;
border-radius: 6px
}
.cookie-bubble.bottom-right {
right: 15px;
bottom: 15px
}
.cookie-bubble.bottom-left {
left: 15px;
bottom: 15px
}
.cookie-bubble.show.bottom-left,
.cookie-bubble.show.bottom-right {
-webkit-animation-name: popInBottom;
animation-name: popInBottom;
-webkit-animation-duration: 2s;
animation-duration: 2s;
-webkit-animation-timing-function: cubic-bezier(.19, 1, .22, 1);
animation-timing-function: cubic-bezier(.19, 1, .22, 1);
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards
}
.cookie-bubble.hide {
display: none
}
.cookie-bubble .cb-wrapper {
position: relative;
display: inline-block;
padding: 15px
}
.cookie-bubble .cb-wrapper .cb-row {
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
text-align: left
}
.cookie-bubble .cb-wrapper .cb-row .cb-row-content .message {
position: relative;
width: 100%;
display: inline-block;
font-size: 15px;
color: #000;
margin-top: 0
}
.cookie-bubble .cb-wrapper .cb-row .cb-row-content .cb-controls {
position: relative;
width: 100%;
float: left;
margin-top: 15px
}
.cookie-bubble .cb-wrapper .cb-row .cb-image {
padding-right: 23px
}
.cookie-bubble .cb-wrapper .cb-row .cb-image .cookie-inner-color {
fill: #f39c12
}
.cookie-bubble .cb-wrapper .cb-row .cb-image svg {
width: 60px
}
.cookie-bubble .cb-wrapper .cb-row .agreement-btn {
float: left;
background-color: #f39c12;
font-family: inherit;
font-size: 14px;
color: #fff;
text-decoration: none;
opacity: 1;
border: none;
cursor: pointer;
font-weight: 500;
padding: 10px 20px;
margin: 0 10px 0 0;
border-bottom: 2px solid rgba(0, 0, 0, 0.1);
border-radius: 6px
}
.cookie-bubble .cb-wrapper .cb-row .agreement-btn:hover {
background-color: #d78a11
}
.cookie-bubble .cb-wrapper .cb-row .cookie-policy-btn {
float: left;
color: #5C5C5C;
padding: 10px 0;
font-size: 14px;
opacity: .95;
border: none;
cursor: pointer;
font-weight: 400;
margin: 0
}
.cookie-bubble .cb-wrapper .cb-row .cookie-policy-btn:hover {
opacity: 1;
color: #000;
text-decoration: underline
}
@media screen and (max-width:440px) {
.cookie-bubble.show {
border-radius: 0;
width: 100%;
max-width: 100%;
left: 0 !important;
bottom: 0 !important
}
.cookie-bubble .cb-wrapper {
padding: 20px 15px
}
}
</style>The next step is to add the following JavaScript code before the </body>.
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js'></script><script type='text/javascript'>
//<![CDATA[
! function(r) {
r.cookieBubble = function (o) {
var e = "cookieBubble",
t = !1,
i = !0,
n = r.extend({
boxPosition: "bottom-left",
cookieMaxAge: 30,
messageText: "This site uses cookies from Google to deliver its services and to analyze traffic.",
messageTextColor: void 0,
messageFontSize: void 0,
buttonText: "Accept !",
buttonColor: void 0,
buttonFontSize: void 0,
iconColor: void 0,
iconVisibility: !0,
cookiePolicyButtonText: "Google Cookie Policy",
cookiePolicyButtonTextColor: void 0,
cookiePolicyButtonUrl: "https://policies.google.com/technologies/cookies",
cookiePolicyButtonTarget: "_blank",
boxAppearDelay: 1e3
}, o),
a = t ? "show" : "hide",
c = n.iconVisibility ? '<div class="cb-image"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 97.93 97.93"><defs><style>.cookie-inner-color{fill:' + n.iconColor + '!important}</style></defs><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><path d="M44,23.76a2.47,2.47,0,1,0,.91,3.37A2.47,2.47,0,0,0,44,23.76Z"/><path d="M25.9,40.32a2.47,2.47,0,0,0,0,4.93h0a2.47,2.47,0,1,0,0-4.93Z"/><circle cx="32.08" cy="65.86" r="2.47"/><path d="M56.38,69.91a2.47,2.47,0,1,0,1.14,1.49A2.47,2.47,0,0,0,56.38,69.91Z"/><path d="M72,52.68a2.47,2.47,0,0,0-2.38,1.83,2.44,2.44,0,0,0,.25,1.87,2.47,2.47,0,0,0,4.52-.59,2.44,2.44,0,0,0-.25-1.87A2.47,2.47,0,0,0,72,52.68Z"/><path class="cookie-inner-color" d="M89.51,52.86A14,14,0,0,1,81,47.2,14.09,14.09,0,0,1,61,35.68,14.09,14.09,0,0,1,49.49,15.73a14,14,0,0,1-5.66-8.55,44,44,0,0,0-21.09,6.15A44.26,44.26,0,0,0,71.46,87.08,44.24,44.24,0,0,0,89.51,52.86ZM28.28,43.42a2.47,2.47,0,0,1-2.38,1.83h0a2.47,2.47,0,1,1,2.38-1.83Zm3.8,24.9a2.47,2.47,0,1,1,2.47-2.47A2.47,2.47,0,0,1,32.08,68.32ZM44.92,27.13A2.47,2.47,0,1,1,44,23.76,2.47,2.47,0,0,1,44.92,27.13ZM57.28,73.27a2.47,2.47,0,1,1-.9-3.36,2.47,2.47,0,0,1,.9,3.36ZM74.42,55.79a2.47,2.47,0,1,1-.25-1.87A2.45,2.45,0,0,1,74.42,55.79Z"/><path d="M97.93,48.52v-.2A2.35,2.35,0,0,0,95.7,46a9.37,9.37,0,0,1-8-5.45,2.35,2.35,0,0,0-3.49-.93,9.51,9.51,0,0,1-5.44,1.72A9.4,9.4,0,0,1,69.39,31.1a2.35,2.35,0,0,0-2.55-2.55c-.28,0-.57,0-.85,0a9.39,9.39,0,0,1-7.68-14.81,2.35,2.35,0,0,0-.93-3.49,9.37,9.37,0,0,1-5.45-8A2.35,2.35,0,0,0,49.61,0H49a49,49,0,1,0,49,49C97.93,48.82,97.93,48.67,97.93,48.52ZM71.46,87.08A44.26,44.26,0,0,1,22.74,13.33,44,44,0,0,1,47.53,4.72a14,14,0,0,0,5.66,8.55A14.09,14.09,0,0,0,64.71,33.22,14.09,14.09,0,0,0,84.66,44.75a14,14,0,0,0,8.56,5.66A44.3,44.3,0,0,1,71.46,87.08Z"/></g></g></svg></div>' : "",
s = ("_blank" === n.cookiePolicyButtonTarget || n.cookiePolicyButtonTarget, n.cookiePolicyButtonTarget),
l = {
init: function () {
l.body(), l.painter(), l.checkCookie()
},
body: function () {
r("body").append('<div class="cookie-bubble ' + n.boxPosition + ' hide"><div class= "cb-wrapper"><div class="cb-row">' + c + '<div class="cb-row-content"><span class="message">' + n.messageText + '</span><div class="cb-controls"><button class="agreement-btn">' + n.buttonText + '</button><a class="cookie-policy-btn" href=' + n.cookiePolicyButtonUrl + " target=" + s + ">" + n.cookiePolicyButtonText + "</a></div></div></div ></div >")
},
painter: function () {
var o = r(".cookie-bubble .cb-message span"),
e = r(".cookie-bubble .agreement-btn"),
t = r(".cookie-bubble .cookie-policy-btn"),
i = {
color: n.messageTextColor,
"font-size": n.messageFontSize
},
a = {
"background-color": n.buttonColor,
"font-size": n.buttonFontSize
},
c = {
color: n.cookiePolicyButtonTextColor
};
o.css(i), e.css(a), t.css(c)
},
setCookie: function (o, e, t) {
var i = new Date;
i.setTime(i.getTime() + 24 * t * 60 * 60 * 1e3);
var a = "expires=" + i.toGMTString();
document.cookie = o + "=" + e + ";" + a + ";path=/"
},
getCookie: function (o) {
for (var e = o + "=", t = decodeURIComponent(document.cookie).split(";"), i = 0; i < t.length; i++) {
for (var a = t[i];
" " == a.charAt(0);) a = a.substring(1);
if (0 == a.indexOf(e)) return a.substring(e.length, a.length)
}
return ""
},
checkCookie: function () {
var o = l.getCookie(e);
"" != o && null != o ? r(".cookie-bubble").removeClass("show").addClass("hide") : (setTimeout(function () {
r(".cookie-bubble").removeClass("hide").addClass("show")
}, n.boxAppearDelay), r(".cookie-bubble .agreement-btn").click(function (o) {
l.setCookie(e, i, n.cookieMaxAge), r(".cookie-bubble").removeClass("show").addClass("hide")
}))
}
};
l.init()
}
}(jQuery);
$.cookieBubble({ })
//]]>
</script>When you have successfully added both JavaScript and CSS code to your Blogger theme, then click the Save Theme button and see the result on your blog.
What Is the Result of the Cookies Notification Bar?
Here's the result of the cookie notification bar. The notification bar will look like this when you add this cookie's JavaScript and CSS code to your blog.
Download & Demo Link of the Cookie Notification Bar.
If you would like to download this JavaScript and CSS code from the cookies notification bar, here is the download link of the file. When you download this file, there will be a compressed file inside and a "Premium Cookie Notification (Blogger) - Asif Kamboh.xml" file inside the compressed RAR file containing the cookie notification bar code.
I hope you find this post "Cookie Notification Bar for Blogger Blogspot!" very useful and respectful.