5/2/15

Como poner la barrita de cookies en blogger

No me suele gustar publicar sobre cosas que ya han sido publicadas tropecientas veces en otros lados.

Ojo, seguro que lo hago, pues realmente no leo otros blogs sobre mi temática, pero si algo sé o intuyo que ya lo han publicado mil sitios más, pues trato de evitarlo, porque para qué.

Si es algo tipo el post sobre si es mejor blogger o worpdress, pues sí, porque al final yo doy mi punto de vista (pues "mejor" es algo supersubjetivo), pero eso, algo como lo del aviso de cookies... no tiene mucho sentido.

Sin embargo me lo habéis pedido bastantes veces. No sé si porque no habéis buscado cómo hacerlo, o no lo habéis entendido o porque no os gustaba la barrita (muy probable), así que vengo con un tutorial.

La barrita en cuestión es lo más mona y discreta que puede ser dentro de lo que cabe. La ví en un blog, me gustó y le "robé" el código de su código fuente... :P

Si no os gusta, buscad por la web que encontraréis muchas más. Pero a mi esta me parece muy mona :)

Es superfácil de poner. Vamos allá...

Cómo poner el aviso de cookies en blogger


  1. Ir a nuestra plantilla y dentro del body pegar el código.
  2. Guardar

Pero que no cunda el pánico, que ahora lo explico más detenidamente y además os pongo el código y os digo también qué podéis cambiar.

Paso 1)

Vamos a Plantilla - Editar HTML

Paso 2)

Pincháis en algún sitio dentro de la plantilla y luego le dais a Ctrl+F. Así os sale el cuadradito de buscar.

Escribís </body> y le dais a Intro. Y os lo encuentra.

Ahí es donde vais a tener que pegar vuestro código.

Así:


Paso 3) 

Una vez pegado, le dais a Guardar plantilla y... ¡tachán! Ya está en vuestro blog.

Fijaos abajo:


El código:

El código que yo he puesto me pone la barrita gris, el "botón" del Ok en rosa, y el más información en blanco, pero podéis personalizarlo para que vaya con vuestro blog.

El código del ejemplo es este:

<!--Inicio Ley cookies PdB-->
<div id='barracookies' style='display:none;position:fixed;left:0px;right:0px;bottom:0px;width:100%;min-height:20px;background: #D3D3D3;color:#a2a2a2;z-index: fcaaaa;'>
<div style='width:100%;position:absolute;padding-left:4px;font-family:verdana;font-size:11px;top:20%;text-align:center;'>
<span>Usamos cookies propias y de terceros para ayudarte en tu navegación. Si continuas navegando consideramos que aceptas el uso de cookies.</span>
<a href='javascript:void(0);' onclick='PonerCookie();' style='padding:4px;background:#fcaaaa;text-decoration:none;color:#ffffff;border-radius:5px;'><b>OK</b></a>
<a href='http://personalizaciondeblogs.blogspot.com/p/cookies.html' rel='nofollow' style='padding-left:5px;text-decoration:none;color:#ffffff;' target='_blank'>Más información</a>
</div>
</div>
<script> 

 function getCookie(c_name){ 
  var c_value = document.cookie; 
  var c_start = c_value.indexOf(" " + c_name + "="); 
  if (c_start == -1){ 
  c_start = c_value.indexOf(c_name + "="); 
  } 
  if (c_start == -1){ 
  c_value = null; 
  }else{ 
  c_start = c_value.indexOf("=", c_start) + 1; 
  var c_end = c_value.indexOf(";", c_start); 
  if (c_end == -1){ 
   c_end = c_value.length; 
  } 
   c_value = unescape(c_value.substring(c_start,c_end)); 
  } 
  return c_value; 
 } 
 function setCookie(c_name,value,exdays){ 
  var exdate=new Date(); 
  exdate.setDate(exdate.getDate() + exdays); 
  var c_value=escape(value) + ((exdays==null) ? "" : "; expires="+exdate.toUTCString()); 
  document.cookie=c_name + "=" + c_value; 
 } 
 if(getCookie('aviso')!="1"){ 
  document.getElementById("barracookies").style.display="block"; 
 } 
 function PonerCookie(){ 
  setCookie('aviso','1',365); 
  document.getElementById("barracookies").style.display="none"; 
 } 
 </script>
