If You Want Adsense Approval for your blog Contact Us Adsense Ready theme Now!

How to Add Cookies Banner on Blogger Website

Hello friends, in this article, I will share with you the code to add a cookie dialog box to your Blog or Website.
How to Add Cookies Banner on Blogger Website
How to Add Cookies Banner on Blogger Website


 Add cookie usage notice for Blog/Website

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> //<![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>

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 date as set on me is 30 days.

Conclusion

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

About the Author

Hi Greetings! thanks for reaching here, We are so delighted to welcome you on board. Your intelligence and energy make you an asset to your family and love ones.

Post a Comment

Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
Oops!
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
Site is Blocked
Sorry! This site is not available in your country.