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.

Ver Demo

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