Personalizar aviso de cookies de Blogger (RGPD)

Personalizar el aviso de cookies de Blogger fácilmente Personalizar el aviso de cookies de Blogger fácilmente

Demostración

Debido a las leyes de la Unión Europea, Blogger implementó el aviso de cookies y este se muestra cuando el blog es visitado desde un país que este afectada por esta ley. En esta entrada vamos a aprender a modificarlo para darle un mejor aspecto, o simplemente para modificar los mensajes para que sean los adecuados.


Cookies RGPD

Debido a el nuevo Reglamento General de Protección de Datos. Blogger actualizó nuevamente el mensaje que muestra el aviso, de tal manera que se adapte legalmente a lo exigido por la Unión Europea. Todos los usuarios de blogger se habrán encontrado con el siguiente mensaje:


Las leyes de la Unión Europea exigen que le brindes información sobre las cookies que se utilizan y los datos que se recopilan en las visitas a tu blog. En muchos casos, también exigen que obtengas consentimiento.

Como cortesía, agregamos un aviso en tu blog para explicar el modo en que Google usa determinadas cookies de Blogger y Google, incluido el uso de cookies de Google Analytics y AdSense, y de otros datos que recopila Google.

Tú tienes la responsabilidad de comprobar que este aviso sea adecuado para tu blog y que se muestre allí. Si usas otras cookies, por ejemplo, si agregaste funciones de terceros, este aviso podría no ser adecuado para tu blog. Si incorporaste funcionalidades de otros proveedores, es posible que se recopile información adicional de tus usuarios.

Obtén más información sobre este aviso y tus responsabilidades. Captura del mensaje

Esto no quiere decir que el mensaje sea suficiente, es tu deber que el mensaje sea el adecuado o proporcionar una mejor opción (en caso de desactivar el de Blogger) para que tu blog cumpla con el RGPD. Bajo mi opinión personal, recomiendo usar la versión nativa de Blogger.


Personalizar estilos

Ve a Temas y da clic al botón "Personalizar", para abrir el diseñador de plantillas de blogger, ahora dirígete a opciones avanzadas y Agregar CSS personalizado, allí pega el siguiente código:


/*!
* Custom Style: Cookie-Choices v1.0.1
* by zkreations
*/
/*Reset cookie-choices.css*/
body .cookie-choices-info,
body .cookie-choices-info .cookie-choices-button,
body .cookie-choices-info .cookie-choices-buttons,
body .cookie-choices-info .cookie-choices-inner,
body .cookie-choices-info .cookie-choices-text{
    position:initial;margin:initial;
    left:initial;right:initial;bottom:initial;width:initial;
    top:initial;color:initial;padding:initial;background:initial;
    text-transform: initial;font-size: initial;max-width: initial;text-align: center;
}
/*Animacion*/
@-webkit-keyframes cookies {
    from {-webkit-transform:translateY(10em);transform:translateY(10em);}
    to {-webkit-transform:translateY(0em);transform:translateY(0em);}
}
@keyframes cookies {
    from {-webkit-transform:translateY(10em);transform:translateY(10em);}
    to {-webkit-transform:translateY(0em);transform:translateY(0em);}
}
/*Contenedor principal*/
body .cookie-choices-info {
    position: fixed;
    bottom: 0;left: 0;right: 0;
    font-size: 14px; /*tamaño de la fuente del aviso*/
    -webkit-animation: cookies 1s backwards;
            animation: cookies 1s backwards;
}
body .cookie-choices-info .cookie-choices-inner {
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}
body .cookie-choices-info .cookie-choices-buttons {
    padding-top: 1em;
}
/*Contenedor del texto y botones*/
body .cookie-choices-info .cookie-choices-inner {
    padding: 1.5em; /*Relleno*/
    background: #263238; /*Color del fondo*/
}
/*Texto*/
body .cookie-choices-info .cookie-choices-text {
    color: #fff; /*Color del texto*/
    padding: 0 1em;
}
/*Botones*/
body .cookie-choices-info .cookie-choices-button {
    color: #fff; /*Color del texto de los botones*/
    margin-left: .5em;
    padding: .8em 1em; /*Relleno de los botones*/
    display: inline-block;
    background: rgba(0, 0, 0, 0.5); /*Color de fondo de los botones*/
    border-radius: 3px;
    font-size: .9em;
    -webkit-transition:background .3s;
    transition: background .3s;
}
/*Hover => botones*/
body .cookie-choices-info .cookie-choices-button:hover {
    background: rgba(0, 0, 0, 0.75); /*Color de hover de los botones*/
}

