Aviso de Cookies 2024

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, Recuerda colocar la URL de la pagina de Cookies donde esta el href='#'

CODIGO HTML

<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.

CODIGO 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 código 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>

REALIZADO POR: MONETIZA CON ABRAHAN 2023

ORIGEN DE LA ENTRADA: www.monetizaconabrahan.es