Cómo agregar un banner de consentimiento de cookies en Blogger

Al navegar por Internet, probablemente se haya topado con un banner de consentimiento de cookies que le pide que acepte o rechace las cookies. Estos banners se han convertido en una característica estándar en los sitios web debido a la creciente preocupación por la privacidad de los datos y el seguimiento en línea.

Si es un bloguero que usa Blogger, es esencial agregar un banner de consentimiento de cookies a su sitio para garantizar el cumplimiento de regulaciones como el Reglamento general de protección de datos (GDPR) y la Ley de privacidad del consumidor de California (CCPA).

¿Qué es un banner de consentimiento de cookies ?

Un banner de consentimiento de cookies es una ventana emergente o banner que aparece en un sitio web, informando a los usuarios sobre el uso de cookies y solicitando su consentimiento para almacenar o acceder a su información.

Las cookies son pequeños archivos de texto que se colocan en el dispositivo de un usuario cuando visita un sitio web. Se utilizan para recordar las preferencias del usuario, rastrear la actividad del sitio web y brindar una experiencia más personalizada. Sin embargo, las cookies también se pueden utilizar para publicidad dirigida o seguimiento, por lo que se debe informar a los usuarios y darles la opción de aceptarlas o rechazarlas.

Agregar un banner de consentimiento de cookies a su sitio de Blogger es un proceso relativamente simple que se puede completar en unos pocos pasos. En las siguientes secciones, describiremos los pasos para agregar un banner de consentimiento de cookies en Blogger.

Cómo agregar un banner de consentimiento de cookies en Blogger

Para agregar un banner o ventana emergente de consentimiento de cookies en Blogger, siga los pasos a continuación.

