Personaliza tu anuncio de cookies | Tutorial

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 barracolor: el color del textofont-family: la fuente del textofont-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 cuadrocolor: color del textoborder-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 :)
Fuentes: Ayuda de blogger y Personalización de Blogs