Para poner el mensaje de cookies con html, se agrega debajo del <Body> el seguinte código:
<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>
<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
Antes del cierre del </Body> copias e pegas el seguiente script:
<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>
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
Vas a TEMA despues editas el tema en HTML y cuando tengas el código abierto busca la seguinte etiqueta: ]]></b:skin> antes de esta etiqueta tienes que agregar el estilo que mejor te convenga
Poner el banner de cookies
Para Poner un banner como lo que ves, al final de tu post, agrega los seguintes estilos:
: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}
--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}
Caja del aviso de uso de cookies
Si prefieres usar una caja en la parte inferior esquierda de tu blog, entonces usa los seguintess estilos
: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}
--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}
0 Comentarios
Si desea contactar comigo, lo puede hacer atravez deste formulario gracias