How to Add a Cookie Consent to Your Blogger Website (Responsive)
How to Add a Responsive Cookie Consent banner to Blogger (Step-by-Step Guide)
If you own a website on Blogger, ensuring compliance with privacy regulations such as GDPR (General Data Protection Regulation) and CCPA (California Consumer Privacy Act) is essential. One of the easiest and most effective ways to achieve this is by adding a cookie consent banner to your Blogger website. This banner notifies visitors that your site uses cookies to enhance their experience, allowing them to accept or learn more about your cookie policy.
In this step-by-step guide, I will show you how to easily add a cookie consent banner to your Blogger website (Blogspot website) to ensure your site complies with privacy laws.
Also Read: How to Add a Floating Contact Form in Blogger
What is Cookie Consent?
Cookies are small text files that store user information, such as login status, browsing preferences, or language settings, to provide a more personalized experience. While cookies can improve usability, they also collect personal data, which raises privacy concerns.
Cookie consent is the process by which a website obtains permission from its visitors to store and use cookies on their device. According to regulations like GDPR, CCPA, and the ePrivacy Directive, website owners must inform users about the types of cookies they use and obtain consent before placing cookies that track personal data.
Also Read: How to Add a Popup Toast Notification Widget in Blogger.
Why is Cookie Consent Important for Blogger Users?
If your website has visitors from the European Union, California, or other regions with strict privacy laws, you are legally required to display a cookie consent banner. Adding a cookie consent banner for Blogger ensures compliance with these laws and avoids fines.
Here are the key reasons why adding a cookie consent banner to your Blogger site is important:
Compliance with Laws: You must follow laws like GDPR and CCPA, which require you to get permission before using cookies that collect personal information.Transparency: A cookie consent banner informs visitors about how their data is collected and used, building trust with your audience.
Building Trust: Displaying a cookie consent notice shows that you respect users’ privacy, which helps build trust and credibility.
Steps to Add a Cookies Consent Widget to Your Blogger Site
To add a cookie consent banner to your Blogger website, follow these steps:
Step 1: Log in to Blogger and go to your blog's dashboard. Click on Theme from the left sidebar to customize your blog’s appearance.
Step 2: In the Theme section, click on Edit HTML to access your blog’s code.
Step 3: In the HTML editor, press Ctrl + F (or Cmd + F on Mac) to open the search bar. Type </b:skin> to locate the closing </b:skin> tag. Just above the </b:skin> tag, paste the following CSS code to style the cookie consent:
.e2wrapper{position: fixed;bottom: 25px;left: -400px;max-width: 400px;width: 100%;background: #fff;border-radius: 8px;padding: 18px;transition: left 0.3s ease;box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);z-index:99999;border:2px solid #0066ff;}
.e2wrapper.show{left: 20px;}
.e2wrapper .e2flex{display: flex;align-items: center;justify-content: center;gap: 15px;}
.e2svg svg{width: 60px;height: 60px;}
.data p{margin-bottom:10px!important;font-size:16px}
.data a{color:#0066ff}
.e2button{display: flex;align-items: center;justify-content: center;flex-shrink: 0;width: auto;height: 2.25rem;background: #0066ff;font-size: 0.875rem;color: #fff;font-weight: 500;padding: 0 1rem;border-radius:6px;}
@media (max-width: 480px){.e2wrapper.show{left: 0.5%;}
.e2wrapper{max-width: 99%;bottom:0;padding:18px 5px;transition: bottom 0.3s ease;}}Step 4: After adding the CSS code, search for the </body> tag by pressing Ctrl + F (or Cmd + F) and locating it in the HTML. Just above the </body> tag, paste the following HTML and JavaScript code for the cookie consent banner:
<div class="e2wrapper"><div class="e2flex"><div class="e2svg"><svg height="65" style="fill: rgb(0, 102, 255);" viewbox="0 0 24 24" width="65" xmlns="http://www.w3.org/2000/svg"><path d="M21.598 11.064a1.006 1.006 0 0 0-.854-.172A2.938 2.938 0 0 1 20 11c-1.654 0-3-1.346-3.003-2.938.005-.034.016-.134.017-.168a.998.998 0 0 0-1.254-1.006A3.002 3.002 0 0 1 15 7c-1.654 0-3-1.346-3-3 0-.217.031-.444.099-.716a1 1 0 0 0-1.067-1.236A9.956 9.956 0 0 0 2 12c0 5.514 4.486 10 10 10s10-4.486 10-10c0-.049-.003-.097-.007-.16a1.004 1.004 0 0 0-.395-.776zM8.5 6a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3zm-2 8a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm3 4a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm2.5-6.5a1.5 1.5 0 1 1 3 0 1.5 1.5 0 0 1-3 0zm3.5 6.5a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3z"></path></svg></div><div class="e2data"><div class="data"><p>This site uses cookies from Google to deliver its services and to analyze traffic. <a href="#">Learn more <svg class="bi bi-box-arrow-up-right" fill="currentColor" height="16" viewbox="0 0 16 16" width="16" xmlns="http://www.w3.org/2000/svg"><path d="M8.636 3.5a.5.5 0 0 0-.5-.5H1.5A1.5 1.5 0 0 0 0 4.5v10A1.5 1.5 0 0 0 1.5 16h10a1.5 1.5 0 0 0 1.5-1.5V7.864a.5.5 0 0 0-1 0V14.5a.5.5 0 0 1-.5.5h-10a.5.5 0 0 1-.5-.5v-10a.5.5 0 0 1 .5-.5h6.636a.5.5 0 0 0 .5-.5" fill-rule="evenodd"><path d="M16 .5a.5.5 0 0 0-.5-.5h-5a.5.5 0 0 0 0 1h3.793L6.146 9.146a.5.5 0 1 0 .708.708L15 1.707V5.5a.5.5 0 0 0 1 0z" fill-rule="evenodd"></path></path></svg></a></p></div><button class="e2button" id="acceptBtn">Ok, Got it!</button></div></div></div><script>//<![[CDATA>const cookieBox = document.querySelector(".e2wrapper"),buttons = document.querySelectorAll(".e2button");const executeCodes = () => {if(document.cookie.includes("E2Info")) return;cookieBox.classList.add("show");buttons.forEach((e2button) => {e2button.addEventListener("click", () => {cookieBox.classList.remove("show");if (e2button.id == "acceptBtn"){document.cookie = "cookieBy= E2Info; max-age=" + 60 * 60 * 24;}});});};window.addEventListener("load", executeCodes); ]]>//</script>{codeBox}
Step 5: Once you've pasted both the CSS and the HTML/JavaScript code, click the Save button to apply the changes.
Step 6: View your blog to confirm the cookie consent banner appears and functions properly.
Conclusion
Adding a cookie consent banner to your Blogger website is a simple yet important step to comply with privacy laws like GDPR and CCPA. By following these steps, you can ensure that your blog is legally compliant, transparent, and trustworthy, which can help you build a loyal audience and avoid penalties.
){kind=link}