{"id":59,"date":"2023-12-05T12:44:18","date_gmt":"2023-12-05T12:44:18","guid":{"rendered":"https:\/\/blog.hostinger.io\/es\/support\/2023\/12\/05\/8343548-hostinger-creador-de-sitios-web-banner-de-verificacion-de-edad\/"},"modified":"2023-12-05T12:44:18","modified_gmt":"2023-12-05T12:44:18","slug":"8343548-hostinger-creador-de-sitios-web-banner-de-verificacion-de-edad","status":"publish","type":"post","link":"https:\/\/www.hostinger.com\/es\/support\/8343548-hostinger-creador-de-sitios-web-banner-de-verificacion-de-edad\/","title":{"rendered":"Hostinger Creador de Sitios Web: Banner de Verificaci\u00f3n de Edad"},"content":{"rendered":"

Hostinger Website Builder<\/a><\/b> no incluye un widget nativo para la verificación de la edad, pero se puede conseguir con la ayuda de herramientas de terceros o código personalizado.<\/p>

\n<\/p>

Método 1 – Widgets de terceros<\/h1>

Cree una ventana emergente de verificación de edad utilizando herramientas disponibles en línea, por ejemplo, AgeChecker<\/a><\/b>.<\/p>

\n<\/p>

Una vez creado el widget, obtendrás su código de integración<\/b>. <\/b>Copia y pega el código en el campo Código personalizado<\/a><\/b> de la configuración de integraciones de tu sitio web. Guarda los cambios, actualiza tu sitio web y ¡listo!<\/p>

\n<\/p>

El widget será visible en las versiones de vista previa y en vivo de su sitio web (no en el editor).<\/p>

\n<\/p>

Método 2 – Utilizar código personalizado<\/h1>

Sólo tienes que hacer lo siguiente:<\/p>

    \n
  1. \n

    Copie<\/b> el código<\/a><\/b> preferido que se indica a continuación.<\/p>\n<\/li>\n

  2. \n

    Personalizar<\/a><\/b> el código<\/p>\n<\/li>\n

  3. \n

    Pégalo<\/a><\/b> en el campo Código personalizado<\/b> de la configuración de integraciones de tu sitio web, guarda los cambios y actualiza tu sitio.<\/p>\n<\/li>\n<\/ol>

    Copie el código<\/h2>

    Si utilizas Código 1<\/a><\/b>, el banner recordará si un visitante concreto cumple los requisitos (tiene edad suficiente) para acceder al sitio web, lo que significa que el banner no volverá a aparecer la próxima vez que el mismo visitante intente abrir el sitio.<\/p>

    \n<\/p>

    Para mostrar siempre<\/b> el banner, utilice Código 2<\/a><\/b>.<\/p>

    \n<\/p>

    Código 1 (para no mostrar repetidamente el banner a los usuarios que cumplan los requisitos)<\/h2>
    <script>
        const bannerText = 'This website contains explicit content. Are you over 20?';
        const confirmationButtonText = 'Yes';
        const declineButtonText = 'No';
        const mainDiv = document.createElement('div');
        const divForButtons = document.createElement('div');
        const randomText = document.createElement('p');
        const randomOver = document.createElement('p');
        const randomUnder = document.createElement('p');
        const blackout = document.createElement('div');
        let overAge = false;
        blackout.id = 'blackout';
        divForButtons.appendChild(randomOver);
        divForButtons.appendChild(randomUnder);
        mainDiv.appendChild(randomText);
        mainDiv.appendChild(divForButtons);
        randomText.innerText = bannerText;
        randomOver.innerText = confirmationButtonText;
        randomUnder.innerText = declineButtonText;
        randomText.id = 'ageText';
        randomOver.classList.add('ageButton');
        randomUnder.classList.add('ageButton');
        mainDiv.id = 'ageVerificationBanner';
        if (!localStorage.getItem('overAge')) {
            document.body.appendChild(blackout);
            document.body.appendChild(mainDiv);
            document.body.style.overflow = 'hidden';
        }
        randomOver.addEventListener('click', function () {
            document.body.style.overflow = 'visible';
            document.querySelector('#ageVerificationBanner').style.display = 'none';
            document.querySelector('#blackout').style.display = 'none';
            overAge = true;
            localStorage.setItem('overAge', overAge);
        })
        randomUnder.addEventListener('click', function () {
            window.location = 'https:\/\/google.com';
        })
    <\/script>
    <style>
        #blackout {
            background-color: rgba(0, 0, 0, 0.3);
            width: 100%;
            height: 100%;
            position: absolute;
            left: 0;
            top: 0;
            z-index: 9999;
        }
        div#ageVerificationBanner {
            position: absolute;
            z-index: 99999;
            transform: translate(-50%, -50%);
            top: 50%;
            left: 50%;
            background-color: #DADADA;
            padding: 50px;
            border: solid 2px #606060;
            border-radius: 10px;
        }
        div#ageVerificationBanner div {
            display: flex;
            justify-content: center;
        }
        p.ageButton {
            padding: 5px 10px;
            margin: 0 10px;
            cursor: pointer;
            background-color: #AFAFAF;
            border-radius: 5px;
            border: solid 2px #606060;
        }
        p#ageText {
            text-align: center;
            padding-bottom: 20px;
        }
        @media screen and (max-width:920px) {
            div#ageVerificationBanner {
                width: 300px;
                padding: 20px;
            }
            p.ageButton {
                font-size: 14px;
            }
        }
    <\/style><\/code><\/pre>
    \n<\/p>
    Código 2 (para mostrar siempre el banner)<\/h2>
    <script data-rehype>
        const mainDiv = document.createElement('div');
        const divForButtons = document.createElement('div');
        const randomText = document.createElement('p');
        const randomOver = document.createElement('p');
        const randomUnder = document.createElement('p');
        const blackout = document.createElement('div');
        blackout.id = 'blackout';
        divForButtons.appendChild(randomOver);
        divForButtons.appendChild(randomUnder);
        mainDiv.appendChild(randomText);
        mainDiv.appendChild(divForButtons);
        randomText.innerText = 'This site contains explicit content.';
        randomOver.innerText = 'I am over 18';
        randomUnder.innerText = 'I am under 18';
        randomText.id = 'ageText';
        randomOver.classList.add('ageButton');
        randomUnder.classList.add('ageButton');
        mainDiv.id = 'ageVerificationBanner';
        document.body.appendChild(blackout);
        document.body.appendChild(mainDiv);
        document.body.style.overflow = 'hidden';
        randomOver.addEventListener('click', function () {
            document.body.style.overflow = 'visible';
            document.querySelector('#ageVerificationBanner').style.display = 'none';
            document.querySelector('#blackout').style.display = 'none';
        })
        randomUnder.addEventListener('click', function () {
            window.location = 'https:\/\/google.com';
        })
    <\/script>
    <style>
        #blackout {
            background-color: rgba(0, 0, 0, 0.3);
            width: 100%;
            height: 100%;
            position: absolute;
            left: 0;
            top: 0;
            z-index: 9999;
        }
        div#ageVerificationBanner {
            position: absolute;
            z-index: 99999;
            transform: translate(-50%, -50%);
            top: 50%;
            left: 50%;
            background-color: #DADADA;
            padding: 50px;
            border: solid 2px #606060;
            border-radius: 10px;
        }
        div#ageVerificationBanner div {
            display: flex;
            justify-content: center;
        }
        p.ageButton {
            padding: 5px 10px;
            margin: 0 10px;
            cursor: pointer;
            background-color: #AFAFAF;
            border-radius: 5px;
            border: solid 2px #606060;
        }
        p#ageText {
            text-align: center;
            padding-bottom: 20px;
        }

        @media screen and (max-width:920px) {
            div#ageVerificationBanner {
                width: 300px;
                padding: 20px;
            }
            p.ageButton {
                font-size: 14px;
            }
        }
    <\/style><\/code><\/pre>
    \n<\/p>
    Personalizar el código<\/h2>
    En estas líneas se puede cambiar el texto del banner:<\/p>
       const bannerText = 'This website contains explicit content. Are you over 20?';
        const confirmationButtonText = 'Yes';
        const declineButtonText = 'No';<\/code><\/pre>
    Si conoce CSS<\/a><\/b>, también puede cambiar el aspecto del banner, por ejemplo, el tamaño de la fuente, los colores, etc.<\/p>
    \n<\/p>
    Pega el código<\/h2>
    Dentro del constructor, ve a Configuración<\/b> → Integraciones<\/b> de tu sitio web, y pega el código en el campo Código personalizado<\/a><\/b>. A continuación, guarda los cambios<\/b> y actualiza tu sitio web<\/b>.<\/p>
    \n<\/p>
    El banner aparece en el modo de vista previa y en línea; no es visible en el editor.<\/p>\n","protected":false},"excerpt":{"rendered":"
    Aprenda a a\u00f1adir un banner de verificaci\u00f3n de edad a su sitio web creado con el Creador de Sitios Web Hostinger<\/p>\n","protected":false},"author":581,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"include_on_kodee":true,"footnotes":""},"categories":[260],"tags":[],"class_list":["post-59","post","type-post","status-publish","format-standard","hentry","category-integraciones"],"hreflangs":[{"locale":"en-US","link":"https:\/\/www.hostinger.com\/support\/8343548-hostinger-website-builder-age-verification-banner\/","default":1},{"locale":"es-ES","link":"https:\/\/www.hostinger.com\/es\/support\/8343548-hostinger-creador-de-sitios-web-banner-de-verificacion-de-edad\/","default":0}],"include_on_kodee":true,"_links":{"self":[{"href":"https:\/\/www.hostinger.com\/es\/support\/wp-json\/wp\/v2\/posts\/59","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hostinger.com\/es\/support\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hostinger.com\/es\/support\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/es\/support\/wp-json\/wp\/v2\/users\/581"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/es\/support\/wp-json\/wp\/v2\/comments?post=59"}],"version-history":[{"count":0,"href":"https:\/\/www.hostinger.com\/es\/support\/wp-json\/wp\/v2\/posts\/59\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.hostinger.com\/es\/support\/wp-json\/wp\/v2\/media?parent=59"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hostinger.com\/es\/support\/wp-json\/wp\/v2\/categories?post=59"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hostinger.com\/es\/support\/wp-json\/wp\/v2\/tags?post=59"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}