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í:
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;
}
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!
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;
}
¿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.
¿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 **
** 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!
¡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.
Y se puede poner en la parte de abajo del blog en vez de arriba que tapa toda la cabecera? besitos
ResponderEliminarNo 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 :)
EliminarAhora lo añado que creo que he dado con ello ;)
EliminarHola, tengo un problema:
Eliminarverá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.
¡Hola, Carlie!
EliminarLos 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 :)
Este comentario ha sido eliminado por el autor.
Eliminar¡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?
EliminarPues 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.
EliminarSi encuentro la forma de hacerlo, os cuento ;)
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.
Eliminar¡Un saludo!
Aishhhh, he intentando poner la barra en la parte de abajo introduciendo esas 2 líneas y tampoco me deja :-(
EliminarPrueba 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á ;)
EliminarGraciasss la he podido poner abajo eres una genia !!!!
Eliminar¡Genial, Moni! Me alegro mucho :)
EliminarEstupendo, así queda mucho mejor, ya que tiene que estar.... Muchísimas gracias.
Eliminar¡Gracias a ti, guapa! :)
Eliminarsuper util....muchisimas gracias!! es el tema del dia...bss
ResponderEliminarPor eso me he puesto a toquetear, tengo un par de diseños a medias y la dichosa barrita quedaba horrorosa!
EliminarWoooow!!! 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¡Muchas gracias!
EliminarMe alegra que te haya sido útil ;)
¡Feliz martes!
Perfecto, justo me estaba preguntado eso.
ResponderEliminarUna cosa, a mi tu barra de cookies me sale demasiado abajo y los dos botones no se ven del todo :-)
Claro, supongo que depende del monitor para que se vea más o menos abajo.
EliminarEn 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
Los códigos que tienes que modificar para conseguir que se vea bien en tu pantalla son los dos últimos que hemos añadido:
Eliminartop: 90% !important;
bottom: 0px !important;
¡Qué bien me ha venido leer éste post!
ResponderEliminarHoy 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.
¡Hola, guapa!
ResponderEliminarMe 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! ^^
Genial como siempre. Casi eres mas rapida que google...jaja. un beso.
ResponderEliminarSe nota que estoy en el pueblo con los abus jajajaja
Eliminar¡¡Besitos, preciosa!! ^^
Gracias!!! tengo que intentarlo.
ResponderEliminarBesos
¡Ya me contarás si lo consigues, Cristina!
EliminarFeliz martes :)
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 :)
ResponderEliminarEs 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!!!
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
EliminarAunque 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!!
Hola, Celia:
ResponderEliminarYo 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!
¡Hola, guapa!
EliminarPoniendo 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!
Gracias, guapa!
EliminarUn abrazo!
¡¡Muchísimas gracias, Celia!!
ResponderEliminarwww.depoetasypiratas.blogspot.com.es
¡Me alegra que te haya sido útil, Elisa! :D
EliminarMuchas gracias Celia!! Estoy en plrno diseño del blog y que esté toda la información actualizada me gusta.
ResponderEliminarUna ú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 ;)
Y yo es que simplemente no la veo. No puedo ver si la cambio bien o no porque no está.
EliminarEso es porque seguramente hayas aceptado el mensaje y ya a ti no vuelve a aparecerte.
EliminarPrueba 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!
Este comentario ha sido eliminado por el autor.
ResponderEliminarHola guapa, estoy intentando personalizar la barrita y tengo algunos problemas.
ResponderEliminarHe 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.
¡Hola, guapa!
EliminarSi 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!
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¡Hola, Susie!
EliminarBuf, 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 ;)
Muchas gracias!, eres una crack.
ResponderEliminarBesos y disfruta de las vacaciones :)
¡Muchas gracias, guapa!
EliminarBesos :)
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¡Hola, Charo!
Eliminar¿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!
Muchísimas gracias, me ha venido muy bien para que quede mejor con los colores del blog.
ResponderEliminar¡Me alegro mucho, Chechu! ^^
EliminarListo!! 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¡Genial! :)
EliminarGenial Celia!!
ResponderEliminarMenos mal que estoy suscrita al blog!! Me ha venido de perlas, ya te he compartido el post en Twitter. ^^
Saludos!! <33
¡Muchas gracias, Sandra! :D
EliminarGracias 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 ;)
ResponderEliminarPues 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 ;)
Eliminar¡Besos!
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
EliminarGenial!!! A ver si pruebo. La verdad es que la barrita es más fea que un pie. Jejeje.
ResponderEliminarHorrorosa... entre los colores y el tipo de letra se han lucido jajaja
Eliminar¡Besos!
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?
ResponderEliminarMil gracias y un saludo!
¡Hola, Fran!
EliminarPues 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! :)
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¡Genial! :)
EliminarHola 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.
ResponderEliminarUn saludo.
Me alegra mucho que te haya sido útil ;)
Eliminar¡Saludos!
Muchas gracias Celia, me ha quedado la barrita muy chula con todas tus explaciones, así da gusto empezar en este mundillo.
ResponderEliminar¡Muchas gracias!
EliminarY bienvenida ;)
Hola Celia:
ResponderEliminarGracias 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.
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!!!
ResponderEliminarMuchí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.
ResponderEliminarJolines Celia, no se te resiste una!
ResponderEliminarYa lo tengo en el blog, ahora voy a cambiar el texto que me apetece ponerle algo gracioso :)
Hola buenas, una duda, no se podría poner lo mismo pero a la parte de abajo de la pantalla??? Gracias!
ResponderEliminar¡Hola, Carlos!
EliminarAl 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! :)
Que bien, mil gracias!!!!
EliminarTe lo curras :)
Quizás con este diseño animado guste más ;) (podéis verlo en accion en www.gisp.tk)
ResponderEliminar#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;
}
¡Muchas gracias por el aporte, Sergio!
Eliminar¿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!
Este comentario ha sido eliminado por el autor.
ResponderEliminarDe maravilla, me molestaba ese aviso y hoy por fin lo quité, graciassss
ResponderEliminar