Cómo quitar el mensaje de Cookies de Blogger

julio 28, 2015

Cómo quitar el mensaje de Cookies de Blogger


Si tienes un blog en blogger, has debido recibir el aviso por correo de que en septiembre debes cumplir con la política de cookies. Y por si no sabes cómo hacerlo, si tu blog es de blogger, ellos se han encargado de que el aviso aparezca bien grande en el cabecero de tu blog. Así:

Cómo quitar el mensaje de Cookies de Blogger

Es una obligación que debemos cumplir, pero si ya tenías instalada tu barrita acorde con el diseño de tu blog, es un fastidio ¿verdad? Además, dependiendo de la resolución del monitor desde el que te visiten, se verá más o menos alta... ¡un rollo!

Pero quitarla es muy sencillo. Voy a contarte cómo hacerlo, siempre bajo tu responsabilidad, claro.


CÓMO QUITAR EL MENSAJE DE COOKIES DE BLOGGER


1.- Entra en tu plantilla HTML.

2.- Haz click dentro de tu plantilla, en cualquier zona dónde aparece el código, para activarla y poder abrir el buscador interno. Abre el buscador pulsando Control + F simultáneamente.

3.- Busca:

/* Header
----------------------------------------------- */

4.- Justo debajo pega:

#cookieChoiceInfo {
display: none;
}

Con este pequeño fragmento de código hemos creado un ID para identificar la barra de Google (#cookieChoiceInfo) y entre las llaves le decimos que se desactive (display: none;).

5.- Comprueba en Vista Previa que todo está correcto y guarda los cambios.





CÓMO PERSONALIZAR EL MENSAJE DE COOKIES DE BLOGGER


Pero si no tenías tu aviso de Cookies, te aconsejo encarecidamente dejarlo y personalizarla para que su diseño vaya a juego con tu blog. Recuerda que todos debemos cumplirlo y Google en esos temas no se anda con bromas...




Para personalizarlo debes seguir los mismos pasos que para quitarlo, pero en el punto 4 hay cambios. El código a pegar sería:

#cookieChoiceInfo {
background-color: #8FE1D8 !important;
color: #000000 !important;
font: normal normal 12px 'Arial', cursive !important;
text-align: center !important;
text-transform: uppercase !important;
line-height: 300% !important;
}

Dónde puedes personalizar:

background-color: color de fondo de la barra de cookies.

Puedes elegir el que quieras de esta web: Colores HTML

color: color de la tipografía.

font: tipo de letra (Arial) y tamaño (10px). Puedes cambiarla por cualquiera que ya estés usando en tu blog.

text-align: alineación del texto. Ahora mismo está centrado (center) pero puedes alinearlo a la derecha (right) o a la izquierda (left).

text-transform: para ponerlo en mayúsculas (uppercase), puedes eliminar esta línea si quieres que aparezca normal. O cambiar uppercase por lowercase (minúsculas) o capitalize (versalitas).

line-height: el espacio entre las líneas, para que los botones no se monten encima de la línea de texto.

Con este código, se vería así:



Mucho mejor ¿verdad?




CÓMO PERSONALIZAR LOS BOTONES DE LA BARRITA DE COOKIES DE BLOGGER


Y el toque final: los botones de Más Información y Entendido. Solo tienes que añadir el siguiente código debajo del anterior:

#cookieChoiceInfo a {
font: normal normal 15px 'Patrick Hand SC' !important;
text-decoration:none !important;
color: #000000 !important;
background-color: #ffffff !important;
}


font: el tipo de fuente y tamaño.
color: el color del tipo de letra.
background-color: el color de fondo del botón.


Resultado:


¡Genial! Totalmente a juego con el diseño de nuestro blog y con el código y texto oficial de Google para estar bien seguras de que cumplimos la normativa y no nos llevamos ningún susto innecesario.

¿Y cuánto has tardado? ¡Nada! En un par de minutos la tienes lista. Y ya puedes estar tranquila y seguir trabajando en tu blog sin preocuparte por si cumples o no la ley de cookies en septiembre. ¡A despreocuparte completamente!




EDITADO: CÓMO PONER LA BARRA DE COOKIES ABAJO


