Cómo cambiar el estilo de Aviso de cookies de Blogger
Personalizar aviso de Cookies Blogger
Debido a las leyes de la Unión Europea, todos los blog de Blogger muestran un aviso de cookies y este se muestra solo cuando se visita desde un país que este afectado por esta ley. Hoy veremos a como modificar el aviso para darle un mejor aspecto y también a como modificar el mensaje mostrado en el aviso.
Modificar estilo del Aviso de Cookies Blogger
Lo primero que haremos será modificar el estilo del aviso. Por defecto Blogger muestra el aviso de cookies en la parte superior, lo que haremos será posicionarlo en la parte inferior derecha y darle un estilo más light/claro. Para ello agregaremos estilos CSS a nuestro blog ingresando a Tema > Personalizar y luego en Avanzado > Añadir CSS, si tienes problemas para agregar los estilos puedes revisar está guía completa de cómo agregar CSS en Blogger.
/*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: 5px;
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: 14px; /*tamaño 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: .7em 1em; /*Espaciado de los botones*/
display: inline-block;
background: rgba(9, 179, 228, 0.8); /*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: #09b3e4; /*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: 420px;
}Como te mencione antes estos estilos son más light/claro, tu puedes modificar los estilos para que se ajuste a tu blog simplemente tienes que modificar las lineas que están comentadas, que son básicamente tamaño de letra, color de letra y fondo, espaciado, etc.
Cambiar información de Aviso de Cookies Blogger
Ahora vamos a cambiar el mensaje que se muestra en el aviso de cookies de Blogger. Para ello nos dirigimos a Tema > Editar HTML y pegamos el siguiente código debajo de la etiqueta <head>
<script>//<![CDATA[
cookieOptions = {
msg: "Texto legal", //El mensaje del aviso
learn: "Texto leer más", //El texto del botón "Más información"
close: "Texto para aceptar", //El texto del botón "Aceptar"
link: "https://politica-de-cookies.com", //URL de la pagina para saber sobre tus cookies
};//]]></script>Como en el anterior código, deje comentado las partes que puedes modificar a tu gusto. Podrás cambiar el mensaje, los textos y enlace de los botones.
FUENTE: https://hoygeekweb.blogspot.com/2019/08/personalizar-aviso-de-cookies-blogger.html
Read more...
![all-free-downoad.com-logo[5]](https://bp3.blogger.com/_QcADEK6HYak/SI320Z2ve6I/AAAAAAAAD9Y/zEOsIxfEhts/s400/Logotipo.png "Intercambios virtuales en la red, seriales y otros."){kind=small}
![all-free-downoad.com-logo[5]](https://www.deluxetemplates.net/wp-content/themes/newprivatetheme/images/logo.png "DeluxeTemplates.net página web es más conocido por las plantillas de Blogger, y recientemente se hizo muy conocido en WordPress comunidad con nuevos y exclusivos diseños el tema de WordPress. Todas las plantillas de Blogger y WordPress temas mencionados aquí son 100% exclusivo, diseñado y desarrollado por nosotros , 100% gratuito para uso personal o comercial, licenciado bajo la licencia Creative Commons. Todos nuestros temas son: - Diseño único y moderno. - Gratuito para uso personal o comercial, licenciado bajo licencia creative commons. - Actualizado, y apoyado siempre"){kind=logo}
