Etiquetas

CÓMO MODIFICAR EL AVISO DE COOKIES DE GOOGLE EN BLOGGER

Vuelvo de mis vacaciones blogueras (y qué vacaciones, dos meses sin escribir), entro a blogger y me encuentro con un aviso superprecioso (nótese la ironía) escrito sobre fondo amarillo sucio o beis medio que me dice:




 Las leyes de la Unión Europea exigen que informes a tus visitantes europeos de que usas cookies en tu blog. En muchos casos, dichas leyes también exigen que obtengas el consentimiento de los lectores.
Hemos añadido un aviso a tu blog para explicar el uso que hace Google de ciertas cookies de Blogger y de Google, incluidas las de Google Analytics y AdSense.
Es tu responsabilidad comprobar que dicho aviso se muestre y que sea adecuado para tu blog. Si utilizas otras cookies (al añadir funciones de terceros, por ejemplo), es posible que este aviso no te sirva. Más información sobre este aviso y tus responsabilidades.

Vaya, me esperaba una notita de bienvenida o un mensaje cariñoso preguntándome por mi verano, no esto. Bueno, no importa, si ellos se encargan de poner el aviso en mi blog es un trabajo que me ahorro, ¿no? Pues no. Entro al blog para ver el aviso y me encuentro una enorme barra gris en la parte de arriba que me tapa toda la barra superior de mi página.

 

Entiendo que haya que avisar a los lectores y visitantes de nuestras páginas de que el Gran Hermano nos vigila, pero algo un poco más discreto también vale, digo yo. Así que nuestra misión para hoy es:

❤  PONER MONO EL AVISO DE COOKIES EN BLOGGER ❤ 

 


Qué son y para qué se utilizan las cookies.

 

Para empezar estaría bien saber de qué estamos hablando. Las cookies o galletas son unos archivos procedentes de las páginas web que se instalan en nuestros navegadores y que guardan nuestro historial de navegación para ofrecernos un contenido adecuado a nuestros hábitos o preferencias.Lo que ellos denominan mejorar la experiencia de usuario.

Fuente: cuantocabron.com

Estas galletitas son las responsables de que no tengamos que registrarnos en una página cada vez que queramos entrar, que en las compras online queden guardados nuestros productos en el carrito aunque cerremos la página o que la publicidad de las páginas se adapte a nuestros gustos e intereses. Y si tienes una página te ayudan, por ejemplo, a analizar el tráfico y las estadísticas.

Hay varios tipos de cookies: algunas se borran automáticamente al cerrar tu navegador, otras puedes borrarlas desde el historial... en cualquier caso si no quieres almacenar cookies o utilizas un ordenador o dispositivo móvil que no es privado puedes usar el modo incógnito de tu navegador.

Aunque en general las cookies no son peligrosas sí que puede considerarse una intromisión en la intimidad del usuario y por tanto la legislación de la unión europea obliga a las páginas a informar y pedir el consentimiento para su utilización. Esto en España no lo veo muy necesario, aquí somos muy de darle a aceptar sin leer, pero también somos muy de cumplir con la ley así que vamos a mantener el aviso personalizándolo a nuestro gusto.

Fuente: @rosmadoiro

Modificar el aviso de cookies del blog.

 

El aviso además de resultarme bastante soso lleva escrita una parrafada innecesaria a mi parecer. Aunque no sepamos que son las cookies y para qué se usan sí que nos hemos encontrado avisos de este tipo en muchas páginas desde hace bastante tiempo y estoy segura de que muy pocos le han dado a "más información" y muchos le hemos dado a "aceptar" sin leer, o sin prestar atención al menos. Así que lo primero que vamos a hacer es ver cómo cambiar el texto de nuestro aviso, en mi caso por algo un poco más corto (el que quiera información más detallada que le de al botón de información), y con algo más de gracia ;) .

Para empezar es muy recomendable hacer una copia de seguridad de la plantilla de nuestro blog y después vamos a PLANTILLA>>HTML>>CTRL+F y buscamos la siguiente línea:


 <body expr:class='&quot;loading&quot; + data:blog.mobileClass'>