<!--Fin Ley Cookies PdB-->

Os he puesto en rosa lo que tenéis que cambiar:

#D3D3D3 → es el color gris de toda mi barrita
#a2a2a2 → es el color gris más oscuro de la fuente del texto
Usamos cookies... → aquí podéis poner otro texto si preferís

#fcaaaa → es el color rosa de la zona que rodea al Ok
#ffffff → es el color del Ok
OK → aquí podríais poner Yes o Sí o lo que queráis

http://personali... → aquí podéis poner el link a una página de vuestro blog explicándolo
#ffffff → este último blanco es el color de donde dice Más información
Más información → aquí podríais poner Leer más o lo que queráis

Nota I: 

Bueno, por poder cambiar podéis cambiar más cosas. Como la fuente (ahí está verdana), lo redondo que está el "botón" del ok, la posición de la barrita, etc. pero yo creo que con esto está mona así que no la tocaría. Simplemente los colores y el texto ;)

Nota II: 

lo normal es que las únicas cookies que uséis sean las de AdSense si tenéis y las de vuestras estadísticas.

Si usáis un servicio de estadísticas que no sea Google Analytics, tendréis que redactar (o sea, copiar y versionar de otro blog jaja) una página en la que lo expliquéis. Si solo usáis las de Google, os vale con poner en link a la página de ayuda de Google en el que lo explican.

Y creo que con esto estaría todo. Espero que os haya sido útil. 

Blogger | Email  | RSS Bloglovin' | Feedly 

Enlaces relacionados: 

Únete a mi newsletter para recibir cada semana un resumen con trucos y recursos

