Barra de Cookies Para Blogger

Iconos diseñados por Freepik from www.flaticon.es

El aviso de cookies es una parte importante para cualquier web que quiera informar a sus usuarios lo que le hacen a sus datos y aceptar lo que se haga con ellos.

Este articulo lo hago principalmente para Blogger por que en WordPress puedes instalar extensiones y no necesitas este tipo de códigos.

~~$ads={1}~~

El código es completamente funcional, pero hay que mencionar que a veces aparece 2 veces el mensaje, nada grave.

El diseño utiliza las variables CSS para hacerlo practico y si tu blog tiene estos estilos es fácil que se adapte al diseño de tu blog.

Agregue un tema dark para que se adapte mejor a el sitio web con variables y condicionales CSS puedes optar por Scripts pero estos hacen mas lenta tu pagina.

El tema funciona en todos los dispositivos, tiene diseño responsivo por lo que no tienes que preocuparte por si quedara bien etc.

Próximamente agregare un script que te lo agrega automáticamente el código para facilitar el proceso de instalación. por ahora para instalarlo lo tienes que pegar antes de la etiqueta de cierre </body> y simplemente lo guardas.

Barra de cookies para Blogger

Url de aviso de cookies

Codigo:

.cookie-bubble.bottom-right {
        right: 15px;
        bottom: 15px
    }

.cookie-bubble.bottom-left {
        left: 15px;
        bottom: 15px
    }

.cookie-bubble.show.bottom-left,
    .cookie-bubble.show.bottom-right {
        -webkit-animation-name: popInBottom;
        animation-name: popInBottom;
        -webkit-animation-duration: 2s;
        animation-duration: 2s;
        -webkit-animation-timing-function: cubic-bezier(.19, 1, .22, 1);
        animation-timing-function: cubic-bezier(.19, 1, .22, 1);
        -webkit-animation-fill-mode: forwards;
        animation-fill-mode: forwards
    }

.cookie-bubble.hide {
        display: none
    }

.cookie-bubble .cb-wrapper {
        position: relative;
        display: inline-block;
        padding: 15px
    }

.cookie-bubble .cb-wrapper .cb-row {
        position: relative;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        text-align: left
    }

.cookie-bubble .cb-wrapper .cb-row .cb-row-content .message {
        position: relative;
        width: 100%;
        display: inline-block;
        font-size: 15px;
        color: var(--text-color);
        margin-top: 0
    }

.cookie-bubble .cb-wrapper .cb-row .cb-row-content .cb-controls {
        position: relative;
        width: 100%;
        float: left;
        margin-top: 15px
    }

.cookie-bubble .cb-wrapper .cb-row .cb-image {
        padding-right: 23px
    }

.cookie-bubble .cb-wrapper .cb-row .cb-image .cookie-inner-color {
        fill: var(--green-color)
    }

.cookie-bubble .cb-wrapper .cb-row .cb-image svg {
        width: 60px
    }

.cookie-bubble .cb-wrapper .cb-row .agreement-btn {
        float: left;
        background-color: var(--green-color);
        font-family: inherit;
        font-size: 14px;
        color: #fff;
        text-decoration: none;
        opacity: 1;
        border: none;
        cursor: pointer;
        font-weight: 500;
        padding: 10px 20px;
        margin: 0 10px 0 0;
        border-bottom: 2px solid rgba(0, 0, 0, 0.1);
        border-radius: 6px
    }

.cookie-bubble .cb-wrapper .cb-row .agreement-btn:hover {
        background-color: var(--green-hover-color)
    }

.cookie-bubble .cb-wrapper .cb-row .cookie-policy-btn {
        float: left;
        color: var(--blue-color);
        padding: 10px 0;
        font-size: 14px;
        opacity: .95;
        border: none;
        cursor: pointer;
        font-weight: 400;
        margin: 0
    }

.cookie-bubble .cb-wrapper .cb-row .cookie-policy-btn:hover {
        opacity: 1;
        text-decoration: underline
    }

@media screen and (max-width: 440px) {
        .aff_svg {
            width: 80%
        }

.cookie-bubble.show {
            border-radius: 0;
            width: 100%;
            max-width: 100%;
            left: 0 !important;
            bottom: 0 !important
        }

.cookie-bubble .cb-wrapper {
            padding: 20px 15px
        }
    }
