¿Qué es el aviso de cookies?
La normativa europea sobre protección de datos (ley de cookies) obliga a proporcionar a los visitantes información sobre las cookies que se usan en una página web o blog y que éstos den su consentimiento a la recopilación de sus datos.
Blogger, dentro de su Ayuda, nos proporciona la siguiente información,
"Las leyes de la Unión Europea (UE) exigen que informes a tus visitantes de la UE de que usas cookies en tu blog. En muchos casos, la ley también exige que obtengas el consentimiento de los lectores.
Hemos añadido un aviso en tu blog para ayudarte a cumplir con dichos requisitos legales. En el aviso se indica a tus visitantes que Google utiliza algunas cookies de Blogger y de Google en tu blog, incluidas las de Google Analytics y de AdSense. Más información sobre la política de privacidad de Google y sobre cómo utiliza Google los datos de los sitios web de sus partners."
No voy a profundizar en este tema porque no es la razón de esta entrada, pero es importante saber algo de las cookies.
Las cookies son pequeños archivos de texto con datos que se envían desde un sitio web en el que se está navegando, para almacenarse en el navegador web del usuario. Cada vez que entramos en un sitio web y se carga en nuestro equipo, nuestro navegador envía información (cookie) al servidor con datos sobre nuestra actividad en el sitio, preferencias y comportamiento de navegación. Es decir, el sitio web puede consultar previamente la actividad y comportamiento del usuario.
Los sitios web incluyen las cookies con el fin, en principio, de mejorar la experiencia del usuario permitiendo recordar al visitante y sus preferencias. Pero la parte negativa es que pueden provocar abusos de privacidad, de ahí la razón por la que esté ahora regulada por ley este tipo de información y su tratamiento.
Google ha añadido automáticamente la notificación de cookies de la UE en los blogs de Blogger así que no tenemos que preocuparnos los bloggers en añadir el mensaje.
Es importante no olvidar la responsabilidad que recae sobre el administrador del blog de asegurarse de que el aviso de cookies se muestre correctamente y sea perfectamente visible. Así que es aconsejable mantener este mensaje aunque moleste y provoque un retardo en la carga del blog.
Hay formas de ocultar o deshabilitar el aviso y también la posibilidad de modificar el texto, pero Blogger en su ayuda nos avisa que,
"Si has modificado tu blog de forma que el aviso quede oculto, recaerá sobre ti la responsabilidad de informar a tus visitantes de las cookies utilizadas en tu blog y, si es necesario, de obtener su consentimiento. Además, si has añadido funciones al blog que implican el uso de cookies (servicios de análisis o publicitarios de terceros incluidos), tendrás que añadir al aviso una explicación o publicar otro aviso.
Tú eres el responsable de decidir lo más adecuado para las cookies que utilizas. Si decides usar otro aviso, recuerda que debe cumplir la Política de Google de consentimiento de usuarios de la Unión Europea. Más información sobre cómo generar avisos de cookies"
No hacen falta más razones para olvidar la posibilidad de eliminar o modificar este mensaje. Lo que sí podemos es modificar su aspecto para que esté, por ejemplo, más acorde con el aspecto general del blog, siempre y cuando la notificación se vea perfectamente.
Personalizar el diseño del aviso de cookies de Blogger
Voy a tratar de modificar el aspecto (solamente el estilo) del mensaje de cookies que por defecto añade Blogger al blog (fondo gris y letra en blanco).
Previamente hago una copia de seguridad de la plantilla.
Voy al menú Tema (antes Plantilla) → Editar HTML
Dentro de la ventana de edición busco </b:skin> con CTRL+F y pego las siguientes líneas justo encima.
/*Estilo aviso de cookies de Blogger
---------------------------------------------------------*/
#cookieChoiceInfo { /*cuadro de aviso*/
background: linear-gradient(-15deg, #d9dde2 5%, #7a7a0f 35%); /*fondo degradado lineal*/
padding:1.5px 0 1.5px; /*relleno*/
}
.cookie-choices-info .cookie-choices-text { /*texto del cuadro de aviso */
font-size:18px !important; /*tamaño letra del texto*/
color:#E8E4C8 !important; /*color letra del texto*/
font-family: leelawadee, arial, serif !important; /*tipo de fuente del texto*/
font-style:bold; /*texto estilo negrilla*/
margin:8px 2px !important; /*margen del texto*/
}
.cookie-choices-info .cookie-choices-button { /*botones de enlaces en el cuadro de aviso*/
padding:3px 3px !important; /*relleno*/
margin: 5px 5px !important; /*margen entre botones*/
border-radius:6px; /*borde redondeado botones*/
font-size:14px; /*tamaño letra de los botones*/
}
a.cookie-choices-button:nth-child(1) { /*botón primer enlace más información*/
background: #E8E4C8 !important; /*color fondo*/
color: #7a7a0f !important; /*color texto primer enlace*/
}
a:hover.cookie-choices-button:nth-child(1) { /*botón primer enlace hover al pasar el ratón */
color:maroon !important; /*letra hover*/
}
a#cookieChoiceDismiss { /*botón segundo enlace entendido*/
background: black; /*color fondo*/
color:white; /*color texto enlace*/
}
a:hover#cookieChoiceDismiss { /*botón segundo enlace hover al pasar el ratón*/
font-size:16px; /*la letra aumenta de tamaño*/
}
---------------------------------------------------------*/
#cookieChoiceInfo { /*cuadro de aviso*/
background: linear-gradient(-15deg, #d9dde2 5%, #7a7a0f 35%); /*fondo degradado lineal*/
padding:1.5px 0 1.5px; /*relleno*/
}
.cookie-choices-info .cookie-choices-text { /*texto del cuadro de aviso */
font-size:18px !important; /*tamaño letra del texto*/
color:#E8E4C8 !important; /*color letra del texto*/
font-family: leelawadee, arial, serif !important; /*tipo de fuente del texto*/
font-style:bold; /*texto estilo negrilla*/
margin:8px 2px !important; /*margen del texto*/
}
.cookie-choices-info .cookie-choices-button { /*botones de enlaces en el cuadro de aviso*/
padding:3px 3px !important; /*relleno*/
margin: 5px 5px !important; /*margen entre botones*/
border-radius:6px; /*borde redondeado botones*/
font-size:14px; /*tamaño letra de los botones*/
}
a.cookie-choices-button:nth-child(1) { /*botón primer enlace más información*/
background: #E8E4C8 !important; /*color fondo*/
color: #7a7a0f !important; /*color texto primer enlace*/
}
a:hover.cookie-choices-button:nth-child(1) { /*botón primer enlace hover al pasar el ratón */
color:maroon !important; /*letra hover*/
}
a#cookieChoiceDismiss { /*botón segundo enlace entendido*/
background: black; /*color fondo*/
color:white; /*color texto enlace*/
}
a:hover#cookieChoiceDismiss { /*botón segundo enlace hover al pasar el ratón*/
font-size:16px; /*la letra aumenta de tamaño*/
}
Ahora el mensaje de aviso de cookies se muestra así,
Mover el aviso de cookies de Blogger al final de la pantalla
Por defecto Blogger muestra el aviso en la parte superior del blog pero es posible que oculte contenido que nos interese que sea visible para el visitante.
Para evitar esto, se puede mover el aviso a la parte inferior de la pantalla.
Añadimos las siguientes líneas CSS a las del cuadro anterior,
.cookie-choices-info {
position: fixed;
top: auto !important;
bottom: 0px !important;
}
position: fixed;
top: auto !important;
bottom: 0px !important;
}
El aviso ahora se muestra en la parte inferior de la pantalla y no oculta los menús de Páginas de la parte superior ni la cabecera de mi blog de prácticas.
Mover el aviso de cookies de Blogger al final de la página
Si se opta por mostrar el mensaje en la parte inferior de la página, el código a añadir es el siguiente,
.cookie-choices-info {
position: relative !important;
top: 100% !important;
}
position: relative !important;
top: 100% !important;
}
pero no lo recomiendo porque en la mayoría de los casos el visitante no llegará a ver el aviso salvo que se desplace hasta el final de la página.
Cookie Choices es una herramienta gratuita de Google de aviso y aceptación de cookies. Incluye el script para arrancar la cookie y permite editar los estilos del aviso y de los botones con los enlaces.