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.
¿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 textoque 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.
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).
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).
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.
![all-free-downoad.com-logo[5]](https://bp3.blogger.com/_QcADEK6HYak/SI320Z2ve6I/AAAAAAAAD9Y/zEOsIxfEhts/s400/Logotipo.png "Intercambios virtuales en la red, seriales y otros."){kind=small}
![all-free-downoad.com-logo[5]](https://www.deluxetemplates.net/wp-content/themes/newprivatetheme/images/logo.png "DeluxeTemplates.net página web es más conocido por las plantillas de Blogger, y recientemente se hizo muy conocido en WordPress comunidad con nuevos y exclusivos diseños el tema de WordPress. Todas las plantillas de Blogger y WordPress temas mencionados aquí son 100% exclusivo, diseñado y desarrollado por nosotros , 100% gratuito para uso personal o comercial, licenciado bajo la licencia Creative Commons. Todos nuestros temas son: - Diseño único y moderno. - Gratuito para uso personal o comercial, licenciado bajo licencia creative commons. - Actualizado, y apoyado siempre"){kind=logo}
