How to Add a Cookie Consent Widget to Blogger 2023?

Did you know that you need to have a Cookie Consent Notification pop up on your blogger site? This is required by the new EU law which will come into effect on the 26th of May. To avoid getting slapped with a heavy fine if you have an AdSense Approval, use Cookie Consent Notification Widget from my site.

Blogger might be a free platform, but it has given us flexible opportunities to make our Blogs or Websites more performing and professional. One of the features which increases the performance of your site is the Cookie Consent Notification widget.

Cookies consent is a hot topic – and for good reason. In 2016, the EU introduced the new General Data Protection Regulation (GDPR), which states that EU users must be informed about how website owners are using their information from the very beginning. This means that not only will you have to provide a cookie policy on your website, but this policy must also be so clear that everyone can understand it.

Here, I'm going to share with you the complete information about Cookie Consent Notification, its use, and how to set it up for Blogger Blogs.

What is Cookies Consent?

When someone visits the website, the site owner can store some information on your device, called cookies. A cookie is a small text file that is stored on your computer or mobile device for use on websites. Cookies are used to store and retrieve information about visitors, including preferences and history, which helps us to make improvements to the website and provide a better overall user experience

We use them every day and we never once think about it. Yet, cookies consent is a legal requirement that can have negative impacts if not handled properly, as any good lawyer will tell you

Your cookie policy should inform your users about cookies and their uses, allow the users to accept or refuse the cookie, and present what would happen if they declined them.

I hope You know what cookies are. They're those little files that some websites use to store data and enhance your browsing experience. Some of them remember things like the name and color you chose for the font in a forum.

Some might store things like the items in your online shopping cart at Amazon or the size and color of a shirt you're considering buying from Zappos. And then there are those cookies that allow tracking services like Google Analytics to offer their web analytics services, helping you see where visitors are coming from, from what device, how long they're staying on your site, and more.

You can also see my past post on Add dark mode on blogger with cookies or you can download free blogger template 2022 with in-built cookies consent.

Most websites use cookies - little pieces of information stored in your web browser to keep track of what you've already seen, personalize your experience, and deliver advertising messages. Cookies are used for various purposes and help make the Web more interactive. In this article, I will review the benefits of using cookies and the way they can improve customer experience on your website.

What are the benefits of using cookies consent on blogger sites?

You may have noticed a new sign appearing on your website agreeing to cookies. This article will examine the benefits of using cookies consent and legal changes relating to European Union law.

There are a lot of benefits of using cookies consent forms on your website.

• Great way to help people understand what’s going on when they visit your website.

• Cookies that can offer to create a better user experience are often overlooked.

• They’re used for a wide range of reasons, from tracking how many different people visit a website, to remembering what kinds of information you entered into a form.

• Cookies can make it easier for you to navigate around our website, they also make it much easier for us to run promotions.

• Cookies often contain anonymous information about your internet activity, for example, the sites you have visited or the files you’ve downloaded.

You may want to read this post :

• Median Ui 1.6 AMP Blogger Template.
• Animage- Responsive Blogger Template-New
• Top Free Responsive Blogger Template 2022.

How to Create Cookie Consent Notification Widget for Blogger 2023?

A Cookie Consent Notification Widget will help you with GDPR compliance. According to the new European law, you as a blogger need to collect consent for cookie usage. Here’s how to do it perfectly.

First Step 

• Go to Blogger Dashboard and click the theme section
• Click the arrow down icon and chose to customize the option
• Next, Take a backup of your site the Click Edit Html
• After that find </style> or ]]></b:skin> and copy below CSS code and paste above </style> or ]]></b:skin>.

/* Cookies Consent Notice */
.CwR{position:fixed;right:0;left:0;bottom:-600px;z-index:50;width:100%;padding:20px;background:rgba(255, 255, 255, 0.8);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:30px 30px 0 0;box-shadow:0 -10px 25px -5px rgba(0,0,0,.1);align-items:center;justify-content:center;text-align:center;animation:ckUp 2.5s forwards;animation-delay:1s;-webkit-animation:ckUp 2.5s forwards;-webkit-animation-delay:1s}
.CwR.acptd{animation:ckDn 2.5s backwards;animation-delay:.3s;-webkit-animation:ckDn 2.5s backwards;-webkit-animation-delay:.3s}
.CwR.hidden{display:none}
.CwR .CcN svg{width:50px;height:50px;fill:#08102b;stroke:#08102b;stroke-width:.8}
.CcN h2{margin:0;color:#08102b;font-size:1.5rem;font-weight:800;font-family:inherit}
.CcN p{margin:10px 0;line-height:1.7em;color:#08102b;font-size:0.9rem;font-weight:400;font-family:inherit}
.CwR .btn{display:inline-flex;align-items:center;margin:0;padding:10px 15px;outline:0;border:0;border-radius:2px;line-height:20px;color:#fefefe;background-color:#482dff;font-size:13px;font-family:inherit;text-decoration:none;white-space:nowrap;overflow:hidden;max-width:100%;cursor:pointer;transition:all 0.3s ease}
.CwR .btn:hover{opacity:.8;transform:scale(0.97)}
.CwR .btn.outl{color:#08102b;margin-left:8px;background-color:transparent;border:1px solid #767676}
.CwR .btn.outl:hover{border-color:#482dff}
@media screen and (min-width:768px){.CwR{max-width:450px;border-radius:10px;left:auto;right:30px;bottom:-500px;box-shadow:0 5px 35px rgba(0,0,0,.1);animation:ckdeskUp 2.5s forwards;animation-delay:1s;-webkit-animation:ckdeskUp 2.5s forwards;-webkit-animation-delay:1s}.CwR.acptd{animation:ckdeskDn 2.5s backwards;animation-delay:.3s;-webkit-animation:ckdeskDn 2.5s backwards;-webkit-animation-delay:0.3s}}
@-webkit-keyframes ckUp{100%{bottom:0}}
@keyframes ckUp{100%{bottom:0}}
@-webkit-keyframes ckdeskUp{100%{bottom:30px}}
@keyframes ckdeskUp{100%{bottom:30px}}
@-webkit-keyframes ckDn{0%{bottom:0}100%{bottom:-600px}}
@keyframes ckDn{0%{bottom:0}100%{bottom:-600px}}
@-webkit-keyframes ckdeskDn{0%{bottom:30px}100%{bottom:-600px}}
@keyframes ckdeskDn{0%{bottom:30px}100%{bottom:-600px}}
.drK .CwR{background:rgba(50, 50, 50, 0.8)}
.drK .CwR .CcN svg{fill:#fefefe;stroke:#fefefe}
.drK .CcN h2, .drK .CcN p, .drK .btn.outl{color:#fefefe}

Second Step

You know that Blogspot has inbuilt Cookies consent so we have to disable it, you need to copy below Javascript code and paste it above </head> on the template.

<script>/*<![CDATA[*/ /* Disable default Blogger cookie notice */ cookieChoices = {}; /*]]>*/</script>

Third Step

To add Cookies Notification, Find Tag and copy the below Html and Javascript and paste just above </body>.

<!--[ Cookies Consent Notice ]-->
<div class='K2C k2hide' id='K2C_box'>
  <div class='K2C-Main'>
    <svg viewbox='0 0 50 50'><path d='M 25 4 C 13.414063 4 4 13.414063 4 25 C 4 36.585938 13.414063 46 25 46 C 36.585938 46 46 36.585938 46 25 C 46 24.378906 45.960938 23.78125 45.910156 23.203125 C 45.878906 22.855469 45.671875 22.546875 45.359375 22.390625 C 45.042969 22.234375 44.671875 22.253906 44.375 22.441406 C 43.824219 22.792969 43.191406 23 42.5 23 C 41.015625 23 39.769531 22.082031 39.253906 20.792969 C 39.148438 20.527344 38.933594 20.320313 38.667969 20.222656 C 38.398438 20.125 38.101563 20.144531 37.847656 20.28125 C 37.003906 20.738281 36.035156 21 35 21 C 31.675781 21 29 18.324219 29 15 C 29 13.964844 29.261719 12.996094 29.71875 12.152344 C 29.855469 11.898438 29.875 11.601563 29.777344 11.332031 C 29.679688 11.066406 29.472656 10.851563 29.207031 10.746094 C 27.917969 10.230469 27 8.984375 27 7.5 C 27 6.808594 27.207031 6.175781 27.558594 5.625 C 27.746094 5.328125 27.765625 4.957031 27.609375 4.640625 C 27.453125 4.328125 27.144531 4.121094 26.796875 4.089844 C 26.21875 4.039063 25.621094 4 25 4 Z M 38 4 C 36.894531 4 36 4.894531 36 6 C 36 7.105469 36.894531 8 38 8 C 39.105469 8 40 7.105469 40 6 C 40 4.894531 39.105469 4 38 4 Z M 25 6 C 25.144531 6 25.292969 6.015625 25.4375 6.023438 C 25.285156 6.519531 25 6.953125 25 7.5 C 25 9.4375 26.136719 10.984375 27.660156 11.960938 C 27.269531 12.90625 27 13.917969 27 15 C 27 19.40625 30.59375 23 35 23 C 36.082031 23 37.09375 22.730469 38.039063 22.339844 C 39.015625 23.863281 40.5625 25 42.5 25 C 43.046875 25 43.480469 24.714844 43.980469 24.5625 C 43.984375 24.707031 44 24.855469 44 25 C 44 35.503906 35.503906 44 25 44 C 14.496094 44 6 35.503906 6 25 C 6 14.496094 14.496094 6 25 6 Z M 36.5 12 C 35.671875 12 35 12.671875 35 13.5 C 35 14.328125 35.671875 15 36.5 15 C 37.328125 15 38 14.328125 38 13.5 C 38 12.671875 37.328125 12 36.5 12 Z M 21.5 15 C 20.671875 15 20 15.671875 20 16.5 C 20 17.328125 20.671875 18 21.5 18 C 22.328125 18 23 17.328125 23 16.5 C 23 15.671875 22.328125 15 21.5 15 Z M 45 15 C 44.449219 15 44 15.449219 44 16 C 44 16.550781 44.449219 17 45 17 C 45.550781 17 46 16.550781 46 16 C 46 15.449219 45.550781 15 45 15 Z M 15 20 C 13.34375 20 12 21.34375 12 23 C 12 24.65625 13.34375 26 15 26 C 16.65625 26 18 24.65625 18 23 C 18 21.34375 16.65625 20 15 20 Z M 24.5 24 C 23.671875 24 23 24.671875 23 25.5 C 23 26.328125 23.671875 27 24.5 27 C 25.328125 27 26 26.328125 26 25.5 C 26 24.671875 25.328125 24 24.5 24 Z M 17 31 C 15.894531 31 15 31.894531 15 33 C 15 34.105469 15.894531 35 17 35 C 18.105469 35 19 34.105469 19 33 C 19 31.894531 18.105469 31 17 31 Z M 30.5 32 C 29.121094 32 28 33.121094 28 34.5 C 28 35.878906 29.121094 37 30.5 37 C 31.878906 37 33 35.878906 33 34.5 C 33 33.121094 31.878906 32 30.5 32 Z'/></svg>
    <h2>Cookies Consent</h2>
    <p>This website uses cookies to offer you a better Browsing Experience. By using our website, You agree to the use of Cookies</p>
  </div>
  <button class='C-button' id='Cookie_btn'>Accept Cookies!</button>
  <a class='C-button outl' href='####'>Learn More</a>
</div>
<script>/*<![CDATA[*/ var K2C_box=document.querySelector("#K2C_box"),Cookie_btn=document.querySelector("#Cookie_btn"),ckErrMes="Cookie can't be set! Please unblock this site from the cookie setting of your browser.";if(null!=K2C_box){Cookie_btn.onclick=()=>{document.cookie="CookieConsentByFineshop=Accepted; max-age=2592000; path=/",document.cookie?K2C_box.classList.add("acptd"):alert(ckErrMes)};let e=document.cookie.indexOf("CookieConsentByFineshop=Accepted");-1!=e?K2C_box.classList.add("k2hide"):K2C_box.classList.remove("k2hide")} /*]]>*/</script>

Fourth Step

After that paste your link in the place of (####) and Save your setting by clicking the save icon and opening your site you will see Stylish responsive Cookies Notification on your blogger site like a WordPress site.

Now you are perfectly aware of how to create your cookie consent notification widget and make it work properly. If anything is still unclear or you don’t understand anything then tell us in the comment section. We will surely help you out.