When browsing the internet, you have probably come across a cookie consent banner that asks you to accept or reject cookies. These banners have become a standard feature on websites due to the increasing concern about data privacy and online tracking.
If you are a blogger using Blogger, it is essential to add a cookie consent banner to your site to ensure compliance with regulations such as the General Data Protection Regulation (GDPR) and the California Consumer Privacy Act (CCPA).
How to Add a Cookie Notification in Blogger
To Add a cookies consent Banner or Popup in Blogger, follow the steps below.
- Open your Blogger dashboard and Go to the theme section.
- Now click on the edit HTML section from the Drop down menu just the right side of customize button.
- Now search for the closing Body tag (</body) That is generally the 2nd last line of your theme code.
- Now paste the given code just above it and save the code to add the cookie consent banner to your Blogger website.
<div class='cookie-box'>
<div class='cookie-row'>
<div class='cookie-img'><svg viewBox='0 0 97.93 97.93' xmlns='http://www.w3.org/2000/svg'><path d='M44,23.76a2.47,2.47,0,1,0,.91,3.37A2.47,2.47,0,0,0,44,23.76Z'></path><path d='M25.9,40.32a2.47,2.47,0,0,0,0,4.93h0a2.47,2.47,0,1,0,0-4.93Z'></path><circle cx='32.08' cy='65.86' r='2.47'></circle><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><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><path 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' fill='#7577a9'></path><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'></path></svg></div>
<div class='cookie-content'>
<p>Our website uses cookies to improve your experience. <a href='https://policies.google.com/technologies/cookies' target='_blank' title='Learn more'>Learn more</a></p>
<button class='cookie-buttons'>Accept!</button>
</div>
</div>
</div>
<style>
.cookie-box.hide{display:none}
.cookie-box {
position: fixed;
width: 90%;
margin: 20px;
max-width: 400px;
min-height: 100px;
background-color: #ffffff;
box-shadow: 25px 12px 25px 12px rgb(30 30 30 / 4%);
z-index: 990;
border: 2px solid lightgrey;
border-radius: 6px;
bottom: 15px;
right: 0px;
padding: 15px;
}
.cookie-row {
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
text-align: left;
align-content: center;
justify-content: center;
align-items: center;
}
.cookie-img{padding-right:20px}
.cookie-img svg{fill:#333;width:60px;height: 60px;}
.cookie-content p {
position: relative;
width: 100%;
display: inline-block;
font-size: 15px;
color: #666666;
margin-top: 0!important;
}
.cookie-content p a{text-decoration:underline;}
.cookie-buttons {
position: relative;
width: 100%;
margin-top: 10px;
float: left;
background-color: #7577a9;
font-family: inherit;
font-size: 14px;
color: #ffffff;
text-decoration: none;
opacity: 1;
border: none;
cursor: pointer;
font-weight: 500;
padding: 5px;
border-bottom: 2px solid rgba(0,0,0,0.1);
border-radius: 6px;
}
</style>
<script>//<![CDATA[
cookieChoices = {};
const cookieBox = document.querySelector(".cookie-box"),
acceptBtn = cookieBox.querySelector("button");
acceptBtn.onclick = ()=>{
document.cookie = "CookieByGFX-Station; max-age="+60*60*24*30;
if(document.cookie){
cookieBox.classList.add("hide");
}else{
alert("Cookie can't be set! Please unblock this site from the cookie setting of your browser.");
}
}
let checkCookie = document.cookie.indexOf("CookieByGFX-Station");
checkCookie != -1 ? cookieBox.classList.add("hide") : cookieBox.classList.remove("hide");
//]]></script>This code is fully optimized and uses SVG codes so you don’t have to worry about site speed on the blogger website.
In conclusion, adding a cookie consent banner to your Blogger site is essential for ensuring compliance with data privacy regulations and providing transparency to your users.
