Ads are pain !! But this is only way to manage server cost. Join Group!

Add Cookies Notice On Blogger (

Hello readers, in this article I will share with you the code to add cookie usage notice in blogger. Using HTML, CSS, and JavaScript makes your blog
Please wait 0 seconds...
Scroll Down and click on Go to Link for destination
Congrats! Link is Generated


Hello readers, in this article I will share with you the code to add cookie usage notice in blogger. Using  HTML, CSS, and JavaScript makes your blog more professional. A message that shows when a user visits the blog for the first time will see the message and click 'Accept!' and when you enter another page or move the page, the dialog box will no longer appear.  

If the user does not disable the display, when entering another page or moving the page, the message will appear until the user disables the display with the Accept button! Users will not be able to disable notifications by blocking the use of cookies on your blog.

The cookie notice will appear again after the deadline set by us. If the user has not expired, but deletes the browser history, including cookies again, the message continued at the time the user canceled the notification will appear again.

Important: Make a backup of your template before making any changes, if there is an error, you can restore it in the future.

Follow the steps below:

You must log in to the  Blogger admin page. Then go to the  Theme menu. On the Customize menu, click the menu button and select  Edit HTML

  • 1. Add CSS to your blog.

.cookie-box{position:fixed;width:100%;max-width:400px;min-height:100px;background-color:#ffffff;box-shadow:25px 12px 25px 12px rgb(30 30 30 / 4%);z-index:990;border-radius:6px;bottom:15px;left:15px;padding:15px}
.cookie-img svg{fill:#333;width:60px}
.cookie-content p{position:relative;width:100%;display:inline-block;font-size:15px;color:#666666;margin-top:0}
.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}

  • 2. Add HTML before the closing </body> tag

<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="#f75b1e"></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="" rel="nofollow noopener" target="_blank" title="Learn more">Read more</a></p>
<button class="cookie-buttons">Accept!</button>
3. Finally, add the Javascript before the closing </body> tag and save.
const cookieBox = document.querySelector(".cookie-box"),
acceptBtn = cookieBox.querySelector("button");
acceptBtn.onclick = ()=>{
document.cookie = "CookieBy=Jirale; 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("CookieBy=Jirale");
checkCookie != -1 ? cookieBox.classList.add("hide") : cookieBox.classList.remove("hide");


In today's article, I shared how  to Add Cookies Notice on Blogger – I hope you liked it and please share it with your friends and follow our blog for more content



In this article, I shared with you Add Cookies Notice On Blogger ( I hope you have liked It. Please do share it with your friends and follow our blog for more.

If you face any problems in Demo, Download or have any questions so feel free to ask me in comments section or join our Telegram Channel to get the lastest posts updates daily.

Our All Posts Are Protected By DMCA. So Don't Try To Copy Our Posts And Reproduction In Any Way Is Strictly Prohibited! Or else Legal Actions Will Be Taken.

Jirale offers expert insights on technology, gadgets, software, and more. Explore our articles to stay ahead in the fast-paced world of tech.

Post a Comment

Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.