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 mostrare como 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 pagina de Cookies donde esta el #
<div class='cookie-container'>
<div class='cookie-content'>
Este sitio utiliza cookies para mejorar tu experiencia. Asumiré que estás de acuerdo con esto.
<div class='buttons'>
<button class='item'>Acepto</button>
<a class='item' href='#' target='_blank'>Leer 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: #fff; /* Color de fondo del aviso de cookies */
--color-del-parrafo: #000; /* Color del texto del aviso de cookies */
--tamano-parrafo: 16px; /* Tamaño de fuente del texto del aviso de cookies */
--color-boton-aceptar: #f57c00; /* Color de fondo del botón "Acepto" en el aviso de cookies */
--color-texto-boton-aceptar: #fff; /* Color del texto del botón "Acepto" en el aviso de cookies */
--color-texto-leer-mas: #f57c00; /* Color del texto del enlace "Leer más" en el aviso de cookies */
}
.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 codgo debes pegarlo arriba de la etiqueta </body>
<script>
const cookieContainer = document.querySelector(".cookie-container");
const cookieButton = document.querySelector(".buttons .item");
cookieButton.addEventListener("click", () => {
cookieContainer.classList.remove("active");
localStorage.setItem("cookieBannerDisplayed", "true");
});
setTimeout(() => {
if (!localStorage.getItem("cookieBannerDisplayed")) {
cookieContainer.classList.add("active");
}
}, 2000);
</script>
Paso 4: Personaliza los colores de tu Aviso de Cookies
Haz clic en el color que te guste para copiar su código hexadecimal y utilízalo para personalizar los estilos de tu aviso de cookies.
Si aun no lograr poner a funcionar tu aviso de cookies en Blogger no pasa nada, solo mira el siguiente video y trata de seguir una a una las indicaciones