La dichosa barrita funciona con un script que instala Google en nuestro blog, así que para modificarlo tenemos que volver a dar las órdenes de posición a blogger. Sin olvidar poner !important al final de cada una de ellas para que sepa que son prioritarias.

Para hacerlo, volvemos al primer código que instalamos:

#cookieChoiceInfo {
background-color: #8FE1D8 !important;
color: #000000 !important;
font: normal normal 12px 'Arial', cursive !important;
text-align: center !important;
text-transform: uppercase !important;
line-height: 300% !important;
}

Y añadimos:

#cookieChoiceInfo {
top: auto !important;
bottom: 0px !important;
background-color: #8FE1D8 !important;
color: #000000 !important;
ont: normal normal 12px 'Arial', cursive !important;
text-align: center !important;
text-transform: uppercase !important;
line-height: 300% !important;
}

Lo que estamos haciendo es decirle a Blogger que ahora queremos que la posición respecto a la parte superior del blog sea automática y respecto a la zona inferior de 0px. Así nuestro aviso de cookies ahora se verá en la parte de abajo del blog.

** Gracias a Aisha de Elai the Blogger por el comentario sobre poner auto en vez de el % en el valor top **



EDITADO: CAMBIAR EL TEXTO QUE APARECE EN EL AVISO DE COOKIES


¿Quieres cambiar el texto por uno más corto o con tus propias palabras? Pues te aconsejo pasar por el tutorial que ha publicado Oloman en su blog ¡super completo!


Visitar Oloblogger


Solucionado, ya puedes quitar tu aviso de cookies, personalizar los colores, tipografías, el texto y colocarlo donde te de la gana. Ya me contarás si te ha funcionado.



¿Te has quedado fuera del Curso Descubre tu Pasión para ser más Feliz?

¡Hazte YA MISMO con el EBOOK del curso en EXCLUSIVA!

SABER MÁS







¡HOLA EMPRENDEDORA!

¿Cansada de pasar tantas horas delante del ordenador sin ver resultados?


DESCARGA GRATIS MI GUÍA DE MARKETING EMOCIONAL + PLANTILLA PROFESIONAL PARA BLOGGER

Aprende a conectar con tu público ideal
¡Y DISFRUTA DE TU TIEMPO LIBRE!


RESUMEN SEMANAL


Cada Viernes Novedades en tu Correo: Últimas entradas, novedades y noticias sobre blogging, marketing y emprendimiento.


Powered by ConvertKit

Te encantará:

