Aviso 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.

Cookies Blogger

Barra de cookies para Blogger

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.

<style>
    :root {
        --text-color: #67676a;
        --green-color: #217dd4;
        --green-hover-color: #2573a6;
        --blue-color: #2980b9;
        --blue-hover-color: #2573a6;
        --box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
        --box-color: #fff;
    }
    @media (prefers-color-scheme: dark) {
        :root {
            --text-color: #ffffff;
            --green-color: #217dd4;
            --green-hover-color: #2573a6;
            --blue-color: #2980b9;
            --blue-hover-color: #2573a6;
            --box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
            --box-color: rgba(0, 0, 0, 0.7);
        }
    }
    .cookie-bubble {
        position: fixed;
        width: 100%;
        max-width: 400px;
        min-height: 100px;
        background-color: var(--box-color);
        box-shadow: var(--box-shadow);
        z-index: 990;
        border-radius: 6px;
        display: none;
    }
    .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>
code-box

Publicar un comentario

أحدث أقدم