
telepliz oficial
Delta
Verificación en dos pasos activada
Verificado por Whatsapp
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
Agregue este Codigo de aviso de cookiesPerfecto, espero que funcione bien. No dudes en volver si tienes más preguntas. ¡Buenas noches!
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 #
Insertar CODE, HTML o PHP:
<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.
CSS:
/* 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>
JavaScript:
<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>
Todo salió perfecto el aviso si funciona