Como personalizar el mensaje de Cookies de nuestros blogs

¿Soy la única que odia el mensaje de Cookies grisáceo de casi todos los Blogs?
De verdad no sabéis lo incómodo que es a la hora de entrar en un Blog.
Os pongo en situación.


El día cinco por la tarde, empezó a llover a mares y no pudimos salir a ver las cabalgatas de Reyes (porque básicamente no salieron) así que Mr. Alexxa se puso a echar una partida a la Ps4 y yo me puse a ver los Blogs atrasados que tenía (desde el móvil, dato importante)

Cual es mi sorpresa, que saltando de un blog a otro me dí cuenta de que más del 50% no tenían el mensaje de Cookies personalizado. ¿Y cual es el problema? Pues que todos los blogs tenían el menú en una barra superior (como el mío, para que os hagáis una idea) y el mensaje de Cookies quedaba por debajo. Con tan mala pipa que era imposible darle al botón de aceptar (porque estaba por debajo del menú) para que se eliminara.

Como el mensaje es tan largo, se veía más de un cuarto de la pantalla del móvil con esa franja grisácea que ocupaba la cabecera del Blog y parte del título del post.
Un desastre la verdad.

Caí en la cuenta de que yo tampoco tenía el mensaje de Cookies personalizado, y aunque este no saliera por debajo de mi menú (cosa que comprobé varias veces) resultaba muy incomodo a la vista.
No pegaba en absoluto con la estética del Blog. Y además era muy molesto que saliera en la parte alta del Blog porque me tapaba todo el menú.

Resumiendo, que me enrollo con mis introducciones interminables... que como podéis ver he cambiado el mensaje de cookies y ahora queda mucho más mono.

Para las nuevas visitas ya no supone una molestia y le da un aire más profesional al Blog.
Se que muchas me diréis que eso del HTML es muy difícil, que no os atrevéis y todo eso.

Pero de verdad que es muy fácil de hacer... y sobre todo necesario.

1. ¿Que son las cookies?
2. ¿Es obligatorio habilitar el mensaje de aviso de cookies?
3. ¿Como se personaliza?
4. ¿Como se cambia el aspecto del mensaje?



Una cookie es una pequeña información enviada por un sitio web y almacenada en el navegador del usuario, de manera que el sitio web puede consultar la actividad previa del usuario para conseguir información sobre los hábitos de navegación del usuario. (Palabras de la Wikipedia)

Por ejemplo: Personaliza la publicidad de Google Adsense. Si buscas en Google tarifas de alguna compañía de telefonía, cuando entres en un Blog con publicad de Adsense se te mostrará publicad de compañías telefónicas.



Sí. Blogger genera automáticamente ese mensaje grisáceo tan feo cumpliendo con la "Ley Cookies". Ya ha habido sanciones de más de 30.000 euros por webs profesionales que no avisaban a sus usuarios de que su web utilizaba Cookies.

Tenéis dos opciones, eliminar el mensaje de Cookies que añade Blogger predeterminado y añadir el vuestro propio. O personalizar el que Blogger da por defecto.
Yo sinceramente, para curarme en salud, prefiero personalizar el que ellos dan y dejarme de jaleos.



Es muy muy muy sencillo. Pero como siempre os recomiendo, por si las moscas, hacer una copia de seguridad de la plantilla.

Nos vamos a Plantilla → Editar HTML

Buscamos con Ctrl + F la palabra </head> y justamente en la línea de encima (abrimos hueco si fuera necesario) añadimos lo siguiente:

<script>
cookieOptions = {msg: "Mensaje que informa del uso de Cookies", close: "Acepto", learn: "Más información", link:"https://www.google.com/policies/technologies/cookies/"};
</script>

Los textos que aparecen de color los podéis modificar a vuestro gusto.
 

En esta parte no hace falta que hagamos ninguna copia de seguridad, tan solo tenemos que jugar con los colores y tamaños y darle a nuestro mensaje el aspecto que queramos.

Nos vamos a Plantilla → Personalizar → Avanzado → Añadir CSS

Si queréis que vuestro mensaje aparezca en la parte baja del Blog añadís este código:

#cookieChoiceInfo {
top: auto !important;
bottom: 0 !important;
}

Para cambiar el aspecto añadís este código:

/* Contenedor general */
#cookieChoiceInfo {
background: #eee; <---------------- El color de fondo (es decir el color gris feo) 
padding: 0px; <----------------------- El ancho del contenedor general
}
/* Caja del texto*/
.cookie-choices-text {
background: #eee !important; <----------- El fondo del mensaje de Cookies
color: #333 !important; <------------------- El color de la letra del mensaje de Cookies
font-size: 15px; <--------------------------------- El tamaño de la fuente del mensaje de Cookies
}
/* Botones */
.cookie-choices-button {
background-color: #333 !important;   <------- El fondo de los Botones de "Aceptar" y "Más Info"
color: #999 !important;  <----------------------- El color de la letra de "Aceptar" y "Más Info"
border-radius: 4px; <----------------------------- El borde de los botones (cuanto mayor más redondeado)
}

Como veis son unos pasos muy sencillos, apenas se tarda nada de tiempo... y os aseguro que nos evitara más de un quebradero de cabeza.

Como siempre esperamos que os sea de mucha ayuda y sobre todo que os resulte útil.

¿Vosotras ya lo teníais? ¿Lo habéis personalizado?

Nosotros nos leemos el próximo lunes con nuevo Lunes de Descubrimientos Molones ¡Un beso enorme!