Personalizar aviso de cookies de Blogger fácilmente (RGPD)

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

Demostración

Debido a la ley de cookies Europea, Blogger implementó el aviso de cookies y este se muestra cuando el blog es visitado desde un país que se rige por esta norma. En esta entrada vamos a aprender a modificarlo.


Reemplazar 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
* 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;
}
/*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;
}
/*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 proporciona 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: "Usamos cookies para evitar que Disney nos compre", //El mensaje del aviso
 learn: "Saber más", //El texto del botón "Más información"
 close: "Estoy de acuerdo", //El texto del botón "Aceptar"
 link: "https://enlace-informacion.com", //Url de la pagina para saber sobre tus cookies
};//]]></script>

Dominio personalizado

Si tienes un dominio Personalizado (tipo tu-pagina.com) es probable que no veas el aviso por ningún lado, si deseas utilizarlo simplemente agrega el siguiente código arriba de </body>


<script defer='' src='/js/cookiechoices.js'/>
<script>//<![CDATA[
document.addEventListener('DOMContentLoaded', function(event) {
   window.cookieChoices && cookieChoices.showCookieConsentBar && cookieChoices.showCookieConsentBar(
      (window.cookieOptions && cookieOptions.msg) || 'Este sitio usa cookies de Google para brindar sus servicios, personalizar anuncios y analizar el tr\xe1fico. La informaci\xf3n sobre tu uso del sitio se comparte con Google. Al utilizar este sitio, aceptas el uso de cookies.',
      (window.cookieOptions && cookieOptions.close) || 'Entendido',
      (window.cookieOptions && cookieOptions.learn) || 'Saber mas',
      (window.cookieOptions && cookieOptions.link) || 'https://www.blogger.com/go/blogspot-cookies');
});//]]></script>

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.