Vamos a explicar como podemos modificar la barra de cookies de nuestra página.Lo primero que tenemos que tener claro es saber su función, como explico en este otro post.
¿Como podemos modificarla?
Lo primero que tenemos que hacer es eliminar la barra que nos viene por defecto.
Para ello como siempre antes de modificar nuestra plantilla, tenemos que hacer una copia de seguridad por si algo nos falla.
Podéis verlo paso a paso en este post.
Una vez hecho esto nos vamos a modificar nuestra plantilla.
Nos vamos a blogger.com, Plantilla > HTMl.Buscamos </head> y justo antes debes pegar el siguiente código:
<script>cookieChoices = {};</script>
Comprobamos en vista previa que ya no aparece la barra de cookies y guardamos los cambios.
Comprueba en la Vista Previa que todo está bien (es decir, que ya no sale la barra) y guarda los cambios.Ahora tenemos que buscar </body> y justo antes debes pegar el siguiente código:<!--Inicio barra cookies-->
<div id='barracookies' style='display:none; position:fixed; left:0px; right:0px; top:0px; width:100%; min-height:30px; background: #415A5E; 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 continúas 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: #415A5E; 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(" " + 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>
Con este código, la barra de las cookies os quedaría así.
Modificando el código
Aquí dejo partes que podéis modificar a vuestro gustoTop: es donde irá la barra. En este caso, está a 0 píxeles de la barra superior del blog.
Para poner la barra de cookies en la barra inferior solo tenéis que cambiar el valor top por bottom, y así quedará abajo. Cuantos más píxeles le añadáis, más separado estará de la barra inferior o de la superior.
left:0px; right:0px es la distancia a la derecha e izquierda que también la hemos dejado a 0 píxeles
min-height: la altura de la barra en píxeles.
Si poneís otro tipo de letra tendréis que poner mas pixeles y ajustarla
Background: el color de fondo de la barra
Color: el color del texto
Font-family: la fuente del texto
Font-size: el tamaño de la letra
Text-align: es la alineación del texto. Ahora está centrado (center) pero también podéis alinearlo a la derecha (right) o a la izquierda (left)
Este sitio emplea cookies de Google.En este caso es el texto del aviso que podéis modificarlo a vuestro gusto.
Más información también podéis modificar este texto.
color:#ffffff;color del texto Más información. Este texto tiene un enlace a la página de uso de cookies de Google, que creo que es mejor dejar.
Este es el estilo del recuadro:
background:#fafbf3; color de fondo
text-decoration:none;color: #415A5E; color del texto
border-radius:3px;'tipo y anchura del borde
En este post podeís buscar el código de los colores que necesitéis