1. Abre tu panel de control de Blogger y ve a la sección de temas.
2. Ahora haga clic en la sección editar HTML del menú desplegable justo al lado derecho del botón personalizar.
3. Ahora busque la etiqueta del cuerpo de cierre (</body) que generalmente es la segunda última línea del código de su tema.
4. Ahora pegue el código proporcionado justo encima y guárdelo para agregar el banner de consentimiento de cookies a su sitio web de Blogger.

 <div class='cookie-box'> <div class='cookie-row'> <div class='cookie-img'><svg viewBox='0 0 97.93 97.93' xmlns='http://www.w3.org/2000/svg'><path d='M44,23.76a2.47,2.47,0,1,0,.91,3.37A2.47,2.47,0,0,0,44,23.76Z'></path><path d='M25.9,40.32a2.47,2.47,0,0,0,0,4.93h0a2.47,2.47,0,1,0,0-4.93Z'></path><circle cx='32.08' cy='65.86' r='2.47'></circle><path d='M56.38,69.91a2.47,2.47,0,1,0,1.14,1.49A2.47,2.47,0,0,0,56.38,69.91Z'></path><path d='M72,52.68a2.47,2.47,0,0,0-2.38,1.83,2.44,2.44,0,0,0,.25,1.87,2.47,2.47,0,0,0,4.52-.59,2.44,2.44,0,0,0-.25-1.87A2.47,2.47,0,0,0,72,52.68Z'></path><path d='M89.51,52.86A14,14,0,0,1,81,47.2,14.09,14.09,0,0,1,61,35.68,14.09,14.09,0,0,1,49.49,15.73a14,14,0,0,1-5.66-8.55,44,44,0,0,0-21.09,6.15A44.26,44.26,0,0,0,71.46,87.08,44.24,44.24,0,0,0,89.51,52.86ZM28.28,43.42a2.47,2.47,0,0,1-2.38,1.83h0a2.47,2.47,0,1,1,2.38-1.83Zm3.8,24.9a2.47,2.47,0,1,1,2.47-2.47A2.47,2.47,0,0,1,32.08,68.32ZM44.92,27.13A2.47,2.47,0,1,1,44,23.76,2.47,2.47,0,0,1,44.92,27.13ZM57.28,73.27a2.47,2.47,0,1,1-.9-3.36,2.47,2.47,0,0,1,.9,3.36ZM74.42,55.79a2.47,2.47,0,1,1-.25-1.87A2.45,2.45,0,0,1,74.42,55.79Z' fill='#7577a9'></path><path d='M97.93,48.52v-.2A2.35,2.35,0,0,0,95.7,46a9.37,9.37,0,0,1-8-5.45,2.35,2.35,0,0,0-3.49-.93,9.51,9.51,0,0,1-5.44,1.72A9.4,9.4,0,0,1,69.39,31.1a2.35,2.35,0,0,0-2.55-2.55c-.28,0-.57,0-.85,0a9.39,9.39,0,0,1-7.68-14.81,2.35,2.35,0,0,0-.93-3.49,9.37,9.37,0,0,1-5.45-8A2.35,2.35,0,0,0,49.61,0H49a49,49,0,1,0,49,49C97.93,48.82,97.93,48.67,97.93,48.52ZM71.46,87.08A44.26,44.26,0,0,1,22.74,13.33,44,44,0,0,1,47.53,4.72a14,14,0,0,0,5.66,8.55A14.09,14.09,0,0,0,64.71,33.22,14.09,14.09,0,0,0,84.66,44.75a14,14,0,0,0,8.56,5.66A44.3,44.3,0,0,1,71.46,87.08Z'></path></svg></div> <div class='cookie-content'> <p>Our website uses cookies to improve your experience. <a href='https://policies.google.com/technologies/cookies' target='_blank' title='Learn more'>Learn more</a></p> <button class='cookie-buttons'>Accept!</button> </div> </div> </div> <style> .cookie-box.hide{display:none} .cookie-box { position: fixed; width: 90%; margin: 20px; max-width: 400px; min-height: 100px; background-color: #ffffff; box-shadow: 25px 12px 25px 12px rgb(30 30 30 / 4%); z-index: 990; border: 2px solid lightgrey; border-radius: 6px; bottom: 15px; right: 0px; padding: 15px; } .cookie-row { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; text-align: left; align-content: center; justify-content: center; align-items: center; } .cookie-img{padding-right:20px} .cookie-img svg{fill:#333;width:60px;height: 60px;} .cookie-content p { position: relative; width: 100%; display: inline-block; font-size: 15px; color: #666666; margin-top: 0!important; } .cookie-content pa{text-decoration:underline;} .cookie-buttons { position: relative; width: 100%; margin-top: 10px; float: left; background-color: #7577a9; font-family: inherit; font-size: 14px; color: #ffffff; text-decoration: none; opacity: 1; border: none; cursor: pointer; font-weight: 500; padding: 5px; border-bottom: 2px solid rgba(0,0,0,0.1); border-radius: 6px; } </style> <script>//<![CDATA[ cookieChoices = {}; const cookieBox = document.querySelector(".cookie-box"), acceptBtn = cookieBox.querySelector("button"); acceptBtn.onclick = ()=>{ document.cookie = "CookieByKey2Blogging; max-age="+60*60*24*30; if(document.cookie){ cookieBox.classList.add("hide"); }else{ alert("Cookie can't be set! Please unblock this site from the cookie setting of your browser."); } } let checkCookie = document.cookie.indexOf("CookieByKey2Blogging"); checkCookie != -1 ? cookieBox.classList.add("hide") : cookieBox.classList.remove("hide"); //]]></script>

Este código eliminará la notificación de cookies predeterminada de Blogger y agregará un banner de consentimiento de cookies personalizado o puede decir una ventana emergente en su sitio web de Blogger.

Este código está completamente optimizado y utiliza códigos SVG para que no tenga que preocuparse por la velocidad del sitio en el sitio web de Blogger.

En conclusión, agregar un banner de consentimiento de cookies a su sitio de Blogger es esencial para garantizar el cumplimiento de las normas de privacidad de datos y brindar transparencia a sus usuarios.

Espero que este artículo lo ayude a agregar un widget de consentimiento de cookies personalizado a su sitio web de Blogger. Si tiene algún problema con este código, hágamelo saber en la sección de comentarios.

Por cierto, puedes contratarme para optimizar la velocidad de carga de tu Blogger. Consulta nuestra página de servicios para saber más.