How To Add A Cookie Consent Banner On Blogger

 

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).

What is a cookie consent banner?

A cookie consent banner is a pop-up or notification displayed on a website to inform visitors about the use of cookies and request their consent to store and access information on their devices. Cookies are small text files that websites place on a user's computer or mobile device to collect data about their browsing behavior, preferences, and interactions with the site.

The cookie consent banner typically provides information about the types of cookies being used, their purposes, and how the collected data will be utilized. It also includes options for users to accept or decline the use of cookies. In many regions, such as the European Union, the General Data Protection Regulation (GDPR) and similar laws mandate that websites obtain explicit consent from users before setting non-essential cookies.

This banner is part of compliance with privacy regulations and ensures transparency and control over data collection and processing practices by website operators. Users can choose to accept cookies, reject them, or adjust their preferences regarding cookie usage based on the information provided in the cookie consent banner.

For more Article

Top 5 Online Earning Website Without Investment 2023 

How to Earn Money Online in 2023 | Top Best ways to make money

How to earn money on Facebook in 2023

How to add a cookie consent banner on Blogger:

Adding a cookie consent banner on a Blogger website is essential for complying with privacy regulations and informing visitors about the use of cookies on your site. Here are step-by-step instructions to add a cookie consent banner on Blogger:

Access your Blogger account:

Log in to your Blogger account and navigate to the dashboard.

Access the Theme Editor:

Go to the "Theme" section in the left sidebar and click on "Edit HTML."

Backup your theme:

Before making any changes, it's advisable to back up your current theme. Click on "Download Theme" to save a copy of your existing theme.

Find the </head> tag:

In the HTML code, search for the `</head>` tag. You can use CTRL + F (Windows) or Command + F (Mac) to quickly find this tag.

Insert the cookie consent code:

Just before the `</head>` tag, insert the code for the cookie consent banner. You can use various cookie consent plugins or generate your own code.

If you want to generate your own code, you can use websites like Cookie Consent (https://www.cookieconsent.com/). Configure the settings and styles for the banner, and then copy the provided 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>

Save and apply changes:

After inserting the cookie consent code, click the "Save theme" button to save your changes.

fgf

Preview and test:

Preview your blog to ensure the cookie consent banner appears as expected. Make sure it displays and functions correctly on both desktop and mobile devices.

Publish changes:

If everything looks good, click on "Publish" to apply the changes to your live blog.

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.

Your cookie consent banner should now be visible to visitors on your Blogger website, informing them about the use of cookies and allowing them to provide consent.