Imprimir...
Compartir
A+
A-
Aviso cookies de Google

Vamos a personalizar y dar un poco de color al "triste" y "obligado" aviso de cookies, un script que aunque se nos ha facilitado gratuitamente y en cierto modo por obligación, debido a las distintas políticas de privacidad de algunos países. Sí es cierto que el aviso nos puede servir, pero la estética del mismo, pues deja un poco de desear.

En este tutorial veremos la manera de darle un poco de atractivo.

Vamos con ello:

Entra en la plantilla, busca ]]></b:skin> (Control+F), y arriba de ello copia y pega estos estilos (CSS):

.cookie-choices-info {
background-color: #414141 !important;
line-height: normal !important;
top: initial !important;
padding-bottom: 13px !important;
bottom: 0 !important;
font-family: inherit !important;
-webkit-transform: translateZ(0);
z-index: 9999999999 !important;
border-top: 1px solid #6495ed;
}
.cookie-choices-info .cookie-choices-text {
font-size: 13px !important;
font-family: arial;
color: #fff !important;
}
.cookie-choices-info .cookie-choices-button {
font-weight: normal !important;
color: #fff !important;
margin-left: 5px !important;
padding: 3px 6px !important;
background: #84898A !important;
border-radius: 3px;
border: 1px solid #fff;
letter-spacing: .8px;
transition: all .4s linear;
}
.cookie-choices-info .cookie-choices-button:hover {
background: #6495ed !important;
transition: all .1s linear
}
.cookie-choices-info .cookie-choices-button:nth-child(2) {
font-weight: normal !important;
color: #fff !important;
margin-left: 5px !important;
padding: 3px 6px !important;
background: #51a351 !important;
border-radius: 3px;
border: 1px solid #fff;
letter-spacing: .8px;
transition: all .4s linear;
}
.cookie-choices-button:nth-child(2):hover {
background: #6495ed !important;
transition: all .1s linear;
}

Modificar el aviso de cookies y ponerlo de una manera también personalizada y con un enlace a nuestra propia política de cookies.

Busca en tu plantilla </head> y encima de ello, pega este script.

<script>
cookieOptions = {msg: "Texto de nuestro aviso personalizado", close: "Acepto", learn: "Más información", link:"Enlace a nuestra política de cookies"};
</script>

Y si también queréis que el aviso se cierre, automáticamente, transcurrido un tiempo antes de que pulsen en: Entendido, Acepto, Estoy de acuerdo, etc... podéis añadir este sencillo script con el que tendréis la opción de su cierre al cabo de unos minutos o segundos, con un efecto suave.

Busca en tu plantilla, al igual que en el script anterior, la siguiente linea: </head> y encima de ello, pega este script.

<script>
window.setTimeout(function(){
jQuery(".cookie-choices-info").fadeOut(1500);
}, 60000);
</script>

Si te decides a añadirlo puedes cambiar el tiempo en el que se cerrara el aviso, ahora esta en un minuto. Ejemplo: 60000 = Un minuto, 30000 = Medio minuto, 15000 = Quince segundos, etc...

Aviso cookies de Google

Si quieres modificar a tu gusto el color de fondo y/o el color de las letras, puedes hacerlo cambiando los códigos marcados en azul (tabla de colores).

Una vez implantados los códigos haz vista previa y si todo funciona según lo esperado, puedes guardar la plantilla.

Importante: antes de hacer cualquier modificación en tu plantilla haz una copia de la misma, por si surge cualquier problema poder restaurarla.

Nota: Es posible que no veas el aviso en tu propia página ya que tienes las cookies de tu sitio aceptadas. Para poder hacer la comprobación de si todo fue correcto, utiliza otro navegador, puedes navegar en modo incógnito o puedes borrar las cookies del historial.


Fuente: Pedro PC

0 comentarios TiS 0 Facebook

Puedes leer las normas sobre los comentarios en nuestra política de privacidad.

Tu comentario...


 
2013 - 2017 Te interesa saber



Pedro Luis Cenzano Diez & Yolanda Torres Cerezo
(Administradores)

Jesús Mª Busto Riaño
(Asesor)


Política de privacidad





TiS, con tecnología Responsive Web Design y Blogger