Cómo poner el aviso de cookies en Blogger 2025

El aviso de cookies es un componente esencial en la mayoría de los sitios web en la actualidad. No solo cumple con regulaciones legales en muchas regiones del mundo, sino que también desempeña un papel crucial para garantizar la transparencia y privacidad en la recopilación de datos de los visitantes del sitio.

Además, si deseas monetizar tu blog con Google AdSense, necesitas implementar un aviso de cookies que informe a los usuarios sobre la recopilación de datos. Por eso hoy te mostraré cómo añadirlo en tu blog.

Cómo colocar el aviso de cookies en Blogger

Los códigos HTML, JavaScript y CSS proporcionados en este artículo te permitirán crear un aviso de cookies personalizado, pero antes debes seguir estos pasos:

Paso 1: Agregar el HTML

Este código define la estructura del aviso de cookies y lo coloca en la parte inferior de tu sitio. Debes copiarlo y pegarlo debajo de la etiqueta <body Recuerda colocar la URL de la página de Cookies donde está el #

<div class='cookie-container'>
<div class='cookie-content'>
Para mejorar tu experiencia de usuario, estamos utilizando cookies que nos ayudan a saber tus preferencias.
<div class='buttons'>
<button class='item'>Permitir</button>
<a class='item' href='#' target='_blank'>¿Quieres saber más?</a>
</div> 
</div> 
</div>

Paso 2: Agregar el CSS

Luego, utiliza el siguiente código CSS para dar estilo al aviso de cookies. Debes buscar la etiqueta ]]></b:skin> y pegar el código arriba.

/* Estilos del Aviso de Cookies */
:root{
  --color-fondo-aviso: #000000;               
  --color-del-parrafo: #ffffff;              
  --tamano-parrafo: 16px;                   
  --color-boton-aceptar: #b51200;        
  --color-texto-boton-aceptar: #ffffff;      
  --color-texto-leer-mas: #ffffff;         
}
.cookie-container{position:fixed;bottom:-100%;left:0;right:0;z-index:999999999999999;transition:400ms;background:var(--color-fondo-aviso);padding:15px;box-shadow:1px 7px 14px -5px rgba(0,0,0,.15);text-align:center;font-size:var(--tamano-parrafo)}
.cookie-content{color:var(--color-del-parrafo)}
.cookie-container.active{bottom:0}
.cookie-content .buttons{display:inline-flex;align-items:center;justify-content:center}
.cookie-content .buttons button{padding:10px 15px;border:none;outline:0;color:var(--color-texto-boton-aceptar);font-size:16px;font-weight:500;border-radius:5px;background:var(--color-boton-aceptar);cursor:pointer;transition:all .3s ease}
.cookie-content .buttons button:hover{transform:scale(0.97)}
.buttons .item{margin:0 10px}
.cookie-content .buttons a{color:var(--color-texto-leer-mas);font-weight:700}
/* Fin Estilos del Aviso de Cookies */

Paso 3: Agregar el JavaScript

Finalmente, incluye el siguiente código JavaScript para hacer que el aviso de cookies sea funcional. Este código debes pegarlo arriba de la etiqueta </body>

<script>
const cookieContainer = document.querySelector(&quot;.cookie-container&quot;);
const cookieButton = document.querySelector(&quot;.buttons .item&quot;);
cookieButton.addEventListener(&quot;click&quot;, () =&gt; {
cookieContainer.classList.remove(&quot;active&quot;);
localStorage.setItem(&quot;cookieBannerDisplayed&quot;, &quot;true&quot;);
});
setTimeout(() =&gt; {
if (!localStorage.getItem(&quot;cookieBannerDisplayed&quot;)) {
cookieContainer.classList.add(&quot;active&quot;);
}
}, 2000);
</script>