Add Pop-up Cookie Notification
Let's Do a Demo Here...!
Before we start adding codes in XML, I will recommend you to take a Backup of your current theme. By chance if any problem occurs, you can restore it later.
Step 1:Login in your Blogger Dashboard.
Step 2 : Go to Themes Section
Step 3 : Then Go to Edit HTML
Step 4 : Now search for
]]></b:skin> and paste the given below CSS just above it.If your template has a dark mode feature, and if you want a different color when in dark mode, you can customise the codes as per your need. Each template can have a different dark mode class, so please adjust it, you can replace the Highlighted class with your template dark mode class.
/* COOKIES CONSENT */ .ckWrap{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}.ckWrap.acptd{animation: ckDn 2.5s backwards;animation-delay: 0.3s;-webkit-animation: ckDn 2.5s backwards;-webkit-animation-delay: 0.3s}.ckWrap.hide{display:none} .ckWrap .ckCont svg{width:50px;height:50px;fill:var(--head-color);stroke:var(--head-color);stroke-width:.8}.ckCont h2{margin:0;font-size:1.5rem;font-family:var(--font-body)}.ckCont p{margin:10px 0}.ckWrap .button{cursor: pointer;transition: all 0.3s ease;margin:0;position:relative}.ckWrap .button.outline{margin-left:8px}.ckWrap .button:hover{transform: scale(0.97)}.drkM .ckWrap{background:rgba(50, 50, 50, 0.8)}.drkM .ckWrap .ckCont svg{fill:var(--dark-text);stroke:var(--dark-text);stroke-width:.8}@media screen and (min-width:768px){.ckWrap{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}.ckWrap.acptd{animation: ckdeskDn 2.5s backwards;animation-delay: 0.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}}</body> And paste below given javascript just above it.<script>/*<![CDATA[*/ /* Disable default Blogger cookie notice */ cookieChoices = {}; /*]]>*/</script>
<script>/*<![CDATA[*/ /*@shinsenter/defer.js*/
!function(c,i,t){var f,o=/^data-(.+)/,class=u='IntersectionObserver',r=/p/.test(i.readyState),s=[],a=s.slice,d='lazied',n='load',e='pageshow',l='forEach',m='hasAttribute',h='shift';function p(e){i.head.appendChild(e)}function v(e,n){a.call(e.attributes)[l](n)}function y(e,n,t,o){return o=(o=n?i.getElementById(n):o)||i.createElement(e),n&&(o.id=n),t&&(o.onload=t),o}function b(e,n){return a.call((n||i).querySelectorAll(e))}function g(t,e){b('source',t)[l](g),v(t,function(e,n){(n=o.exec(e.name))&&(t[n[1]]=e.value)}),e&&(t.className+=' '+e),n in t&&t[n]()}function I(e){f(function(o){o=b(e||'[type=deferjs]'),function e(n,t){(n=o[h]())&&(n.parentNode.removeChild(n),(t=y(n.nodeName)).text=n.text,v(n,function(e){'type'!=e.name&&(t[e.name]=e.value)}),t.src&&!t[m]('async')?(t.onload=t.onerror=e,p(t)):(p(t),e()))}()})}(f=function(e,n){r?t(e,n):s.push(e,n)}).all=I,f.js=function(n,t,e,o){f(function(e){(e=y('SCRIPT',t,o)).src=n,p(e)},e)},f.css=function(n,t,e,o){f(function(e){(e=y('LINK',t,o)).rel='stylesheet',e.href=n,p(e)},e)},f.dom=function(e,n,t,o,i){function r(e){o&&!1===o(e)||g(e,t)}f(function(t){t=u in c&&new c[u](function(e){e[l](function(e,n){e.isIntersecting&&(n=e.target)&&(t.unobserve(n),r(n))})},i),b(e||'[data-src]')[l](function(e){e[m](d)||(e.setAttribute(d,''),t?t.observe(e):r(e))})},n)},f.reveal=g,c.Defer=f,c.addEventListener('on'+e in c?e:n,function(){for(I();s[0];t(s[h](),s[h]()))r=1})}(this,document,setTimeout),function(e,n){e.defer=n=e.Defer,e.deferscript=n.js,e.deferstyle=n.css,e.deferimg=e.deferiframe=n.dom}(this); /*]]>*/</script></footer> and paste the given HTML code just below to it.You Can Change The Highlighted Text According To Your Wish
<div class="section" id="addons-widgets-1"><div class="widget HTML" data-version="2" id="HTML21">
<div class="ckWrap hide" id="ckBox">
<div class="ckCont">
<svg class="fill" 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"></path></svg>
<h2>Cookies Consent</h2>
<p>This website uses cookies to ensure you get the best experience on our website.</p>
</div>
<button class="button highH" id="ckAcptBtn">Accept Cookies!</button>
<a class="button outline" href="#">Read More</a>
</div>
</div>
<script>/*<![CDATA[*/ var ckBox=document.getElementById("ckBox"),ckAcptBtn=document.getElementById("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="CookieConsent=Accepted; max-age=2592000; path=/",document.cookie?ckBox.classList.add("acptd"):alert(ckErrMes)};let e=document.cookie.indexOf("CookieConsent=Accepted");-1!=e?ckBox.classList.add("hide"):ckBox.classList.remove("hide")} /*]]>*/</script>
</div>Now you have successfully added Pop up Cookie Notifiaction if you have followed all these steps and don't forget to watch a Demo of it.
Conclusion
This is all about making a Contact Form using Telegram Bot API. I hope you enjoy this article. Please do share this article. And if you are facing problem in any section or you have any question then ask us in .
Copyright ©
.png)