 |
| Cookie Consent Banner |
You have probably seen cookie consent banners asking for your authorization to set cookies when browsing the internet. Due to growing worries about data privacy and internet tracking, these ads have become a typical component of websites.
A cookie consent banner must be added to your website if you use Blogger as a blogger in order to comply with laws like the General Data Protection Regulation (GDPR) and the California Consumer Privacy Act (CCPA).
What does a cookie consent banner mean?
A cookie consent banner is a pop-up window or banner that appears on a website and asks visitors for permission to store or access their data while notifying them about the use of cookies.
When a person visits a website, little text files called cookies are downloaded to their computer. They are used to track website activity, recall user preferences, and deliver a more individualized experience. However, cookies can also be used for tracking or targeted advertising, so users must be made aware of this and given the option to accept or reject them.
A cookie consent banner installation on your Blogger site is a quick and easy process that only requires a few simple steps. We will describe how to add a cookie consent banner to Blogger in the sections below.
How to create a Blogger cookie consent banner
The steps below can be used to add a cookies consent banner or popup in Blogger.
- Go to the theme area in your Blogger dashboard.
- From the drop-down menu to the right of the modify button, select the edit HTML section.
- Next, look for the Body tag that closes the document </body>. This is usually the second to final line of your theme's code.
- To add the cookie consent banner to your Blogger website, paste the provided code directly above it and save the code.
Cookie Consent Banner Code
<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 = "CookieByKey2Blogging; 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("CookieByKey2Blogging");
checkCookie != -1 ? cookieBox.classList.add("hide") : cookieBox.classList.remove("hide");
//]]></script>
This code will take away the standard Blogger cookie notification and install a unique cookie consent popup to your Blogger website instead.
You don't need to be concerned about site speed on the blogger website because this code is perfectly optimized and employs SVG codes.
In conclusion, it is crucial to have a cookie consent banner on your Blogger site to ensure compliance with data privacy laws and to give users clarity.
I wish you luck in adding a personalized cookie consent widget to your blogger website. Please let me know in the comments area if you run into any problems with this code.
