EU Cookie Law : Code Snippets for Blogger Theme

When you have a blog on Blogger with a custom theme there are few things you have to take care of which include supressing the grey Blogger banner and then 

Code Snippet 1: Custom UK Cookie Consent Popup

Purpose: Shows a cookie consent popup on the left side, appears every 7 days, this visually looks like this:

Add this code as a HTML widget from the layout menu, do not give the code a title and use this code:

<!-- UK Cookie Consent Popup -->
<div id="customCookieConsent" style="display:none;">
  <style>
    #customCookieConsent {
      position: fixed;
      bottom: 20px;
      left: 20px;
      background: #2c3e50;
      color: white;
      padding: 20px;
      border-radius: 10px;
      box-shadow: 0 4px 12px rgba(0,0,0,0.3);
      z-index: 99999;
      max-width: 350px;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
      animation: slideInLeft 0.5s ease;
    }
    
    @keyframes slideInLeft {
      from {
        transform: translateX(-100%);
        opacity: 0;
      }
      to {
        transform: translateX(0);
        opacity: 1;
      }
    }
    
    #customCookieConsent h3 {
      margin: 0 0 10px 0;
      font-size: 18px;
      font-weight: 600;
    }
    
    #customCookieConsent p {
      margin: 0 0 15px 0;
      font-size: 14px;
      line-height: 1.5;
      color: #ecf0f1;
    }
    
    #customCookieConsent .cookie-buttons {
      display: flex;
      gap: 10px;
    }
    
    #customCookieConsent button {
      padding: 10px 20px;
      border: none;
      border-radius: 5px;
      font-size: 14px;
      font-weight: 500;
      cursor: pointer;
      transition: all 0.3s ease;
    }
    
    #customCookieConsent .allow-btn {
      background: #27ae60;
      color: white;
      flex: 1;
    }
    
    #customCookieConsent .allow-btn:hover {
      background: #229954;
      transform: translateY(-2px);
    }
    
    #customCookieConsent .deny-btn {
      background: #95a5a6;
      color: white;
      flex: 1;
    }
    
    #customCookieConsent .deny-btn:hover {
      background: #7f8c8d;
      transform: translateY(-2px);
    }
    
    #customCookieConsent .cookie-icon {
      font-size: 24px;
      margin-bottom: 10px;
    }
    
    @media (max-width: 480px) {
      #customCookieConsent {
        left: 10px;
        right: 10px;
        max-width: none;
      }
    }
  </style>
  
  <div class="cookie-icon">🍪</div>
  <h3>Cookie Consent</h3>
  <p>This website uses cookies to ensure you get the best experience on our website. By continuing to use this site, you agree to our use of cookies in accordance with our privacy policy.</p>
  <div class="cookie-buttons">
    <button class="allow-btn" onclick="acceptCookies()">Accept</button>
    <button class="deny-btn" onclick="denyCookies()">Decline</button>
  </div>
</div>

<script type="text/javascript">
//<![CDATA[
// UK Cookie Consent Logic
(function() {
  // Check if consent has been given
  function getCookie(name) {
    var nameEQ = name + "=";
    var ca = document.cookie.split(';');
    for(var i = 0; i < ca.length; i++) {
      var c = ca[i];
      while (c.charAt(0) == ' ') c = c.substring(1, c.length);
      if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
    }
    return null;
  }
  
  // Set cookie with expiry
  function setCookie(name, value, days) {
    var expires = "";
    if (days) {
      var date = new Date();
      date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
      expires = "; expires=" + date.toUTCString();
    }
    document.cookie = name + "=" + (value || "") + expires + "; path=/; SameSite=Lax";
  }
  
  // Check if we should show the popup
  var cookieConsent = getCookie('ukCookieConsent');
  var consentTime = getCookie('ukCookieConsentTime');
  
  if (!cookieConsent) {
    // No consent given yet, show popup
    setTimeout(function() {
      document.getElementById('customCookieConsent').style.display = 'block';
    }, 1000); // Show after 1 second
  } else if (cookieConsent === 'accepted' && consentTime) {
    // Check if 7 days have passed
    var consentDate = new Date(parseInt(consentTime));
    var now = new Date();
    var daysPassed = Math.floor((now - consentDate) / (1000 * 60 * 60 * 24));
    
    if (daysPassed >= 7) {
      // 7 days have passed, show popup again
      setTimeout(function() {
        document.getElementById('customCookieConsent').style.display = 'block';
      }, 1000);
    }
  }
  
  // Accept cookies function
  window.acceptCookies = function() {
    setCookie('ukCookieConsent', 'accepted', 7);
    setCookie('ukCookieConsentTime', new Date().getTime(), 7);
    document.getElementById('customCookieConsent').style.display = 'none';
    
    // Optional: Enable Google Analytics or other tracking here
    // if (typeof gtag !== 'undefined') {
    //   gtag('consent', 'update', {
    //     'analytics_storage': 'granted'
    //   });
    // }
  };
  
  // Deny cookies function
  window.denyCookies = function() {
    // Set a session cookie to remember they denied (expires when browser closes)
    setCookie('ukCookieConsent', 'denied', 0);
    
    // Redirect to Denied
    window.location.href = 'https://nocookies.a6n.co.uk';
    
    // Optional: Disable tracking
    // if (typeof gtag !== 'undefined') {
    //   gtag('consent', 'update', {
    //     'analytics_storage': 'denied'
    //   });
    // }
  };
  
  // Also hide Blogger's default cookie banner if it appears
  var checkForBloggerBanner = setInterval(function() {
    var bloggerBanner = document.querySelector('.cookie-choices-info, #cookieChoiceInfo');
    if (bloggerBanner) {
      bloggerBanner.style.display = 'none';
      clearInterval(checkForBloggerBanner);
    }
  }, 100);
  
  // Stop checking after 5 seconds
  setTimeout(function() {
    clearInterval(checkForBloggerBanner);
  }, 5000);
})();
//]]>
</script>

Code Snippet 2: Hide Blogger Cookie Banner

Purpose: Hides the grey Blogger cookie consent banner that appears at the top like this:

Add this code in your theme's <head> section, right after the opening <style> tag:

/* Block Google Grey Banner Analytics */
#cookieChoiceInfo {
  display: none !important;
}

Installation Instructions:

For Code Snippet 1 (Cookie Consent Popup):

1. Go to Layout
2. Add HTML Widget
3. Do not add a title and use that code
4. Save the widget

For Code Snippet 2 (Hide Blogger Banner):

1. Go to Theme → Edit HTML
2. Find the </body> tag (at the very bottom)
3. Paste the entire code block right before </body>
4. Save the theme

Customization Options:

To change the popup position:

• For bottom-right: Change left: 20px; to right: 20px;
• For top-left: Change bottom: 20px; to top: 20px;

To change the redirect URL:

• Find window.location.href = 'https://nocookies.a6n.co.uk';
• Replace with your preferred URL

To change the days before showing again:

• Find if (daysPassed >= 7) and change 7 to your preferred number
• Also change setCookie('ukCookieConsent', 'accepted', 7); to match

To change colors:

• Background: Change #2c3e50 in the CSS
• Accept button: Change #27ae60
• Decline button: Change #95a5a6

Legal Compliance Note:

This popup meets UK GDPR requirements by:

• Giving clear choice (Accept/Decline)
• Not setting cookies before consent
• Allowing users to decline
• Being non-intrusive
• Respecting user choice for 7 days

You may want to add a link to your privacy policy in the popup text then you can do, but most people will Accept without reading.