1) Primero vamos a Tema > Editar Html, pulsamos Ctrl + F y buscamos <head>
2) A continuación de <head> (osea debajo) añadimos este código:
<script>//<![CDATA[
cookieOptions = {
msg: "En nuestro sitio web utilizamos cookies.", //El mensaje del aviso
learn: "Más info", //El texto del boton "Mas info"
close: "Acepto", //El texto del boton "Aceptar"
link: "https://policies.google.com/technologies/cookies", //URL cookies
};//]]></script>
*Con esto cambiamos el texto a nuestro gusto, podeis copiarlo y dejarlo como aparece.
3) Luego buscamos ]]></b:skin> y antes (osea arriba) pegamos este código:
/*Reset cookie-choices*/
body .cookie-choices-info,
body .cookie-choices-info .cookie-choices-button,
body .cookie-choices-info .cookie-choices-buttons,
body .cookie-choices-info .cookie-choices-inner,
body .cookie-choices-info .cookie-choices-text{ position:initial;margin:initial; left:initial;right:initial;bottom:initial;width:initial; top:initial;color:initial;padding:initial;background:initial; text-transform: initial;font-size: initial;max-width: initial;text-align: center; }
/*Animacion*/
@-webkit-keyframes cookies {
from {-webkit-transform:translateY(10em);transform:translateY(10em);}
to {-webkit-transform:translateY(0em);transform:translateY(0em);}
}
@keyframes cookies {
from {-webkit-transform:translateY(10em);transform:translateY(10em);}
to {-webkit-transform:translateY(0em);transform:translateY(0em);}
}
/*Contenedor principal*/
body .cookie-choices-info {
position: fixed;
bottom: 0;left: 0;right: 0;
-webkit-animation: cookies 1s backwards;
animation: cookies 1s backwards;
}
body .cookie-choices-info {
bottom: 1em; /*Separacion inferior*/
right: 1em; /*Separacion derecha*/
left: auto;
}
body .cookie-choices-info .cookie-choices-inner {
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
body .cookie-choices-info .cookie-choices-buttons {
padding-top: 1em;
}
/*Contenedor del texto y botones*/
body .cookie-choices-info .cookie-choices-inner {
border-radius: 15px;
box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.2);
padding: 1.5em;
background: #FFF; /*Color del fondo*/
}
/*Texto*/
body .cookie-choices-info .cookie-choices-text {
line-height: 24px;
padding: 0 1em;
font-size: 13px; /*Tamano de la fuente del aviso*/
color: #707070; /*Color del texto*/
}
/*Botones*/
body .cookie-choices-info .cookie-choices-button {
color: #fff; /*Color del texto de los botones*/
margin-left: .5em;
padding: .5em 1em; /*Espaciado de los botones*/
display: inline-block;
background: #1e4bbd; /*Color de fondo de los botones*/
border-radius: 3px;
font-size: .9em;
-webkit-transition: background .3s;
transition: background .3s;
}
/*Hover botones*/
body .cookie-choices-info .cookie-choices-button:hover {
background: #cc0849; /*Color de hover de los botones*/
}
body .cookie-choices-info .cookie-choices-text {
display: block;
text-align: center;
padding-bottom: 1rem;
}
/*Contenedor del texto y botones*/
body .cookie-choices-info .cookie-choices-inner {
max-width: 320px;
}
*Podemos personalizar el color, tamaño de la fuente o margenes modificando los valores.
4) Y listo, puedes ver el resultado final en esta web 😜
Basado en la idea de HoyGeek
 Primero vamos a Tema ...){kind=link}
0 comentarios:
Publicar un comentario
Puedes comentar anónimamente, con tu nombre o con una cuenta google.
Seleccionalo antes de escribir en "Comentar como", gracias