Cómo poner el aviso de uso de cookies en tu sitio

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!

aviso de uso de cookies

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(&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>

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

mensaje de aviso de uso 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

caja de 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

¿Te gusto el post?
¡Compártelo!
Gabriela Laya

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"