Te explico cómo agregar un aviso de uso de cookies en tu sitio de WordPress o Blogger. Podrás instalarlo y personalizarlo de forma sencilla.
Hola, soy Gabriela de peengler.com. Anteriormente explique en esta entrada: Cómo poner el Aviso de Cookies en el Blog una forma de agregar el banner de cookies en tu sitio, pero debo admitir que suele mostrar algunas fallas y no funciona del todo bien.
Pero en esta ocasión voy a compartir contigo 2 ejemplos de mensajes de cookies, el primero es un banner y el segundo es una caja. Y ambos funcionan de maravilla.
Sin más que decir ¡Empecemos!
Clic en la imagen para ver el vídeo ↑ en YouTube
Mensaje de cookies con HTML
Necesitaras mostrar el aviso de uso de cookies con el HTML, es por eso que vas agregar debajo de <body> lo siguiente:
<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>
Script para el mensaje de cookies
Con esto vas hacer que funcione correctamente el aviso de uso de cookies. Para eso busca </body> y arriba de este, pegas el siguiente código:
<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>
Estilos para el aviso de uso de cookies
Ahora para que el aviso se vea bonito, vas agregar los estilos/css. Si usas Blogger busca ]]></b:skin> y arriba de este, pega el estilo que más te guste.
Poner el banner de cookies
Si quieres agregar un banner/aviso en la parte inferior de tu sitio. Entonces agrega los siguientes estilos:
/* ESTILOS DEL AVISO DE COOKIES | GABRIELA PEENGLER*/
:root{
--color-fondo-aviso: #fff;
--color-del-parrafo: #000;
--tamano-parrafo: 16px;
--color-boton-aceptar: #00748e;
--color-texto-boton-aceptar: #fff;
--color-texto-leer-mas: #00748e;
}
.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 | GABRIELA PEENGLER*/
Caja del aviso de uso de cookies
Si deseas añadir una caja en la parte inferior izquierdo de tu página web/blog. Entonces agrega los siguientes estilos:
/*ESTILOS DEL AVISO DE COOKIES | GABRIELA PEENGLER*/
:root{
--color-fondo-aviso: #fff;
--color-del-parrafo: #000;
--tamano-parrafo: 16px;
--color-boton-aceptar: #00748e;
--color-texto-boton-aceptar: #fff;
--color-texto-leer-mas: #00748e;
--ancho-aviso: 320px;
--margen-izquierdo: 15px;
--margen-abajo:10px;
}
.cookie-container{position:fixed;bottom:-100%;z-index:999999999999999;transition:400ms;font-size:var(--tamano-parrafo);left:var(--margen-izquierdo);max-width:var(--ancho-aviso);background:var(--color-fondo-aviso);padding:20px;border-radius:15px;box-shadow:1px 7px 14px -5px rgba(0,0,0,.15);text-align:center}
.cookie-content{text-align:left;color:var(--color-del-parrafo)}
.cookie-container.active{bottom:var(--margen-abajo)}
.cookie-content .buttons{display:flex;align-items:center;justify-content:center;padding:10px 0 0}
.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 | GABRIELA PEENGLER*/
Conclusión
Espero que te funcione de maravilla el aviso. Recuerda que solo estas colocando el aviso, más no estás aplicando la verdadera función de las cookies. Para eso contáctate con algún programador que sepa acerca de las cookies.
Cualquier duda o pregunta, déjalo en los comentarios
Sígueme en Youtube🔥
Aprende a crear páginas web con HTML, CSS y Javascript.
☑ Puede que también te interese:
Gabriela Laya
Me gusta todo lo relacionadaoa la creación de sitios web ya sea, usando código "HTML, CSS y JS" o usando un constructor "Elementor"