By using this site, you agree to the Privacy Policy and Terms of Use.
Accept
Blogbeast
  • Adsense
  • Blogger
  • WordPress
  • Social Media
  • SEO
  • Tips
  • Offbeat
Search
© 2022 Foxiz News Network. Ruby Design Company. All Rights Reserved.
Reading: How to add a cookie consent notification to Blogger
Share
Sign In
Notification Show More
Latest News
What is blogging and how to make money from it?
What is blogging and how to make money from it?
Offbeat
How To Make Money from Blogging
8 Fastest ways on How To Make Money from Blogging
monetization
What is wordpress plugin
20 Best WordPress Plugins for your Websites in 2022
wordpress
How to Uninstall Wordpress Plugins manually
How to Uninstall WordPress Plugins completely with Shortcode
wordpress
What is wordpress plugin
What is wordpress plugin ? How to install WordPress plugin in 4 easy methods?
wordpress
Aa
Blogbeast
Aa
  • Adsense
  • Blogger
  • WordPress
  • Social Media
  • SEO
  • Tips
  • Offbeat
Search
  • Adsense
  • Blogger
  • WordPress
  • Social Media
  • SEO
  • Tips
  • Offbeat
Have an existing account? Sign In
Follow US
© 2022 Foxiz News Network. Ruby Design Company. All Rights Reserved.
bloggerwidgets

How to add a cookie consent notification to Blogger

admin
Last updated: 2022/08/27 at 6:21 PM
admin
Share
4 Min Read
SHARE

Hello friends, in this article, I will share with you the code to add a cookie dialog box to your Blog or Website. Code using HTML, CSS and Javascript, this dialog gives your Blog a more professional feel when the majority of foreign Blogs and Websites use it.

The message that appears when the user visits the Blog for the first time will see the message and click the Accept! and when accessing another page or reloading the page the dialog will not appear again. If the user does not turn off the notification, then when accessing another page or reloading the page the message will still appear until the user turns off the notification with the Accept! button. And users will be blocked from being able to turn off notifications when blocking the use of cookies on your Blog.

The cookie usage notice will reappear after a cookie expiration period that we set. If the user has not expired but the user deletes the browser history including cookies, when accessing again the message will appear again calculated by the time when the user turned off the notification.

The steps to add the message dialog box are as follows:
Step 1: Add the following 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='#7577a9'></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'>Learn more</a></p>
      <button class='cookie-buttons'>Accept!</button>
</div>
</div>
</div>

You can replace Our website uses cookies to improve your experience with your own custom content.

Step 2: Add the following 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}

CSS you edit the color as well as the appropriate properties for your Blog, this is the reference CSS like my Blog.

Step 3: Finally add the following Javascript before the closing </body> tag to continue.

<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js'></script>
<script>//<![CDATA[
    const cookieBox = document.querySelector(".cookie-box"),
    acceptBtn = cookieBox.querySelector("button");
    acceptBtn.onclick = ()=>{
      document.cookie = "CookieBy=NguyenLuongDuy; 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=NguyenLuongDuy");
    checkCookie != -1 ? cookieBox.classList.add("hide") : cookieBox.classList.remove("hide");
  //]]></script>

 

If your Blog already has a Jquery library, then remove the tag containing the Jquery library above. And you set the cookie expiration time in this paragraph, max-age=”+60*60*24*30in which the first 60 is seconds, followed by minutes, then hours, and finally the day as set on me is 30 days.

That’s it, I have shared with you how to add cookie usage information to Blog/Website that can be applied to other platforms besides Blogspot. Good luck!

You Might Also Like

How to make a Biolink for Instagram on Blogger

Difference between Blogger and WordPress | Best blogging platform in 2022

How To make your blogger theme responsive

How to Add Simple Stylish Recent Posts Widget For Blogger

Share this Article
Facebook Twitter Copy Link Print
Share
Posted by admin
Follow:
Success is no accident. It is hard work, perseverance, learning, studying, sacrifice and most of all, love of what you are doing or learning to do.
Previous Article Difference between Blogger and WordPress | Best blogging platform in 2022
Next Article How to Delete Your Instagram Account Permanently 2022
Leave a comment Leave a comment

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Stay Connected

235.3k Followers Like
69.1k Followers Follow
56.4k Followers Follow
136k Subscribers Subscribe
- Advertisement -
Ad imageAd image

Latest News

What is blogging and how to make money from it?
What is blogging and how to make money from it?
How To Make Money from Blogging
8 Fastest ways on How To Make Money from Blogging
What is wordpress plugin
20 Best WordPress Plugins for your Websites in 2022
How to Uninstall Wordpress Plugins manually
How to Uninstall WordPress Plugins completely with Shortcode

We influence 20 million users and is the number one business and technology news network on the planet

Follow US

© 2023 BlogBeast. All Rights Reserved.

Removed from reading list

Undo
Welcome Back!

Sign in to your account

Lost your password?