Como personalizar el mensaje de Cookies de nuestros blogs


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?

Qué-son-las-cookies

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.

El-obligatorio-habilitar-el-mensaje-de-aviso-de-cookies

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.

Cómo-se-personaliza

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.
 Como-se-cambia-el-aspecto-del-mensaje

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!


52 comentarios

  1. ¡Hola chicos!
    Pues yo creo que soy una de las que lo tengo gris feo, jajaja.
    Así que lo cambio sí o sí con este tuto.
    ¡Me encanta! Y muchas gracias.

    Besos ^^

    ResponderEliminar
    Respuestas
    1. ¡Hola guapa!
      Seguro que con el arte que tienes deja el aviso chulísimo :)
      Muchas gracias a ti por pasarte, Un beso enorme ¡MUAK!

      Eliminar
    2. ¡Hola guapa!

      Hecho, ya me dirás qué tal cuando lo veas.

      Eso sí, el color del mensaje de cookies lo tengo en el CSS a #000000, vamos el negro. Y no me aparece como tal. No sé por qué. Por lo demás todo bien.

      Muchas gracias.

      Eliminar
    3. ¡Hola cielo!
      Te ha quedado monísimo :D Es cierto que no te sale la texto en negro (cosa que no entiendo la verdad) pero está muy muy chulo así.
      Pero si quieres negro prueba este código #151515
      ¡Un beso enorme! MUAK <3

      Eliminar
  2. Una de nuestras cosillas pendientes para el blog este año...y es que en su momento pusimos nuestra barra de cookies personalizada pero desde que blogger te la pone por defecto salen dos así que lo tenemos que cambiar...teníamos pendiente buscar cómo lo hicimos en su momento así que una vez más nos has facilitado el trabajo.Un besazo

    ResponderEliminar
    Respuestas
    1. ¡Hola guapas!
      Si, a mucha gente le está pasando eso, ahora se ven con dos barras de Cookies que ocupan toda la cabecera del Blog.
      Me alegro un montón de que el post os sirva entonces :)
      Un beso enorme ¡MUAK!

      Eliminar
    2. Muchas gracias...aqui andamos intentando eliminar la que ya teníamos para empezar de cero, pero nos está resultando casi imposible. Esperamos poder conseguirlo para así seguir el tutorial. Un besazo y feliz domingo.

      Eliminar
    3. ¡Guapas! Estoy en vuestro blog :)
      A mi me sale solo 1 aviso de Cookies y parece que es el de Blogger personalizado

      Eliminar
    4. ¡Muchas gracias por pasarte!Pues ya enredaremos por las tripas del blog más profundo... y es que nos siguen saliendo dos avisos...pero bueno, así no podrán decir que no cumplimos con la política de Cookies, jejejeje...muchas gracias de nuevo guapisima

      Eliminar
    5. Pues que raro porque a mi solo me sale uno jiji
      ¿Habéis probado a abrirlo con otro navegador? Por probar...
      Un beso enorme :D

      Eliminar
  3. Gracias por este tutorial, tenia esto pendiente y ahora ya sé cómo hacerlo :) Pronto lo pondré en práctica.
    Besitos!

    ResponderEliminar
    Respuestas
    1. ¡Hola Irene! Nos alegra un montón de que te sirva este post.
      Estamos deseando de verlo, seguro que te queda genial :)
      Muchas gracias por pasarte, Un besazo enorme ¡MUAK!

      Eliminar
  4. Muy útil! voy a intentar cambiarlo ahora mismo :D

    ResponderEliminar
    Respuestas
    1. ¡Claro que si guapa! Ya verás como te queda genial :)
      Un besazo enorme ¡MUAK!

      Eliminar
  5. yo no lo he personalizado pero tengo que hacerlo

    ResponderEliminar
  6. Qué interesante! Luego me pongo con calma, muchas gracias por esta entrada tan útil! :)

    ResponderEliminar
    Respuestas
    1. ¡Hola cielo! Que bien que este post te sea de utilidad :D
      Ya verás como no se tarda nada y queda un blog mucho más profesional.
      ¡Un besazo enorme! y muchas gracias a tí

      Eliminar
  7. Muy interesante ;) tengo que intentarlo porque es cierto que tal cual se ve no es nada estético. Un saludo,
    El blog de Marian Rolca

    ResponderEliminar
    Respuestas
    1. ¡Hola Marian!
      Aunque ya estuvimos hablando ayer por email no quería dejar tu comentario sin contestar :)
      Menos mal que todo quedó en un susto jeje
      Te ha quedado muy bien y ya verás que con un poco de CSS más te queda aún mejor
      ¡Un beso enorme! MUAK

      Eliminar
  8. Hola guapa, me ha surgido un problema. He aplicado solo el código para que el mensaje aparezca en la parte baja y ahora no me sale directamente el mensaje de cookies. Estoy preocupada, he borrado el código pero sigue sin salirme.

    ResponderEliminar
    Respuestas
    1. ¡Guapa, voy a intentar contactar contigo por email! Tranquila, a mi si me sale :)
      Te mandaré un pantallazo.

      Eliminar
  9. Las cookies, las grandes desconocidas que te saltan cada dos por tres :). Muchas gracias por los pasitos para hacerlas más agradables, que siempre anima ver un detallito coqueto en una web. ¡¡¡Muyy buen fin de semana!!! Un besazo1

    ResponderEliminar
    Respuestas
    1. ¡Hola cielo! Si jeje ese aviso gris feo que no hace más que molestar... Siempre se agradece un blog que cuide los detalles, y ese aviso no pega nada con ningún blog :)
      Muchas gracias a tí guapa por pasarte, Un besazo enorme de parte de los dos ¡MUAK y MUAK!

      Eliminar
  10. Yo también odio el mensaje de cookies, gracias por el dato, lo aplicaré :) Te nominé a un tag en mi blog, espero que te animes! Un beso!

    ResponderEliminar
    Respuestas
    1. ¡Hola Val!
      Muchas gracias por nominarnos de verdad, eres un amor :D
      El lunes sin falta las contesto ¡Un beso enorme! <3

      Eliminar
  11. Oye pues me viene a las mil maravillas este tutorial porque es verdad que ese color es muy feo ja ja. Como siempre muy útil tus entradas :)

    ResponderEliminar
    Respuestas
    1. ¡Hola Ingrid! Que alegría que los post te resulten útiles
      Seguro que dejas el mensaje super acorde con tu blog, el CSS es muy facilito :D
      ¡Un beso enorme! MUAK

      Eliminar
  12. ¡DE LAS QUE ME HAS SALVADO! No sabes lo que me has ayudado en muchas cosas de Blogger.
    Millones de gracias. Ahora, en cuanto tenga un poquito de tiempo, cambiaré lo de las cookies (dichosas).
    ¡Un beso enorme!

    ResponderEliminar
    Respuestas
    1. ¡Hola cielo!
      ¿Si? Ainns no sabes la ilusión que nos hace leer eso :D Millones de gracias a tí por tus palabras guapa.
      Estamos aquí para lo que necesites ¡Un beso enorme! MUAK

      Eliminar
  13. ¡Alaaa que guaayy! Me lo apunto para usarlo si o sii ^^

    Un besii

    ResponderEliminar
    Respuestas
    1. ¡Gracias guapa! :D Estamos aquí para lo que necesites, Un besazo enorme ¡MUAK!

      Eliminar
  14. Que intersante!! Me guardo esta entrada para hacerlo :)
    Un besito!

    ResponderEliminar
    Respuestas
    1. ¡Hola Dori! Claro que sí, ya verás que se tarda muy poquito en cambiarlo y le dá otro aspecto al Blog :D
      ¡Un beso enorme! MUAK

      Eliminar
  15. Hoag uapa
    Un post genial, muy interesante
    Gracias por compartirlo!
    Un besazo

    ResponderEliminar
    Respuestas
    1. ¡Hola Arien! Que alegría que te guste el post :) Un beso muy fuerte ¡MUAK!

      Eliminar
  16. ¡Hecho! Muy bien explicado, muchas gracias guapa! ;)

    ResponderEliminar
    Respuestas
    1. ¡Que bien! Muchas gracias a tí guapa :D
      Un besazo enorme ¡MUAK!

      Eliminar
  17. Es una entrada muy interesante, creo que yo lo voy a hacer pero no hoy que casi no tengo tiempo, durante la semana probaré.
    Un besazo :)

    ResponderEliminar
    Respuestas
    1. ¡Hola guapa! Claro que sí, ya verás que así queda mucho más mono tu blog :) ¡Un besazo enorme!

      Eliminar
  18. Siempre nos enseñas cosas muy útiles!Besos!!

    ResponderEliminar
  19. Anónimo11/1/16

    Hola Guapa!
    Tenia pendiente este post, y he estado realizando los cambios, pero ahora no me sale el mensaje, no se por que :O
    Muchas gracias por enseñarnos estos tutoriales tan útiles :)
    Un besazo enorme!

    ResponderEliminar
    Respuestas
    1. ¡Hola Laia!
      Aunque ya hablamos esto por Snapchat no quería dejar tu comentario sin contestar ^^
      Muchas gracias a tí por confiar en nosotros, un beso enorme ¡MUAK!

      Eliminar
  20. ¡¡Hola guapa!! No tenía ni idea que esto se pudiera hacer, muchas gracias por compartirlo, creo que lo voy intentar cambiar! Un besazo

    ResponderEliminar
    Respuestas
    1. ¡Hola cielo! Claro que sí, ya verás que es muy fácil :D
      Cualquier duda que tengas nos avisas sin problemas.
      ¡Un beso enorme! MUAK

      Eliminar
  21. Genial post, super sencillo!
    Cambio hecho, pero ahora no se como verlo...
    Besitos!!

    ResponderEliminar
    Respuestas
    1. ¡Que bien guapa! Ya verás como te queda genial :) Un beso enorme ¡MUAK!

      Eliminar
  22. Yuhuuuuuuuuuuuu!!
    Lo he podido cambiar mil gracias!!

    ResponderEliminar
    Respuestas
    1. Oleeee :) Me alegro cielo ¡Un besito enorme! MUAK

      Eliminar
  23. Anónimo7/3/16

    ¡Muy interesante!
    ¿Sabes cómo se haría en Wordpress? Yo siempre he sido de Blogger pero para este último blog me decidí hacerlo en Wordpress y no soy tan experta en estas cosas (y creo que en los planes gratuitos no te deja modificar la plantilla).
    ¡Gracias!

    ResponderEliminar
    Respuestas
    1. ¡Hola cielo!
      Pues sintiéndolo mucho, yo solo uso Blogger, no tengo ni idea de como se puede hacer en Wordpress.. lo siento guapa.
      ¡Un beso muy grande!

      Eliminar



¡Anímate a comentar! Tu opinión es muy importante para mí.

Por eso, cualquier comentario escrito desde el respeto será bien recibido.
Por tanto, nos gustaría aconsejarte, que si además de tu fantástico comentario deseas añadir la URL de tu sitio WEB,
debes "Comentar como: Nombre/URL" así Google no nos castigará y tu comentario no será tratado como SPAM :)

No aceptamos ningún tipo de SPAM ¡Gracias por vuestra comprensión!

© Alexxa 26. All rights reserved.