Customize Blogger Cookie Notice

By default, Blogger shows a simple cookie notice (mainly for EU visitors) to comply with privacy laws. The text and logic come from Google, so you can’t edit it from the Blogger interface. The good news: you can safely customize the look and labels with a bit of CSS and a tiny JavaScript config—keeping everything Adsense-safe and compliant.

  • Improve user experience with a banner that matches your theme.
  • Keep privacy transparency by linking your cookie policy.
  • Stay AdSense & GDPR friendly without external plugins.

Blogger injects a lightweight cookie notice for eligible regions (e.g., the EU). You can’t change its logic from the dashboard, but you can adjust its appearance with CSS and set button labels and links with a small cookieOptions object.

Step 1 — Add CSS (style & animation)

Go to Theme → Customize → Advanced → Add CSS and paste:

/* Normalize */
#cookieChoiceInfo,
#cookieChoiceInfo * { box-sizing: border-box }

/* Container */
#cookieChoiceInfo {
  padding: 1.5rem;
  inset: auto 0 0;
  line-height: 1.55;
  background-color: rgba(0, 0, 0, 0.9);
  transform: translateY(200%);
  animation: cookieSlide 0.9s ease forwards;
  z-index: 9999; /* keep above footer */
}

/* Inner wrapper */
#cookieChoiceInfo .cookie-choices-inner {
  font-size: 1rem;
  color: #fff;
  display: flex;
  gap: 0.75rem;
  align-items: center;
  flex-wrap: wrap;
}

/* Text */
#cookieChoiceInfo .cookie-choices-text {
  margin: 0;
  display: inline;
}

/* Buttons */
#cookieChoiceInfo .cookie-choices-button {
  text-transform: none;
  font-weight: 600;
  margin: 0;
  padding: 0.55rem 0.9rem;
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,0.25);
  background: transparent;
  color: #fff;
  cursor: pointer;
}

/* Primary hover/focus */
#cookieChoiceInfo .cookie-choices-button:hover,
#cookieChoiceInfo .cookie-choices-button:focus {
  color: #2196f3;
  outline: 2px solid #2196f3;
  outline-offset: 2px;
}

/* Reduce motion (pref) */
@media (prefers-reduced-motion: reduce) {
  #cookieChoiceInfo { animation: none; transform: none; }
}

/* Slide up */
@keyframes cookieSlide {
  to { transform: translateY(0) }
}

Tip: You can edit paddings, colors, radius, and font size to better match your theme.

Step 2 — Customize labels (JavaScript)

Go to Theme → Edit HTML, search for </head>, and paste the snippet right above it:

<script>
//<![CDATA[
/**
 * Blogger cookie banner: label/link customization
 * Keep text clear and link to a public cookie/privacy page.
 * Do NOT override or block consent logic.
 */
window.cookieOptions = {
  msg: "We use cookies to analyze traffic and improve your experience.",
  close: "Accept",
  learn: "Learn more",
  link: "/p/cookie-policy.html" // Replace with your cookie/cookie-policy page
};
//]]>
</script>
  • msg — Your short, honest disclosure.
  • close — Button label (e.g., “Accept”).
  • learn — Link label.
  • link — URL of your cookie or privacy policy page.

Important: Keep the message transparent and relevant to your data practices. Don’t hide or minimize the notice.

Step 3 — Preview the banner anywhere

The banner usually shows for EU visitors. To preview it from other locations, append a country hint to your URL, e.g.:

https://yourblog.blogspot.com/?gl=fr

Reload the page and you should see the notice at the bottom.

Best practices & compliance

  • Be transparent: clearly state why cookies are used and link to a policy page.
  • Keep it visible: don’t hide the banner behind other UI elements.
  • Avoid intrusive tricks: no misleading labels or deceptive design.
  • Respect user choice: don’t block essential content; don’t break consent flow.
  • Stay consistent: the banner style should match your theme for trust.

Accessibility tips

  • Keyboard focus: our CSS adds a clear outline on focus. Keep it.
  • Readable contrast: white on dark background meets WCAG contrast goals.
  • Reduced motion: animation is disabled for users who prefer reduced motion.
  • Button labels: keep short, descriptive labels like “Accept” and “Learn more”.

Advanced style tweaks (optional)

Place the banner at the top

#cookieChoiceInfo { inset: 0 0 auto; }

Brand colors (example)

#cookieChoiceInfo { background-color: #111827; }
#cookieChoiceInfo .cookie-choices-button:hover,
#cookieChoiceInfo .cookie-choices-button:focus { color: #10b981; outline-color: #10b981; }

Compact mode

#cookieChoiceInfo { padding: 1rem; }
#cookieChoiceInfo .cookie-choices-inner { font-size: 0.95rem; gap: 0.5rem; }

FAQ

Can I fully change the cookie logic?

No. The banner is provided by Google for eligible regions. You’re customizing appearance and labels, not core behavior.

Is this Adsense-friendly?

Yes—this approach is transparent, avoids deceptive UX, keeps consent intact, and links to a public policy page.

What should my cookie message say?

Keep it short and honest—mention analytics/ads if used, and link to a cookie/privacy policy explaining details.

Where do I put my cookie policy?

Create a static page (e.g., /p/cookie-policy.html) and link it in cookieOptions.link.

The banner doesn’t show. Why?

It’s region-specific. Use ?gl=fr (or another EU code) to preview outside supported countries. Also check ad/script blockers.