El código anterior resetea las propiedades css que agrega el aviso de Blogger a sus valores iniciales. Luego procedo a darle estilos nuevos siguiendo la ley de herencia por cascada de css.


Estilo Banner flotante

Si prefieres que el aviso se muestre como un banner flotante en la esquina inferior derecha, simplemente agrega este codigo más abajo del anterior:


/*Contenedor principal*/
body .cookie-choices-info {
    bottom: 1em; /*Separacion inferior*/
    right: 1em; /*Separacion derecha*/
    left: auto;
}
body .cookie-choices-info .cookie-choices-text {
    display: block;
    text-align: center;
    padding-bottom: 1rem; 
}
/*Contenedor del texto y botones*/
body .cookie-choices-info .cookie-choices-inner {
    max-width: 400px;
}

Estilos propios

Si lo que buscabas era borrar todos los estilos del aviso para que puedas escribir los tuyos, entonces ignora todo el código anterior y utiliza el siguiente:


/*!
* Custom Style: Cookie-Choices
* by zkreations
*/
/*Reset cookie-choices.css*/
body .cookie-choices-info,
body .cookie-choices-info .cookie-choices-button,
body .cookie-choices-info .cookie-choices-buttons,
body .cookie-choices-info .cookie-choices-inner,
body .cookie-choices-info .cookie-choices-text{
    position:initial;margin:initial;
    left:initial;right:initial;bottom:initial;width:initial;
    top:initial;color:initial;padding:initial;background:initial;
    text-transform: initial;font-size: initial;
}
/*Contenedor principal*/
body .cookie-choices-info {

}
/*Contenedor del texto y botones*/
body .cookie-choices-info .cookie-choices-inner {

}
/*Texto*/
body .cookie-choices-info .cookie-choices-text {

}
/*Contenedor de botones*/
body .cookie-choices-info .cookie-choices-buttons {
    
}
/*Botones*/
body .cookie-choices-info .cookie-choices-button {

}
/*Hover => botones*/
body .cookie-choices-info .cookie-choices-button:hover {

}

Además de resetear los estilos, también te proporcioné las clases por separado para que puedas agregar tus propios estilos al aviso, claro está que esto es para personas con conocimientos de css.


Cambiar la información

En este caso lo que haremos es cambiar los textos y los enlaces por otros, para ello ve a Temas, presiona el botón "Editar HTML", copia el siguiente codigo y pegalo debajo de <head>:


<script>//<![CDATA[
cookieOptions = {
 msg: "Texto legal", //El mensaje del aviso
 learn: "Texto leer más", //El texto del botón "Más información"
 close: "Texto para aceptar", //El texto del botón "Aceptar"
 link: "https://politica-de-cookies.com", //Url de la pagina para saber sobre tus cookies
};//]]></script>

Dominio personalizado

Si tienes un dominio Personalizado, el aviso solo aparecerá para los usuarios de países residentes afectados por esta ley. Si deseas hacer pruebas, utiliza plugins como Hola VPN para chrome, que te permiten navegar desde otra localidad, la clave está en elegir un país dentro de Europa:


Hola VPN

Deshabilitar el aviso

No hay forma segura de eliminar el código que inserta Blogger y si evitamos que cargue mediante un "hack" en el cierre del body, nos impide utilizar gadgets que requieran widget.js. Lo que sí podemos hacer es evitar que se muestre, para ello agrega el siguiente código debajo de <head>:


<script>cookieChoices = {};</script>

Con el fin de facilitar la comprensión, he dejado comentarios en todo el código que los guiara para personalizar del aviso de cookies de Blogger. Si esta entrada te ha servido no olvides compartirla con tus amigos en las redes sociales, lo agradeceria mucho.

Quizás te interese