_JIRALE.COM.png)
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.hide{display:none}
.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-row{position:relative;display:-webkit-box;display:-ms-flexbox;display:flex;text-align:left}
.cookie-img{padding-right:20px}
.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="http://www.w3.org/2000/svg"><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="https://policies.google.com/technologies/cookies" rel="nofollow noopener" target="_blank" title="Learn more">Read more</a></p>
<button class="cookie-buttons">Accept!</button>
</div>
</div>
</div>
<script>//<![CDATA[
const cookieBox = document.querySelector(".cookie-box"),
acceptBtn = cookieBox.querySelector("button");
acceptBtn.onclick = ()=>{
document.cookie = "CookieBy=Jirale; max-age="+60*60*24*30;
if(document.cookie){
cookieBox.classList.add("hide");
}else{
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");
//]]></script>
Conclusion
Telegram
CONCLUSION
In this article, I shared with you Add Cookies Notice On Blogger (Jirale.com). 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.
©Copyright: Jirale.com™