justo debajo vamos a pegar el siguiente código:


 <script>
cookieOptions = {msg: "Texto de nuestro aviso", close: "Acepto", learn: "Más información", link:"Enlace a política de cookies"};
</script>
 El enlace a política de cookies debe llevarnos a una página dónde se explique qué tipo de cookies utilizamos y para qué. Si sólo usamos las de Google podemos enlazar directamente aquí, si tenemos más podemos poner varios enlaces o crear una página donde lo expliquemos y enlazarla.

Ahora que ya tenemos el nuevo texto vamos a personalizar el aviso y adaptarlo a nuestra página. Vamos a PLANTILLA>>PERSONALIZAR>>AVANZADO>>AÑADIR CCS y ahí pegamos el siguiente código:




/*Código para modificar el aviso de cookies*/

#cookieChoiceInfo {
background: #B1D6F3 !important; /*Fondo de la barra*/
color: #fff !important;
font-size: 18px !important; /*Tamaño fuente botones, modifica el tamaño final*/
font-weight:normal !important; /*Estilo de fuente: normal, cursiva, negrita*/
top: auto !important;
bottom: 0 !important;/*Posición de la barra: abajo*/
border-top: 1px #B1D6F3 solid !important; /*Borde de la barra, anchura, color y estilo*/
padding: 0 !important;
box-sizing: border-box;
transform:scale(1.0,1.0);
opacity: 1.0; /*Transparencia de 0 a 1*/
}


.cookie-choices-text {
display: inline-block !important;
vertical-align: middle !important;
font-size: 14px !important; /*Tamaño de la fuente del aviso*/
margin: 5px 10px !important;
color: #fff !important; /*Color de la fuente del aviso*/
max-width: 800px !important;
text-align: left !important;
line-height: 20px !important;

}

#cookieChoiceInfo a {
display: inline-block;
background: #F88EBB; /*Fondo del botón*/
padding: 8px;
border-radius: 8px; /*Borde redondeado*/
box-shadow: 1px 1px 8px #000; /*Sombra del botón*/
border: 2px #fff solid; /*Borde del botón, anchura, color y estilo*/
text-shadow: 1px 1px 2px #000; /*Sombra del texto del botón*/
}
#cookieChoiceInfo a:nth-child(2) {
background: #F88EBB; /*Fondo del segundo botón*/

/*Si quieres que el segundo botón sea diferente del primero modifica aquí*/
}
.cookie-choices-button {
font-weight: normal;
text-transform: none !important;
white-space: nowrap;
color: #fff;
margin-left: 8px;
padding: 0 6px;
text-decoration: none;
}
 Variando estos parámetros el mío ha quedado así:



<< Pst, pst. Utilizo cookies para espiarte y para desayunar. Si sigues por aquí entiendo que estás de acuerdo. >>

Mucho más discreto e integrado con el estilo de mi blog. Y en la parte de abajo donde no molesta.


 NOTA: Es posible que no veas el aviso en tu propia página porque ya tienes las cookies de tu sitio aceptadas. Para poder verlo utiliza otro navegador, navega en modo incógnito o borra las cookies del historial.



Pues con tanto hablar de cookies me están apeteciendo unas... ¡de chocolate! 
 




Sígueme en:



http://eepurl.com/bct2DT
Etiquetas:

Comentarios

  1. Unknown1/9/15

    Jajajaja me encantó esto " Pst, pst. Utilizo cookies para espiarte y para desayunar." Que buena idea!!!

    ResponderEliminar
  2. LaTitaLily2/9/15

    Pues no, en el sitio de una misma las tienes que aceptar también. Al menos yo tuve que hacerlo, en los dos blogs.
    Y mi personalización, después de un mes ha consistido el modificar mínimamente el CSS jajaja.
    Tú tranquila, si julio y agosto esto está medio muerto....
    Feliz vuelta!!
    XOXO

    ResponderEliminar
    Respuestas
    1. Rosana20/9/15

      Gracias por la bienvenida pero me he liado la manta a la cabeza y estoy de obra y pintura, así que la vuelta se alarga....

      Eliminar
  3. M. Esther mg2/9/15

    Hola! Me ha encantado lo bien que lo explicas y cómo queda...porque ya lo he puesto en mi blog ¡¡Gracias!! y me quedo por aquí que veo muchos temas interesantes. Bss

    ResponderEliminar
  4. Susana Madrid3/9/15

    Te ha quedado monísimo el aviso!!! Muchas gracias por tu explicación.
    Voy a intentar cambiar el mío.
    Trampantojos de costura

    ResponderEliminar
  5. Enganchada al reciclaje23/1/16

    Muchas gracias por el tutorial. Ya he conseguido dejar la barra de cookies más integrada en la página y sobre todo menos molestosa. Besos.

    ResponderEliminar
    Respuestas
    1. Rosana25/1/16

      Ya me he pasado a verla por tu blog, y de paso tomo nota de unas cuantas ideas de reciclaje!!

      Eliminar
  6. Creando y Fofucheando28/2/16

    Qué bien lo explicas,me ha resultado muy fácil,por fin lo tengo conjuntado con mi blog.Besos :)

    ResponderEliminar
  7. Yolanda10/3/16

    Hola Rosana:
    Una duda: ¿Si sigo los pasos según lo explicas, he de elegir un texto? o aparecerá el mismp que has elegido tú?
    ¿sólo me limito seguir los pasos y ya está?
    Mira que cuestan a mí estas cosas!!!!
    Muchas gracias

    ResponderEliminar
    Respuestas
    1. Rosana11/3/16

      Si sigues los pasos has de elegir un texto y ponerlo donde pone texto de nuestro aviso. Y donde pone enlace tienes que enlazar a una página donde se explique, en el siguiente párrafo he dejado el enlace a la política de cookies de google por si quieres usarlo. Si quieres una explicación más detallada me dices y te mando un mail. Un saludo!

      Eliminar
    2. Yolanda14/3/16

      Gracias Rosana. Lo voy a intentar y ya te contaré si lo consigo!!

      Eliminar
  8. Sandra 24/6/16

    Hola!! Qué simpático me parece tu mensaje, me ha gustado, jeje.
    Por otra parte, tengo una duda, ¿se puede incluir una imagen en el mensaje? ¿cómo podría hacerlo?

    Muchas gracias!!

    ResponderEliminar
    Respuestas
    1. Rosana24/6/16

      Hola Sandra. No he probado a incluir una imagen pero supongo que se pueda añadiendo una etiqueta IMG entre <>, despues con el código CCS tendrías que ubicarla donde quieras y "decorarla". Muchas gracias por tu visita, un saludo!

      Eliminar
  9. Marta Cuesta3/7/16

    ¡Hola! Muchas gracias por el paso a paso, he vuelto a retomar el blog para sacarle el jugo y después de probar con varios métodos este ha sido el que mejor me ha funcionado. Además muy bien explicado :) Te seguiré para seguir mejorando el blog.

    Un saludo!

    ResponderEliminar
  10. Lulú Craft18/11/16

    Hola Rosana!
    MUchisimas gracias por el tutorial! me ha servido mucho y aunque no personalicé el mensaje de las cookies, pues entendí los detalles del código que ayudaron a personalizar el mensaje en el blog!

    ResponderEliminar
  11. Ana Mandala13/7/17

    Gracias!!
    Tu tutorial me ha servido de mucho!!

    ResponderEliminar
  12. Mónika Feren4/3/21

    Muchas gracias, me funcionó perfecto. Un apunte, en mi HTML no encontré los parámetros "body expr:class='"loading" + data:blog.mobileClass' lo coloqué antes de la etiqueta de cierre del HEAD y funciona igual

    ResponderEliminar

Publicar un comentario

Entradas populares