77 pensamientos ¡falta el tuyo! ;)

  1. Y se puede poner en la parte de abajo del blog en vez de arriba que tapa toda la cabecera? besitos

    ResponderEliminar
    Respuestas
    1. No lo he probado, los estilos están en un script interno de blogger, así que supongo que habría que entrar al script, buscar el código y cambiarlo para que aparezca en la parte de abajo, en vez de arriba :)

      Eliminar
    2. Ahora lo añado que creo que he dado con ello ;)

      Eliminar
    3. Hola, tengo un problema:

      verás, al final he podido personalizar y poner la barra abajo correctamente, pero el problema es que hay una parte que no se ve. Me explico: toda la barra está visible excepto una parte, que es la de los botones y parece que se hunde en el fondo, haciendo así que solo se pueda ver la mitad de estos. ¿Le pasa a alguien más? Y si es así, ¿Hay alguna solución para esto? Gracias. Cabe mencionar que eso también me ocurre en el mensaje de cookies de esta web.

      Eliminar
    4. ¡Hola, Carlie!

      Los códigos que tienes que modificar para conseguir que se vea bien en tu pantalla son los dos últimos que hemos añadido:

      top: 90% !important;
      bottom: 0px !important;

      Es que dependiendo del tamaño y resolución de tu monitor se verá en una línea, dos o incluso tres o cuatro, se adapta a la pantalla el ancho, así que tienes que jugar con esos valores hasta que se vea bien :)

      Eliminar
    5. Este comentario ha sido eliminado por el autor.

      Eliminar
    6. ¡Hola! Gracias por la solución, pero ¿no hay alguna manera de que el mensaje se adapte automáticamente a la resolución de cada monitor?

      Eliminar
    7. Pues eso no me ha dado tiempo probarlo, así que no sé decirte, Charlie. Tendría que probar a pasarlo todo a porcentajes y comprobarlo en diferentes monitores.

      Si encuentro la forma de hacerlo, os cuento ;)

      Eliminar
    8. Vale, pues muchísimas gracias entonces. Ya estaré atento a si encuentras alguna solución a esto. Me ha resultado muy útil tu artículo.

      ¡Un saludo!

      Eliminar
    9. Aishhhh, he intentando poner la barra en la parte de abajo introduciendo esas 2 líneas y tampoco me deja :-(

      Eliminar
    10. Prueba a borrar el código y a hacerlo de nuevo despacito, si cambia algún símbolo o lo borras sin darte cuenta, no funcionará ;)

      Eliminar
    11. Graciasss la he podido poner abajo eres una genia !!!!

      Eliminar
    12. Estupendo, así queda mucho mejor, ya que tiene que estar.... Muchísimas gracias.

      Eliminar
  2. super util....muchisimas gracias!! es el tema del dia...bss

    ResponderEliminar
    Respuestas
    1. Por eso me he puesto a toquetear, tengo un par de diseños a medias y la dichosa barrita quedaba horrorosa!

      Eliminar
  3. Woooow!!! estas en todo Celia, por eso me gusta leer tu blog porque tratas de tenernos la información mas actualizada y las más útil!!! :D SALUDOS!!!

    ResponderEliminar
    Respuestas
    1. ¡Muchas gracias!

      Me alegra que te haya sido útil ;)

      ¡Feliz martes!

      Eliminar
  4. Perfecto, justo me estaba preguntado eso.

    Una cosa, a mi tu barra de cookies me sale demasiado abajo y los dos botones no se ven del todo :-)

    ResponderEliminar
    Respuestas
    1. Claro, supongo que depende del monitor para que se vea más o menos abajo.

      En mi pantalla el texto y los botones se ve en dos líneas, pero si la pantalla es más grande se verá solo en una o si es más pequeña puede que en tres o cuatro.

      Quiero probar en otros monitores para encontrar un término medio en estos días ;)

      ¡Así que gracias por comentármelo! :D

      Eliminar
    2. Los códigos que tienes que modificar para conseguir que se vea bien en tu pantalla son los dos últimos que hemos añadido:

      top: 90% !important;
      bottom: 0px !important;

      Eliminar
  5. ¡Qué bien me ha venido leer éste post!
    Hoy hay un revuelo por las redes sociales de aúpa, pero nadie tenía la solución. Era de esperar que la tuvieses tú. Nos sacas de cada apuro...
    ¡Mil gracias Celia!
    Lo comparto.

    ResponderEliminar
  6. ¡Hola, guapa!

    Me alegra que te sea útil ¡y muchas gracias por compartirlo!

    La verdad es que blogger nos ha hecho un favor poniéndolo automáticamente para que cumplamos con la normativa... ¡pero es que era horrorosa! jajaja

    ¡Feliz martes! ^^

    ResponderEliminar
  7. Genial como siempre. Casi eres mas rapida que google...jaja. un beso.

    ResponderEliminar
    Respuestas
    1. Se nota que estoy en el pueblo con los abus jajajaja

      ¡¡Besitos, preciosa!! ^^

      Eliminar
  8. Gracias!!! tengo que intentarlo.
    Besos

    ResponderEliminar
    Respuestas
    1. ¡Ya me contarás si lo consigues, Cristina!

      Feliz martes :)

      Eliminar
  9. Muchas gracias por el tuto, me había estado peleando con la dichosa barra pero desde otra parte del código html y por eso no me funcionaba :)

    Es que jolines, al menos podrían haberlo puesto mono y discreto... jaajaajaja.
    De todas formas, lo he encontrado un abuso por parte de blogger y google. Ponerlo así, a bocajarro, sin preguntar y sin pedir permiso, sinceramente.

    Besos!!!

    ResponderEliminar
    Respuestas
    1. Bueno, no hay que olvidar que Blogger es de Google y es una ley que debemos cumplir. Y está el detalle de que... nuestro blog en blogger nunca será nuestro del todo realmente, pertenece a Google que por una parte mola pero por otra... te encuentras sorpresitas de vez en cuando jejeje

      Aunque en realidad nos han hecho un favor, ahora tenemos el aviso oficial de Google, así que seguramente que la "limpia" que estén preparando para septiembre no nos afectará para nada :)

      ¡¡Besitos, guapa!!

      Eliminar
  10. Hola, Celia:
    Yo busco /*header, pero no lo encuentro, ni con ctrl+F ni de forma visual, ¿Es esa la forma de escritura única, o hay otra versión?
    Gracias!

    ResponderEliminar
    Respuestas
    1. ¡Hola, guapa!

      Poniendo el código justo encima de ]]>

      También debería funcionar. En el tutorial lo ponemos dentro de Header para que esté más ordenadito, pero si te da problemas la búsqueda, prueba a buscar ]]> y ponerlo justo encima :)

      Ya me cuentas ¡feliz tarde!

      Eliminar
  11. ¡¡Muchísimas gracias, Celia!!
    www.depoetasypiratas.blogspot.com.es

    ResponderEliminar
  12. Muchas gracias Celia!! Estoy en plrno diseño del blog y que esté toda la información actualizada me gusta.
    Una última duda: tienes algún tuto para poner el gadget de bienvenida cómo lo tienes tú?? Con tu foto y una breve descripción.
    Mil gracias ;)

    ResponderEliminar
    Respuestas
    1. Y yo es que simplemente no la veo. No puedo ver si la cambio bien o no porque no está.

      Eliminar
    2. Eso es porque seguramente hayas aceptado el mensaje y ya a ti no vuelve a aparecerte.
      Prueba a abrir una ventana en modo incógnito, abre tu blog y así puedes personalizarla con ella en pantalla.

      Lo del gadget de presentación solo es una imagen con texto debajo en un gadget HTML/Javascript, pero no tengo ningún tutorial del paso a paso, lo siento :(

      ¡Gracias a ti y feliz tarde!

      Eliminar
  13. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
  14. Hola guapa, estoy intentando personalizar la barrita y tengo algunos problemas.
    He conseguido cambiar el tipo de letra sin problema, pero el color de fondo de la barra por más que trato de sustituir el que viene por defecto por el #ccfbd4 que es el de mi blog y no hay manera, me sigue saliendo gris oscura. Tampoco consigo cambiar el color de fondo y la letra de los botones para ponerlos al revés, fondo blanco y letra negra :-(
    Mil gracias.

    ResponderEliminar
    Respuestas
    1. ¡Hola, guapa!

      Si te cambia el tipo de letra tiene que cambiarte los colores, fíjate que estás poniendo el código exactamente igual y que estás cambiando solamente el código de color, respetando los ; que van detrás de !important no delante :)

      Si sigue sin salirte, bórralo y vuelve a empezar, porque el código funciona :)

      ¡Gracias a ti!

      Eliminar
  15. Mi problema es que yo estoy fuera de Europa y no me deja ver la barra en mi blog. No puedo añadir el .com.es porque tampoco me deja ya que mi dominio es propio y no de blogspot. Me encantaría modificar mi barra y cambiarla hacia abajo, pero al no poder verla no voy a poder jugar mucho con eso. Si existiera una solución?

    ResponderEliminar
    Respuestas
    1. ¡Hola, Susie!

      Buf, pues lo siento mucho, pero en eso si que no puedo ayudarte, guapa :(

      Mira en los foros de Google dedicados a blogger a ver si alguien puede darte alguna solución ;)

      Eliminar
  16. Muchas gracias!, eres una crack.
    Besos y disfruta de las vacaciones :)

    ResponderEliminar
  17. Hola, A mi me pasa parecido a Miss Potingues... no veoo nada ni /*.... ni ]]*..... nada, incluso me dejo los ojos buscando por donde puede estar, pero nada

    ResponderEliminar
    Respuestas
    1. ¡Hola, Charo!

      ¿Has hecho click dentro del cuadro del código de tu plantilla antes de abrir el buscador?

      Es que si no haces click, lo que se abre es el buscador del navegador, arriba del todo a la derecha. Para que se abra el interno de blogger tienes que hacer click dentro del código antes de pulsar control + f, así se abre un buscador pequeñito dentro del cuadrado del código, arriba a la derecha y ya si que busca realmente en todo el código de la plantilla :)

      Comprueba que lo estás haciendo así, porque esos códigos están en todas las plantillas ;)

      ¡Ya me cuentas!

      Eliminar
  18. Muchísimas gracias, me ha venido muy bien para que quede mejor con los colores del blog.

    ResponderEliminar
  19. Listo!! Ha quedado perfecto (eso creo xD). Muchas gracias por el tutorial, te dejo el link para que le eches un ojo: http://lashistoriasdetahis.blogspot.com.es/

    ResponderEliminar
  20. Genial Celia!!
    Menos mal que estoy suscrita al blog!! Me ha venido de perlas, ya te he compartido el post en Twitter. ^^
    Saludos!! <33

    ResponderEliminar
  21. Gracias Celia, hoy acabo de encontrarme con esa barra gris en el blog y no me gusta nada ocupa muchisimo y en ese color queda fatal, asi que mañana pruebo a cambiarlo ;)

    ResponderEliminar
    Respuestas
    1. Pues el texto también puede cambiarse si te parece demasiado largo, en la página de facebook de Carmen, de Milowcostblog tienes un tutorial enlazado de cómo hacerlo ;)

      ¡Besos!

      Eliminar
    2. Acabo de ponerlo usando tus códigos y de momento he dejado el mismo color, ya haré pruebas, y miraré lo de acortar el texto, gracias

      Eliminar
  22. Genial!!! A ver si pruebo. La verdad es que la barrita es más fea que un pie. Jejeje.

    ResponderEliminar
    Respuestas
    1. Horrorosa... entre los colores y el tipo de letra se han lucido jajaja

      ¡Besos!

      Eliminar
  23. Tengo una pequeña duda, a ver si me puedes ayudar: para empezar he prescindido del aviso propio que puse y he optado por dejar el de blogger cambiando un par de cosas, entre ellas el enlace. Pues bien, desde hace tiempo uso shadowbox, y el aviso de cookies hasta ahora lo mostraba con shadowbox, más que nada porque lo tenía en un documento html en dropbox para evitar tener que crear otra página estática, mi pregunta es: ¿hay alguna forma para poder seguir usando shadowbox y poderme deshacer de la página estática?

    Mil gracias y un saludo!

    ResponderEliminar
    Respuestas
    1. ¡Hola, Fran!

      Pues no sé decirte, supongo que modificando el código se podría hacer para que se abriese en vez de en una página nueva en modo sandbox, si encuentro cómo hacerlo, os cuento :)

      ¡Gracias a ti! :)

      Eliminar
  24. Bueno, yo ya tenía un mensajito avisando del uso de cookies, pero lo quité y dejé el de blogger con modificaciones de estilo de acuerdo a lo que explicas en esta entrada. Muchísimas gracias.

    ResponderEliminar
  25. Hola Celia. ¡Hecho! Muchísimas gracias por tu información, y no ya solo de cómo instalar la barra, sino de las precauciones que hay que tomar siempre que hagamos algún tipo de cambio en la plataforma de Blogger.

    Un saludo.

    ResponderEliminar
    Respuestas
    1. Me alegra mucho que te haya sido útil ;)

      ¡Saludos!

      Eliminar
  26. Muchas gracias Celia, me ha quedado la barrita muy chula con todas tus explaciones, así da gusto empezar en este mundillo.

    ResponderEliminar
  27. Hola Celia:
    Gracias a Chechu Rebota te he conocido...y con tu permiso me quedo por aquí.
    Darte las gracias por compartir tus conocimientos y por lo bien que lo explicas además,...yo ya tengo mi barra modificada siguiendo tus pasos.
    Un abrazo.

    ResponderEliminar
  28. Para no pillarme las manos me quedo con la de Google por si las moscas, y como se puede personalizar mejor que mejor, asi que yo ya tengo mi barrita a juego con mi blog, jiji, y como de momento no veo forma de poder modificar el ancho, he subido mi botón de 'subir arriba'. Gracias Celia!!!

    ResponderEliminar
  29. Muchísimas gracias, Celia, en este caso por partida doble: por una parte por tus geniales explicaciones de cómo personalizar el aviso (he conseguido todo, salvo lo de cambiar el texto del mensaje, por más que he leído totalmente el post de Oloblogger también); y por otra, porque hace algún tiempo te pregunté sobre cómo personalizar el blog con blondas y veo que aparece en uno de los tutoriales. Mil gracias. Por cierto, disfruta de esas benditas vacaciones en el pueblo. Un abrazo.

    ResponderEliminar
  30. Jolines Celia, no se te resiste una!
    Ya lo tengo en el blog, ahora voy a cambiar el texto que me apetece ponerle algo gracioso :)

    ResponderEliminar
  31. Hola buenas, una duda, no se podría poner lo mismo pero a la parte de abajo de la pantalla??? Gracias!

    ResponderEliminar
    Respuestas
    1. ¡Hola, Carlos!

      Al final de la entrada, en la primera edición del tutorial, tienes cómo hacerlo ;)

      EDITADO: CÓMO PONER LA BARRA DE COOKIES ABAJO

      ¡Gracias a ti! :)

      Eliminar
    2. Que bien, mil gracias!!!!
      Te lo curras :)

      Eliminar
  32. Quizás con este diseño animado guste más ;) (podéis verlo en accion en www.gisp.tk)

    #cookieChoiceInfo {
    background: rgba(20,20,20,0.8) !important;
    color: #CCC !important;
    font-size: 10px !important;
    font-weight:normal !important;
    top: auto !important;
    bottom: 0 !important;
    border-top: 1px #484848 solid !important;
    padding: 0 !important;
    box-sizing: border-box;
    transform:scale(1.0,1.0);
    -webkit-animation: myfirst 1500ms; /* Chrome, Safari, Opera */
    animation: myfirst 1500ms;
    opacity: 1.0;
    }


    /* Chrome, Safari, Opera */
    @-webkit-keyframes myfirst {
    0% {bottom: -100px; opacity: 0.2;}
    100% {bottom: 0px; opacity: 1.0;}

    }

    /* Standard syntax */
    @keyframes myfirst {
    0% {bottom: -100px; opacity: 0.2;}
    100% {bottom: 0px; opacity: 1.0;}
    }




    .cookie-choices-text {
    display: inline-block !important;
    vertical-align: middle !important;
    font-size: 14px !important;
    margin: 5px 10px !important;
    color: #ccc !important;
    max-width: 800px !important;
    text-align: left !important;
    line-height: 20px !important;

    }

    #cookieChoiceInfo a {
    display: inline-block;
    background: #444;
    padding: 8px;
    border-radius: 8px;
    box-shadow: 1px 1px 8px #484848;
    border: 2px #000 solid;
    text-shadow: 1px 1px 2px #000;
    }
    #cookieChoiceInfo a:nth-child(2) {
    background: #11dc60;
    }
    .cookie-choices-button {
    font-weight: bold;
    text-transform: none !important;
    white-space: nowrap;
    color: #eee;
    margin-left: 8px;
    padding: 0 6px;
    text-decoration: none;
    }

    ResponderEliminar
    Respuestas
    1. ¡Muchas gracias por el aporte, Sergio!

      ¿Tienes algún tutorial con el paso a paso? Para enlazarlo a la entrada que aquí queda muy largo y sin explicaciones ni nada ;)

      ¡Buenas noches!

      Eliminar
  33. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
  34. De maravilla, me molestaba ese aviso y hoy por fin lo quité, graciassss

    ResponderEliminar



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



El Perro de Papel es una Marca propiedad de Celia Espada García debidamente registrada en la OEPM, Modalidad M, Número 3527002 (0). Todos los recursos creados por Celia Espada García están correctamente protegidos y vinculados a la autora y no pueden usarse sin consentimiento previo.

Safe Creative #1408270134965
Los derechos de autor y propiedad intelectual del material compartido, tanto gratuitamente como de pago, en esta web y sus redes sociales pertenecen a "El Perro de Papel", exceptuando las referencias a otros creadores, los cuales están debidamente citados en los créditos.