76 comentarios

  1. Muy bonita la barrita, pero dime para que sirve, porque todas las webs estan como locos poniendola y avisando sobre "Nueva politica de cookies"... Si es util y vale la pena tenerla, y si no seria sobrecargar el codigo del blog y ralentizar la carga de la pagina.
    Un saludo)

    ResponderEliminar
    Respuestas
    1. Si es útil o vale la pena es relativo.

      En principio es obligatorio de acuerdo a la AGPD. Una ley dice que en todo sitio web que haya cookies se debe informar al usuario y este debe aceptarlo

      De ahí la barrita o el aviso. Avisas a tus usuarios de que hay cookies y de que lo acepten si quieren seguir navegando.

      Es poco probable que te multen en tu blog, pero la Agencia te puede multar. Se han visto casos de multas de hasta 30.000 euros en algunas webs por no avisar o cumplir con esto

      Muah!

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

    ResponderEliminar
  3. ¡Blanca mil gracias!, sí que lo había visto en otros sitios, pero yo prefiero que me lo expliques tu que me gusta más ; )

    Además eres un poco brujilla, has llegado en el momento preciso con este post, el mundo blogger está revolucionado por el post de ayer de superyuppies y la LOPD.

    Ahora mismo comparto a tope.

    Un Beso.

    ResponderEliminar
  4. Pero, ¿para qué sirve esta barrita? Yo, al igual que Olga, estoy perdida...

    ResponderEliminar
    Respuestas
    1. Sara, para avisar a los usuarios de que en tu blog hay cookies.

      Lee lo que le he contestado a Olga

      Besos

      Eliminar
  5. Hola Blanca. Mil gracias por tus explicaciones. Soy novata en blog y gracias a tus indicaciones mi blog va cogiendo forma. En alguna entrada te he leído "tan fácil como es hacer esto que me da vergüenza explicarlo" (o algo parecido), pues yo te agradezco enormemente que lo cuentes!!!! Te expresas de manera muy clara y haces que seguirte sea muy fácil.

    Ya tengo mi barrita de cookies instalada! http://jarandilladulce.blogspot.com.es/

    Gracias! Besos.

    ResponderEliminar
    Respuestas
    1. Pues no está mal, pero tendrías que cambiar el enlace a "más información"

      Eliminar
  6. Hola ya lo tengo puesto. Tengo una duda si le pinchas en ok, cierras la pestaña y vuelves a entrar ya no te lo pregunta otra vez???

    Muchas gracias, por esta ayudita.

    ResponderEliminar
  7. Pues yo vengo a decirte que pasa, si cuando en tu código HTML no te encuentra body (con las flechitas, es que no me deja escribirlo en el comentario). Madreeeee la que ha liado el pollito, jaja. Gracias mil

    ResponderEliminar
    Respuestas
    1. Realmente también se puede incorporar justo delante de la etiqueta de cierre head. Al menos con otros códigos que permiten personalizar el aviso.

      Eliminar
  8. Como siempre un muy buen tutorial y muy útil, fácil de hacer siguiendo tus instrucciones, gracias por compartir!

    ResponderEliminar
  9. La había visto puesta en muchos blogs pero no había leido en ninguno como ponerla la verdad. Esta tarde la instalaré que no creo que justo vayan a comprobar mi blog para ver si la tiene, pero la idea de una multa como la que has mencionado en comentarios... me da miedito! jajaja
    Un saludo :)

    ResponderEliminar
  10. gracias! lo habia visto en otros blogs, pero tu lo has explicado de forma tan facil que no me ha dado nada de pereza hacerlo.

    ResponderEliminar
  11. Muchas gracias Blanca! Hecho! ;-D aixxx...que haría yo sin tus consejos...y tutoriales!! Un beso guapa

    ResponderEliminar
  12. Gracias Blanca!! yo andaba diciendo lo tengo que poner....y la verdad que hasta que tu no lo has publicado no me he animado jeje.Besos!!

    ResponderEliminar
  13. Tengo una duda.. hay que añadir algo para que aparezca algo tambien en la version movil?porque en la version móvil no me aparece. Gracias!!!

    ResponderEliminar
  14. Blanca, cuando entro en este blog (Personalización de blogs) no me sale esa barrita informativa.
    También te quería preguntar una cosa que me confunde: Cuando entro en mi cuenta de blogger, sí que me sale una barra informativa en mis blogs avisándome de cookies. Yo pensaba que el uso de la barrita era por parte de blogger hacia los autores de blogs para avisar de estadísticas y no para usuarios. ¡Qué lío!

    ResponderEliminar
  15. Pues a mí sí me gusta que publiques este tipo de entradas porque no leo ningún otro blog de tu misma temática y, como yo, muchas más personas. Besos y gracias por lo muchísimo que nos ayudas a todos.

    ResponderEliminar
  16. Qué fácil que lo haces todo! Ya tengo mi barrita de cookies en mi recién estrenado blog. Muchas gracias!

    ResponderEliminar
  17. Buenas!!
    Como siempre muchísimas gracias!! Sólo una cosita, no se cual es el enlace de google en el que lo explican, y que entiendo deberían de salir cuando le dieran a mi boton de más información... Como estoy un perdida con este tema, podrías indicarmen cuál es la dirección web que tengo que enlazar?? gracias!!

    ResponderEliminar
    Respuestas
    1. Ay que no había puesto el enlace.

      Esta es la url: http://www.google.es/intl/es-419/policies/technologies/types/

      Beso!

      Eliminar
  18. Que suerte que encontré tu explicación. Ya puse logré hacer todos los pasos y solo cambié el color del fondo de tu ejemplo por mi fondo que es marrón y con el resto, rosa y etc... quedó genial. Solo tenía preocupación pues cuando encontré el "body" no sabía si pegarlo inmediatamente a continuación en el mismo renglón o dejar espacio,(lo hice pegado en el mismo renglón)... cosas de boba, pero quizás sea bueno que le sirva a alguien este comentario. Que miedito me dio tocar la plantilla y por supuesto pero no está más repetirlo, guardé copia de seguridad antes. Muchas gracias por todo!!! Abrazo

    ResponderEliminar
    Respuestas
    1. Fijate que en los pasos dice pegar DENTRO de body

      Nota: sustituyo los < > por comillas

      El cuerpo (body) de la web (blog) comienza donde dice "body" y termina donce dice "/body"

      Como nosotras hemos buscado "/body", tenemos que pegar el código antes de eso

      Yo lo suelo poner en la línea justo anterior

      Pego código
      "/body"

      Guardar

      Esta explicación te servirá para otras veces.

      Beso!

      Eliminar
  19. Hola Blanca, soy nueva en blog y aunque me esta costando darle forma, poco a poco le agrego cositas, se que me falta mucho por añadir y cambiar, pero bueno no tengo prisa, a veces lo que me falta es tiempo, pues cualquier añadido me lleva mucho rato, pero con paciencia lo lograre, te doy las gracias por todos tus consejos y ayudas...
    Ya quite las entradas Atom y hoy por fin, he conseguido instalar mi barrita de cookies...mi blog es muy sencillo. hhtp://dulcescaseroslacanelita.blogspot.com.es/
    te reitero las gracias...
    Un besito

    ResponderEliminar
  20. Acabo de poner la barrita... no me encontraba el codigo el buscador, pero estaba alli. Menos mal que he fijado que esta al final de la lista, asi que lo encontre rapido.
    Muy bonita la barra, casi ni se nota, finita y me gusta)
    Muchas gracias.

    ResponderEliminar
  21. Me ha servido de mucha ayuda.
    ¡Gracias!

    ResponderEliminar
  22. Muchísimas gracias por este post, me ha resultado muy útil, y muy fácil de seguir.
    Un abrazo!

    ResponderEliminar
  23. Hola Blanca

    He seguido tus consejos y todo perfecto... gracias.

    El problema que tengo es que me gustaría cambiar el color y la fuente y aunque has comentado qué retocar para hacerlo no sé cómo cambiar, por ejemplo, el color.

    Dices:

    "#D3D3D3 → es el color gris de toda mi barrita"

    Y lo que yo te pregunto es, ¿ cómo elijo el color y cómo lo varío ?

    ResponderEliminar
    Respuestas
    1. Este comentario ha sido eliminado por el autor.

      Eliminar
    2. Puedes copiar el codigo del color en esta pagina: http://html-color-codes.info/codigos-de-colores-hexadecimales/ hay un cuadro y una barra de color solo pinchas en el color que prefieras, copias el codigo que esta junto a ''#'' , vas a tu plantilla y borras ''D3D3D3'' y pegas el codigo alli.

      Eliminar
  24. Quedo muy bien posicionado, muchas gracias :)

    ResponderEliminar
  25. Hola Blanca, antes que nada muchas gracias por tu ayuda.
    Quería preguntarte si al utilizar este código, automáticamente se borra la barra de aviso de cookies que está poniendo Google de forma automática o si aparecerían las dos? Lo pregunto porque ahora tu barra de cookies ya no sale más al pié del blog, sino que solamente aparece la barra de Google en la cabecera. Sabes cómo solucionar este problema? Nuevamente muchas gracias!!

    ResponderEliminar
    Respuestas
    1. Hola! No soy Blanca pero quizás te sirva mi respuesta ya que yo ayer hice el tutorial de Blanca y hoy google me ha puesto su aviso...así que en mi blog están los dos!! :( Siguiendo este tutorial es muy fácil y queda muy bien, pero no está optimizado para móviles y la barra no sale entera...
      A ver si Blanca nos hace un tutorial sobre cómo modificar el que Google ha puesto por defecto o cómo hacer que el de este tutorial se vea bien en dispositivos móviles! ;p

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

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

      Eliminar
  26. Blanca:
    Me gusta tu blog y cómo explicas.
    Pero en este post dices:
    «El código que yo he puesto me pone la barrita gris, el "botón" del Ok en rosa...»
    Pero la realidad es que no hay ninguna barrita de cookies en tu blog.

    Veré dónde conseguir información.
    Mi problema es que Google me dice:

    «Hemos añadido un aviso a tu blog para explicar (blablá)... Es tu responsabilidad comprobar que dicho aviso se muestre...»

    Pero lo que compruebo es que Google no me añadió ningún aviso.
    Mi blog es http://poesiasyvivenciaspoesias.blogspot.com.ar/ y no puse ninguna propaganda.

    Si sabes de algo, te pido me ayudes. Gracias de antemano.
    Mi saludo cordial desde Mar del Plata, Argentina.

    ResponderEliminar
  27. Hola Blanca! Me quedo muy bien, muchas gracias! Me preguntaba si podías pasar por mi blog y ver si esta todo bien o ver si hay algo que podría mejorarse, siento que esta muy cargado! http://resenasresenasresenasjuveniles.blogspot.com.ar/ Capaz que no soy la única que te pregunta esto y debes estar cansada, pero no se a quien pedirle un consejo!! Saludosss!

    Ailen

    ResponderEliminar
  28. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
  29. Muuuchaas gracias, tomo el código para colocarlo en mi blog. Mil Gracias por todos los consejos que nos das de Blogger ^^

    Saludos y besitos.

    ResponderEliminar
  30. OOOOH¡ Muchisisisisisimas Gracias¡ Me pusieron un anuncio sobre cookies de la UNION EUROPEA y me espante¡ Dijeron que tenia que poner el anuncio de cookies¡ Pero gracias a ti¡ Ahora lo tengo¡ Gracias¡¡ http://this-is-my-beautifullife.blogspot.mx/

    ResponderEliminar
  31. Hola, gracias a ti pude poner la barra en mis blogs, lo unico es que google ha puesto la suya y ahora en uno de ellos me aparecen dos barras, la de google y la tuya, en otro blog no aparece ninguna, compruebo html y esta guardada la tuya pero no se ve. Menudo lio tengo. He escrito a google pero no me responden. No se que pueddo hacer. Si me pudieras echar una mano te lo agradeceria.
    Un saludo.

    ResponderEliminar
  32. Hola. Hace unos días, en Blogger, me apareció un cartel que decía que debía de poner un cartel en mi Blogs advirtiendo sobre las Cookies. La verdad es que lo había visto en otros Blogs, pero no tenía ni la menos idea de cómo ponerlo.
    Muchas gracias por tu super tutorial, muy fácil y practico.

    Un beso.

    ResponderEliminar
  33. Perfecto muy bien explicado y la barrita me gustó mucho que estuviera al final, solo cambié el color de fondo de la barrita a negro y el color de fondo del ok a rojo para ue combine con los colores de los menus y quedó de lujo. ¡Muchas Gracias!

    ResponderEliminar
  34. Hola, Blanca, disculpa la molestia.
    En caso de que éste usando otras extensiones en algunos de mis blogs (por ejemplo el SCM music player) ¿es necesario poner el blog en el cuál tenga que explicar todas esas cosas de los cookies?

    ResponderEliminar
  35. Hola Blanca, muchas gracias, me sirvio de mucho la verdad :) En muchas otras páginas no viene tan bien explicado,y lo complican mucho pero tu le diste al clavo... De nuevo, muchas gracias

    ResponderEliminar
  36. GRACIAS, eres un sol, vi el odioso anuncio de las cookies, y no le hice caso pero cuando lo he querido ir a poner no encontraba como, hasta que te he encontrado.Muchísimas gracias, porque lo explicas de maravilla y con el codigo y todo.Un saludo

    ResponderEliminar
  37. Vi la barrita le di a Ok y ahora no sale, ya no se si esta bien o no hecho

    ResponderEliminar
  38. Hola Blanca, desde que hiciste este tutorial (del cual estoy enormemente agradecida) he usado esa barrita de cookie, pero en estos días me dí cuenta que ya no aparece :S ¿Habrá cambiado algo?

    ResponderEliminar
  39. Solo un comentario..... MIL GRACIAS....

    ResponderEliminar
  40. me ha sevido de ayuda,soy nula para el html

    ResponderEliminar
  41. Muchas gracias por esta y otras entradas treméndamente útiles. He instalado en mi blog (http://www.universoserendipity.com/) la leyenda de las cookies pero me surgen dos problemas:

    -Cuando doy al OK no desaparece la leyenda
    -Al hacer scroll en la página la leyenda se queda fija

    Alguien puede echarme una mano por favor? Querría que al darle al OK la leyenda desaparezca y por tanto no acompañe al lector en su navegación.

    Gracias!

    ResponderEliminar
  42. Gracias por tu ayuda!! Cariños :)

    ResponderEliminar
  43. Muchas gracias por tu arduo trabajo y por compartirlo.

    Aprovecho la oportunidad para felicitarte por tan bello y educacional blog.

    Recibe un fuerte y afectuoso abrazo desde Guatemala, mensajero de bendiciones todas.

    ResponderEliminar
  44. Muchas gracias por tu arduo trabajo y por compartirlo.

    Aprovecho la oportunidad para felicitarte por tan bello y educacional blog.

    Recibe un fuerte y afectuoso abrazo desde Guatemala, mensajero de bendiciones todas.

    ResponderEliminar
  45. Hola blanca me encanta tu blog, estoy iniciando en esto y me gustaría que me explicaras como hago para cambiar la forma de los títulos así como tu. Ejemplo la etiqueta de "Archivos" "Categorías". Gracias!!.
    Ah y también colocar un cuadro para mis datos y presentación.

    ResponderEliminar
  46. Muchas Gracias, Excelente explicacion. me di a la tarea de hacer un video, espero no te molestes. Muchas Gracias.

    ResponderEliminar
  47. muy shingon solo un detalle no se adapta a los celulares

    ResponderEliminar
  48. muy discreto, justo lo que buscaba. muy bien programado. saludos.

    ResponderEliminar
  49. Muchas gracias, recientemente estoy metiéndome en esto de la programación, aunque tengo mucho tiempo blogueando, y me ha gustado mucho tu diseño, es minimalista, sencillo, pero directo, lo personalice un poco, y excelente. Gracias de verdad.

    ResponderEliminar
  50. Muchas gracias por este y por todos los demás tutoriales, son de una ayuda inestimable :)

    ResponderEliminar
  51. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
  52. Demasiado útil y genial explicado, es el primero sitio que leo donde explican algo (otras ni lo hacen) y lo explican bien. Pero una pregunta ¿cómo hago para que la barra salga arriba del todo y no abajo? es decir, pegado bajo la barra donde va la url del blog. Muchas gracias

    ResponderEliminar
  53. Por fin una web donde explica con claridad este tema de la barrita de las Cookies que tanto tiempo me llevaba dar con ello. Tras probar unas y otras, esta es la que más me gusta y menos trabajo me ha llevado. Buen trabajo!!.
    Muchas gracias. ;)

    ResponderEliminar
  54. Gracias Genial!! me ha servido bastante. Saludos

    ResponderEliminar
  55. hola! gracias por el tutorial, es muy claro y me ha ayudado mucho, pero al meterme en la pagina solo aparece la barra cuando lo hago desde el ordenador, como puedo hacer para que también aparezca en la versión movil? gracias

    ResponderEliminar
  56. Amigo buenisimo, encontré tu pagina buscando en google. Excelente me gusta mucho.

    ResponderEliminar
  57. mil gracias te regalo una galleta XD

    ResponderEliminar

© Personalización de Blogs. Diseño: Eve y Blanca.