How to Add a Cookie Notification in 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).

How to Add a Cookie Notification in 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 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=''><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='' target='_blank' title='Learn more'>Learn more</a></p>
 <button class='cookie-buttons'>Accept!</button>

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

    cookieChoices = {};
    const cookieBox = document.querySelector(".cookie-box"),
    acceptBtn = cookieBox.querySelector("button");
    acceptBtn.onclick = ()=>{
      document.cookie = "CookieByGFX-Station; max-age="+60*60*24*30;
        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");

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.

Click on a star to rate it!

Average rating 0 / 5. Vote count: 0

No votes so far! Be the first to rate this post.

Leave a Reply