How To Add a Cookie Consent Banner on Blogger

Hello, everyone! In this post, I'll guide you To Add a Cookie Consent Banner on Blogger with follow simple steps
5 3 votes
Article Rating

Hello, everyone! In this post, I’ll guide you on installing cookie notifications on your Blogger (Blogspot) blog. When you explore websites or blogs, you often encounter a pop-up either at the bottom or top of the page. This notification, known as a cookies notification, is what I’ll delve into today, providing a detailed explanation of how to set it up for your Blogger blog. But before we dive into the installation process, let’s first understand the term “cookies.” How To Add a Cookie Consent Banner on Blogger

While surfing the web, you’ve likely encountered a cookie consent banner prompting you to either accept or decline cookies. These banners have become a ubiquitous element on websites, reflecting the growing emphasis on data privacy and concerns regarding online tracking.

Also Read:- Hide your Blogger Profile On Google Search

For bloggers on the Blogger platform, incorporating a cookie consent banner into your site is imperative to align with regulations like the General Data Protection Regulation (GDPR) and the California Consumer Privacy Act (CCPA). This ensures that your website complies with privacy standards and respects user data protection rights.

What is a cookie consent notification?

A cookie is a small file containing a bundle of data. The cookie itself doesn’t actually “do” anything, but it’s installed on a device and can be used to identify the user or collect personal data. In addition, this feature also has another function to remember all the history of the movements of the visitors when opening the page. When you visit a site, you may have registered on a site by entering your username and password data. Well, after a few days, you can enter the site again without registering. This is one of its functions that can remember activities based on the device’s IP.

A cookie consent is a user’s acknowledgement or permission for a website to store and retrieve information on their device through the use of cookies. Cookies are small text files that websites place on users’ devices (such as computers, smartphones, or tablets) when users visit them. These files contain data that can be useful for various purposes, such as remembering user preferences, enhancing user experience, and providing analytics data to website owners.

Also Read:- Blogger URL से ?M=1 / ?M=0 कैसे हटाए

Cookie consent has become essential due to privacy concerns and regulations, such as the General Data Protection Regulation (GDPR) in the European Union. These regulations require websites to obtain explicit consent from users before storing or accessing information on their devices, including cookies.

The cookie notification is a notification to all visitors about the Legislation that addresses site issues in the European Union.

Here’s how cookie consents typically work:

  1. Pop-up or Banner: When a user visits a website for the first time or after clearing their cookies, a pop-up banner or overlay may appear, informing them that the site uses cookies. This banner usually includes information about the types of cookies used and their purposes.
  2. Consent Options: The cookie consent banner provides options for users to either accept or decline the use of cookies. Some banners also offer more granular controls, allowing users to choose which cookies they want to allow.
  3. Implied Consent: Some websites may implement implied consent, where continued use of the site is considered acceptance of the cookie policy. However, this approach is becoming less common, especially in regions with strict privacy regulations.
  4. Cookie Settings Page: Many websites provide a link to a dedicated cookie settings page where users can find more detailed information about the cookies used, manage their preferences, or withdraw their consent at any time.
  5. Duration of Consent: Users may be asked to reconfirm their consent after a certain period, ensuring that their preferences are up-to-date and reflect any changes in the website’s cookie usage.

Websites need to make their cookie policies transparent and easily accessible to users. Additionally, complying with relevant privacy regulations ensures that users are informed about and have control over the data collected through cookies.

Also Read:- Google Drive Direct Link Generator Tool in Blogger

What is the EU Cookie Law

If you run a website or blog, it’s a safe bet you use cookies. If your website or blog readers live in Europe and your site uses cookies, you may be breaking the law. European Union (EU) laws require you to give EU visitors information about cookies used on your blog. In many cases, these laws also require you to obtain consent.

  1. When someone visits your website, you need to let them know that your site uses cookies.
  2. You need to provide detailed information regarding how that cookie data will be utilized.
  3. You need to provide visitors with some means of accepting or refusing the use of cookies on your site.
  4. If they refuse, you need to ensure that cookies will not be placed on their machine.

How to add a cookie consent banner on Blogger

To Add a cookies consent Banner or Popup in Blogger, follow the steps below.

  1. Open your Blogger dashboard and Go to the Theme section.
  2. Now click on the ‘Edit HTML‘ section from the drop-down menu just the right side of the customize button.
  3. Now search for the closing Body tag (</body>) That is generally the 2nd last line of your theme code.
  4. 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 = "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>

Also Read: – Backlink क्या है और Backlink क्यों जरुरी है Top 10 FAQ

This code serves the purpose of eliminating the default Blogger cookie notification, substituting it with a customized cookie consent banner or popup on your Blogger website. It is meticulously optimized, utilizing SVG codes to alleviate concerns about site speed on the Blogger platform.

Conclusion

In summary, integrating a cookie consent banner into your Blogger site is crucial for adhering to data privacy regulations and fostering user transparency.

I trust this article guides you in implementing a personalized cookie consent widget on your Blogger website. Should you encounter any challenges with the provided code, please feel free to share your concerns in the comment section.

Disclaimer

By using this javascript plugin you agree to following these terms.

  1. It is the responsibility of the website developer using this plug-in to check that cookies are being set at the correct times
  2. This site and its owner accept no responsibility for integration or behaviour on any other website.

In this post, I have shared How to Install Cookies Notifications on Blogger. I hope this way of installing cookies Notifications on Blogger can be very useful for you and your blog. Thank you for visiting our website.

5 3 votes
Article Rating
Subscribe
Notify of
guest

0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x