Personaliza tu anuncio de cookies | Tutorial

28.7.15

Hola, como muchos sabréis Google ha puesto un anuncio sobre el uso de cookies en los blogs europeos. El anuncio que ha puesto es algo grande y, desde mi punto de vista, feo. Por lo que hoy me la he pasado buscando un código para modificarlo y dado que el hecho de que el anuncio de cookies está por defecto en la parte superior del blog, aquí os traigo el código para poner la barra de cookies en la parte inferior del blog, la cual, una vez dado a OK (o lo que queráis poner) desaparece.

Os recuerdo que "las leyes de la Unión Europea (UE) exigen que informes a tus visitantes de la UE de que usas cookies en tu blog. En muchos casos, la ley también exige que obtengas el consentimiento de los lectores". Por lo tanto, Google nos advierte que "si has modificado tu blog de forma que el aviso quede oculto, recaerá sobre ti la responsabilidad de informar a tus visitantes de las cookies utilizadas en tu blog y, si es necesario, de obtener su consentimiento". Para saber más click aquí.

Lo primero que tenemos que hacer es poner un script para eliminar la barra por defecto de Google, de forma que podamos poner la nuestra personalizada. Para ello vamos a nuestra plantilla html y buscamos (ctrl+F) </head> y justo antes de este código pegamos el siguiente:

<script>cookieChoices = {};</script>

Ahora vamos a buscar en la plantilla html del blog </body> y justo antes de eso pegamos el siguiente código:

<!--Inicio barra cookies-->
<div id='barracookies' style='display:none; position:fixed; left:0px; right:0px; bottom:0px;  width:100%; min-height:30px; background: #8a2648; color:#ffffff; z-index: fcaaaa;'>
<div style='width:100%; position:absolute; padding-left:4px; font-family:verdana; font-size:12px; top:25%; text-align:center;'>
<span>Este sitio emplea cookies de Google. Si continuas navegando consideramos que aceptas el uso de cookies.</span>
<a href='javascript:void(0);' onclick='PonerCookie();' style='padding:5px; background:#fafbf3; text-decoration:none; color:#8a2648; border-radius:3px;'><b>OK</b></a>
<a href='https://www.google.com/policies/technologies/cookies/' 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(&quot; &quot; + c_name + &quot;=&quot;);
  if (c_start == -1){
  c_start = c_value.indexOf(c_name + &quot;=&quot;);
  }
  if (c_start == -1){
  c_value = null;
  }else{
  c_start = c_value.indexOf(&quot;=&quot;, c_start) + 1;
  var c_end = c_value.indexOf(&quot;;&quot;, 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) ? &quot;&quot; : &quot;; expires=&quot;+exdate.toUTCString());
  document.cookie=c_name + &quot;=&quot; + c_value;
 }
 if(getCookie(&#39;aviso&#39;)!=&quot;1&quot;){
  document.getElementById(&quot;barracookies&quot;).style.display=&quot;block&quot;;
 }
 function PonerCookie(){
  setCookie(&#39;aviso&#39;,&#39;1&#39;,365);
  document.getElementById(&quot;barracookies&quot;).style.display=&quot;none&quot;;
 }
 </script>

<!--Fin barra cookies-->

Este es el código que usé yo, de forma que tiene los colores y el texto que podéis ver en la barra de cookies que hay en mi blog. Pero, como siempre, esto se puede editar. Aquí os dejo las partes esenciales a editar (las que marqué en negrita) una a una, incluso las más básicas.

Lo que está en negrita de color rojo es lo que hace referencia a la barra en genera:
min-height: la altura de la barra en píxeles, lo podéis dejar tal como está ya que me parece una altura adecuada.
background: el color de fondo de la barra
color: el color del texto
font-family: la fuente del texto
font-size: tamaño del texto

El texto que está en negrita (Este sitio emplea...lo podéis modificar, siempre anunciando el uso de cookies de Google en el blog. Al igual que OK (se puede cambiar por "Entendido", "Sí" o lo que queráis) y "Más información".

El texto que está en negrita de color azul hace referencia al cuadrito en el que está "OK", aquí os explico uno a uno lo que podéis cambiar:
background: el fondo del cuadro
color: color del texto
border-radius: la redondez de los bordes.

Y, por último, el texto que está en negrita de color morado (creo que es morado) hace referencia al color del texto "Más información". El cual, como podéis comprobar, está enlazado a la página de uso de cookies de Google.

Para los que preguntásteis, aquí os dejo una página en la que podéis buscar los código de los colores: código de colores html. También tiene la opción de buscar los colores por los nombre, con su código correspondiente, aquí.

Espero que esta entrada os haya servido de ayuda. Como siempre, si tenéis alguna duda (por si no me he explicado bien) hacérmelo saber en los comentarios :)

14 Mundos

  1. Oh muchas gracias por esta entrada guapa, de verdad. Me he dado cuenta hoy que sale la dichosa barra en todos los blogs que visito (hasta en el mío) y es horrible, grande y gris...a ver si esta tarde en cuanto tengo un ratito la cambio, que me gusta más como esta la tuya ^^
    Un besito

    ResponderEliminar
  2. ¡Hola Patricia!
    Me acabas de salvar la vida porque justo estaba pensando en como iba a hacer para poder modificarlo. Muchas gracias por el tutorial :)
    Un beso^^

    ResponderEliminar
  3. ¡Qué rapidez! ^.^
    ¡Muchísimas gracias! Es horrible la barra esa que han puesto por obligación, si al menos la hubieran dejado modificar de alguna forma... Ya he puesto la de tu tutorial y va perfectamente. :D
    ¡Besos!

    ResponderEliminar
  4. Gracias por el tutorial, voy a probarla a ver que tal queda.
    Besos!!!

    ResponderEliminar
  5. Muchísimas gracias!!

    Mucho mejor así que no la barra que habían puesto tan horrorosa!

    ResponderEliminar
  6. Qué buen post, gracias!
    Mañana mismo me pongo con tu explicación.
    Me gusta tu espacio. TE sigo!! Te dejo mi link para que me sigas tú también, gracias!!!
    http://buscando-mi-equilibrio.blogspot.com.es/

    Besos

    ResponderEliminar
  7. Muchas gracias por el tutorial, es realmente útil ^^
    Un beso :)

    ResponderEliminar
  8. ¡Muy útil! Muchísimas gracias :D
    Pensaba que había tocado algo en mi blog para que saliera siempre eso jajaja
    Besote <3

    ResponderEliminar
  9. ¡Muchísimas gracias! Muy útil :)
    ¡Besos!

    ResponderEliminar
  10. Patri! lo he puesto, muchas gracias funciona perfectamente =)
    Un besito!

    ResponderEliminar
  11. ¡Muchísimas gracias! Lo acabo de usar y va perfecto. Lo he modificado y ya está a mi gusto :)
    ¡Un saludo!

    ResponderEliminar
  12. Hola!
    Muchas gracias por el tutorial ^^
    Besos! <33

    ResponderEliminar
  13. Hola guapa!! Muchas gracias por el tutorial, lo acabo de poner en mí blog. De nuevo, mil gracias :)

    Besos :*

    ResponderEliminar