</style>
<div class="cookie-bubble bottom-left show">
    <div class="cb-wrapper">
        <div class="cb-row">
            <div class="cb-image"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 97.93 97.93">
                    <defs>
                        <style>
                            .cookie-inner-color {
                                fill: undefined !important
                            }
                        </style>
                    </defs>
                    <g id="Layer_2" data-name="Layer 2">
                        <g id="Layer_1-2" data-name="Layer 1">
                            <path d="M44,23.76a2.47,2.47,0,1,0,.91,3.37A2.47,2.47,0,0,0,44,23.76Z"></path>
                            <path d="M25.9,40.32a2.47,2.47,0,0,0,0,4.93h0a2.47,2.47,0,1,0,0-4.93Z"></path>
                            <circle cx="32.08" cy="65.86" r="2.47"></circle>
                            <path d="M56.38,69.91a2.47,2.47,0,1,0,1.14,1.49A2.47,2.47,0,0,0,56.38,69.91Z"></path>
                            <path
                                d="M72,52.68a2.47,2.47,0,0,0-2.38,1.83,2.44,2.44,0,0,0,.25,1.87,2.47,2.47,0,0,0,4.52-.59,2.44,2.44,0,0,0-.25-1.87A2.47,2.47,0,0,0,72,52.68Z">
                            </path>
                            <path class="cookie-inner-color"
                                d="M89.51,52.86A14,14,0,0,1,81,47.2,14.09,14.09,0,0,1,61,35.68,14.09,14.09,0,0,1,49.49,15.73a14,14,0,0,1-5.66-8.55,44,44,0,0,0-21.09,6.15A44.26,44.26,0,0,0,71.46,87.08,44.24,44.24,0,0,0,89.51,52.86ZM28.28,43.42a2.47,2.47,0,0,1-2.38,1.83h0a2.47,2.47,0,1,1,2.38-1.83Zm3.8,24.9a2.47,2.47,0,1,1,2.47-2.47A2.47,2.47,0,0,1,32.08,68.32ZM44.92,27.13A2.47,2.47,0,1,1,44,23.76,2.47,2.47,0,0,1,44.92,27.13ZM57.28,73.27a2.47,2.47,0,1,1-.9-3.36,2.47,2.47,0,0,1,.9,3.36ZM74.42,55.79a2.47,2.47,0,1,1-.25-1.87A2.45,2.45,0,0,1,74.42,55.79Z">
                            </path>
                            <path
                                d="M97.93,48.52v-.2A2.35,2.35,0,0,0,95.7,46a9.37,9.37,0,0,1-8-5.45,2.35,2.35,0,0,0-3.49-.93,9.51,9.51,0,0,1-5.44,1.72A9.4,9.4,0,0,1,69.39,31.1a2.35,2.35,0,0,0-2.55-2.55c-.28,0-.57,0-.85,0a9.39,9.39,0,0,1-7.68-14.81,2.35,2.35,0,0,0-.93-3.49,9.37,9.37,0,0,1-5.45-8A2.35,2.35,0,0,0,49.61,0H49a49,49,0,1,0,49,49C97.93,48.82,97.93,48.67,97.93,48.52ZM71.46,87.08A44.26,44.26,0,0,1,22.74,13.33,44,44,0,0,1,47.53,4.72a14,14,0,0,0,5.66,8.55A14.09,14.09,0,0,0,64.71,33.22,14.09,14.09,0,0,0,84.66,44.75a14,14,0,0,0,8.56,5.66A44.3,44.3,0,0,1,71.46,87.08Z">
                            </path>
                        </g>
                    </g>
                </svg></div>
            <div class="cb-row-content"><span class="message">Este sitio utiliza cookies de Google para ofrecer sus
                    servicios y analizar el tráfico.</span>
                <div class="cb-controls"><a class="agreement-btn" href='javascript:void(0);' onclick="PonerCookie()">¡Aceptar!</a><a class="cookie-policy-btn"
                        href="https://policies.google.com/technologies/cookies" target="_blank"
                        rel="noopener noreferrer">Politica de cookies</a></div>
            </div>
        </div>
    </div>
</div>
<script type='text/javascript'>
    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;
        document.querySelector(".cookie-bubble").style.display = "none";
    }
    if (getCookie('aviso') != "1") {
        document.querySelector(".cookie-bubble").style.display = "block";
    }
    function PonerCookie() {
      setCookie('aviso', '1', 365);
    }
  </script>

El código esta en GitHub para tener un lugar para mejorar el código, igual lo dejo aquí para que lo instales en tu blog.

Barra de cookies para Blogger

Humberto Molina

Post a Comment

Publicar un comentario

Cómo hacer que Minecraft Bedrock se vea como en los tráilers

Formulario de contacto

Barra de Cookies Para Blogger

Barra de cookies para Blogger

Humberto Molina

Te podría gustar

Post a Comment

Publicar un comentario

Formulario de contacto