martes, 2 de febrero de 2016

Aviso de cookies de Blogger: cómo cambiar su estilo

En esta entrada voy a compartir un pequeño tip estético que he añadido recientemente a mi blog: modificar el estilo del aviso de uso de cookies que muestra por defecto Blogger. En esta breve guía o tutorial explicaré cómo hacerlo sin mayores problemas, y los más avezados en diseño web podrán encontrar rápidamente las clases e identificadores (ID) implicados, para hacerlo por su cuenta.


Un ejemplo de personalización de estilos del aviso de cookies.


¿Está permitido modificar el estilo del aviso de empleo de cookies?


Empezaremos antes de nada tranquilizándonos respecto a esto, pues ya he preguntado en el foro oficial de ayuda de Blogger y no parece haber ningún problema. Como puede leerse en dicha consulta (link anterior), la obligación de mostrar un aviso sobre el empleo de cookies es algo que procede de la legislación europea, y en realidad no se indica ningún texto exacto que debamos poner (ni aspecto del mismo). Esto es así pues eso dependerá del uso que cada web haga de las cookies. En nuestro caso –el de los blogs de Blogger- deberíamos indicar que dichas cookies se usan para mostrar anuncios personalizados y analizar los datos en bruto del tráfico recibido (número de visitas, países de procedencia, etc…). Puede verse todo en la página oficial de Google sobre el tema.


En definitiva, que podríamos incluso quitar el rótulo que aparece por defecto y poner otro nuestro, aunque no lo recomiendo, pues dejando el oficial tendremos la ventaja de que será el propio Google el que ponga en cada momento el texto que considere más conveniente, olvidándonos nosotros de eso.


En cuanto al estilo o apariencia del rótulo, de lo anterior se desprende que es totalmente personalizable, y como el que aparece por defecto tiene un estilo muy “soso” (gris con letras muy sencillas), haremos bien en adornarlo un poco. Lo que yo recomiendo es usar los colores de nuestra plantilla para que el cartel encaje mejor en el diseño de nuestro blog. Un ejemplo puede verse en esta misma bitácora (le he puesto un color azul de fondo que es el mismo de los encabezados, y unos botones del color de los links).


Cómo modificar o editar el color del aviso de cookies.


Bien, pasemos a la parte práctica de este artículo. Como puede verse en este mismo blog, lo que yo he hecho es cambiar el color del rótulo, poner el texto en cursiva y las letras un poco más pequeñas (sin duda las que vienen por defecto están a un tamaño de cuerpo demasiado grande, 16px), así como añadir unos botones a los enlaces “Más información” y “Entendido”.


Esto se hace usando estilos CSS, como casi todo en diseño web, y aplicando dichos estilos directamente en la plantilla.


