Responsive Cookie Consent Notice Widget in Blogger

Here you will know How to Create Responsive Cookie Consent Notice Widget in Blogger to get more visitors and reader for future posts

Also read :Lazy load AdSense ads in blogger to speedup

Go To Blogger Dashboard and click on Edit HTML then Follow below instruction and paste the codes accordingly:

Find ]]></b:skin>  and above it paste below code_

/* Cookies Consent Notice */
.ckWrap{position:fixed;right:20px;left:20px; margin-bottom: 80px; bottom:-600px;z-index:10;padding:20px;background:rgba(255, 255, 255, 0.8);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:30px 30px;box-shadow:0 -10px 25px -5px rgba(0,0,0,.1);align-items:center;justify-content:center;text-align:left;animation:ckUp 2.5s forwards;animation-delay:1s;-webkit-animation:ckUp 2.5s forwards;-webkit-animation-delay:1s}
.ckWrap.acptd{animation:ckDn 2.5s backwards;animation-delay:.3s;-webkit-animation:ckDn 2.5s backwards;-webkit-animation-delay:.3s}
.ckWrap.hidden{display:none}
.ckCont h2{margin-bottom: 10px; font-size: 1.1rem; font-weight: 700; font-family: var(--fontCo);}
Also read :gZip compression in blogger template to speedup
.ckCont h2::after {content: ''; display: inline-block; vertical-align: middle; width: var(--widgetTa); margin: 0 10px; border-bottom: 1px solid var(--widgetTac); opacity: .5;}
.ckCont p{margin:10px 0;line-height:1.4rem;color:#08102b;font-size: 14px;font-weight:400;font-family: var(--fontCo);}
.ckF{margin-top: 15px; display: flex; justify-content: center;}
.ckB {display: inline-flex; align-items: center; cursor: pointer; padding: 10px 15px; outline: 0; border: 0; border-radius: var(--buttonR); line-height: 20px; color: rgba(0,0,0,.8); background: #e9e9e9; font-size: 14px; font-family: var(--fontB); white-space: nowrap; overflow: hidden;}
.ckF >*:first-child {margin-right: 10px; border-radius: 8px; background: var(--linkB); color: #fffdfc;}
.ckF >*:last-child {flex: 0 0 auto; border-radius: 8px;}
.ckF >* {flex-grow: 1; justify-content: center;}
@media screen and (min-width:768px){.ckWrap{max-width:400px; left: 20px; right: 20px; margin-bottom:20px; border-radius:10px; bottom:-600px;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}.ckWrap.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}}
Also read :Lazy Load for Blogger Images
@-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}}
.darkMode .ckWrap{background:rgba(50, 50, 50, 0.8)}
.darkMode .ckCont h2, .darkMode .ckCont p, .darkMode{color:#fefefe}

Find </head> and above it paste below code_

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

Find </body> and above it paste below code_

<script>/*<![CDATA[*/ /* Cookies Consent Notice */ var ckBox=document.querySelector("#ckBox"),ckAcptBtn=document.querySelector("#ckAcptBtn"),ckErrMes="Cookie can't be set! Please unblock this site from the cookie setting of your browser.";if(null!=ckBox){ckAcptBtn.onclick=()=>{document.cookie="CookieConsentByFineshop=Accepted; max-age=2592000; path=/",document.cookie?ckBox.classList.add("acptd"):alert(ckErrMes)};let e=document.cookie.indexOf("CookieConsentByFineshop=Accepted");-1!=e?ckBox.classList.add("hidden"):ckBox.classList.remove("hidden")} /*]]>*/</script>

Click to save and back from theme html option.

Now go to layout option and in sidebar add a html /javascript then past below code and save ite_

<!--[ Cookies Consent Notice ]-->
<div class='ckWrap hidden' id='ckBox'>
  <div class='ckCont'>
Also read :Reading progress bar / scroll bar in blogger
    <!--[ Cookies Notice Heading ]-->
    <h2>Cookies Consent</h2>
    <!--[ Cookies Notice Detail ]-->
    <p>We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.</p>
  </div>
  <div class='ckF'>
    <button class='ckB' id='ckAcptBtn'>Accept Cookies!</button>
    <a class='ckB' href='https://policies.google.com/technologies/cookies'>Learn More</a>
  </div>
</div>

Finally  see and see the change with cookies pop up in your website page.....