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: 

1. Índice de todos mis tutoriales y posts