He identificado las clases e identificadores únicos (ID) cuyos estilos CSS habremos de modificar, y son los siguientes (copiaré directamente el código que tengo puesto yo en mi plantilla:


/* Estilos para aviso de cookies de Blogger por Santi Folch – Más info: http://www.comunicacion-multimedia.info/2016/02/aviso-de-cookies-de-blogger-como.html */

/* Color de fondo del aviso y espaciado */
#cookieChoiceInfo {background-color:#215670; padding:7px 0 10px;} 

/* Tamaño, color, margen y estilo del texto del aviso */
.cookie-choices-info .cookie-choices-text {font-size:13px !important; color:#ddd !important; font-style:italic; margin:7px 18px !important;} 

/* Para poner los enlaces como botones */
.cookie-choices-info .cookie-choices-button {padding:4px 6px !important; background-color:#8C536F; border-radius:3px; font-size:14px;} 

/* Color del primer enlace */
a.cookie-choices-button:nth-child(1) {color:#215670} 

/* Color del primer enlace al pasar el ratón */
a:hover.cookie-choices-button:nth-child(1) {color:#8C536F} 

/* Color del segundo enlace */
a#cookieChoiceDismiss {color:#215670} 

/* Color del segundo enlace al pasar el ratón */
a:hover#cookieChoiceDismiss {color:#8C536F}

Puede copiarse directamente y pegarlo directamente en la plantilla, junto al resto de estilos.


Como es lógico, habremos de modificar los colores que tengo yo puestos por otros acorde al diseño de cada blog. Esto habremos de hacerlo a mano, no queda otra, cambiando los colores hexadecimales (#215670, etc…). Para los más novatos aquí dejo algo de info sobre los colores hexadecimales (y también podría interesar estas herramientas para combinar colores y crear paletas de color).


De igual forma, no es necesario incluir todas las líneas de este código. Yo en este blog por ejemplo no he modificado el color de los enlaces, luego no hace falta poner las 4 últimas líneas. Por el contrario si no se quieren poner los enlaces a modo de botones, entonces se puede eliminar la tercera línea. También pueden incluirse todas, por supuesto: así pondremos los enlaces estilo botón y además podremos editar el color del texto de cada enlace.


En cuanto al tamaño del texto, yo lo he dejado en 13px, y recomiendo no ponerlo más pequeño (a fin de cuentas es un aviso y tiene que poder ser legible, si lo ponemos mucho más pequeño podría interpretarse como intento de ocultación del mismo). Con 13px ya está bien, no es enorme como antes y sigue pudiendo leerse.


Dónde pegar estos estilos CSS.


Para los más novatos explico también dónde pegar este pequeño fragmento de código. En realidad no es más que unos sencillos estilos CSS, y por tanto habrá que ponerlos junto a los demás de nuestra plantilla. Esto es, dentro de la etiqueta <head>.


Más concretamente, deberemos ponerlo antes de la etiqueta de cierre de los estilos: ]]></b:skin>


Si tenemos muy poca experiencia o conocimiento de HTML/CSS, lo mejor es ponerlo sencillamente junto al resto de estilos, en medio de los mismos. Recordar siempre hacer una copia de seguridad de la plantilla primero por si acaso (en caso de que no la tengamos, lo cual desde luego es algo muy imprudente, SIEMPRE hay que tener copias de seguridad de la plantilla del blog). En la imagen de abajo puede verse un ejemplo (en definitiva, podría usarse cualquier otro sitio, siempre dentro de los estilos).


Pegar el código entre el resto de estilos, es lo más seguro y fácil.


Hay también otra forma muy segura de introducir CSS en Blogger, sin tocar la plantilla, y tal vez sea la mejor para los menos expertos: en el apartado Diseño, iremos al Diseñador de Plantillas. Una vez allí iremos a Avanzado. Abajo del todo hay una opción llamada Añadir CSS. Bien, aquí podremos pegar directamente el código que he puesto antes, está para eso (añadir estilo CSS a la plantilla con total seguridad, sin tener que abrirla a nivel de código).


Añadir CSS personalizado a un blog de Blogger


Otros rótulos disponibles.


Para terminar, sobre la posibilidad que comenté al principio de poner nuestro propio rótulo totalmente personalizado, texto incluido (que no recomiendo hacer), aportaré algunas consideraciones extra.


Como digo no creo que deba hacerse en un blog de Blogger, pues lo más fácil y sin duda mejor es dejar los aspectos legales directamente en manos de Google. No obstante, si tenemos alguna web (no blog) con AdSense y/o Analytics, es obligatorio que pongamos el rótulo nosotros, pues lógicamente al ser una web nuestra no estará Blogger para poner nada.


Así pues aquí será responsabilidad nuestra añadirlo, en exclusiva. Pues es totalmente obligatorio que aparezca. Yo por ejemplo he tenido que hacerlo en algunas webs mías, como por ejemplo en mi página Maquetador-Online.net. Como puede verse allí tengo instalada una barra inferior para el aviso de empleo de cookies, siendo una de las más recomendadas a nivel global.


Se trata del Cookie Consent de Silktide. Es muy fácil de instalar, apenas unas líneas de código JavaScript. Aquí el texto que aparezca tendremos que ponerlo nosotros. El/la que quiera puede usar el mío: “Este sitio usa cookies de la forma habitual (personalizar anuncios y/o analizar tráfico) - This site uses cookies as usual (customize ads and/or analyze traffic)”. De igual forma es obligatorio poner también un enlace que aporte más información, en el que yo he puesto directamente la página de la UE oficial sobre el tema. Es una de las que se recomienda usar para esto.

Artículos relacionados: