Dengan bantuan custom code, Anda bisa menambahkan berbagai banner di website Anda.

Banner tidak akan terlihat dari bagian editor tetapi Anda bisa melihatnya di pratinjau atau saat website online 💡

Teks Statis di atas Menu Navigasi

Banner terlihat seperti berikut:

A banner with static text above the website's navigation menu

Salin code di bawah ini dan masukkan ke kotak Custom code di pengaturan integrasi website Anda.

CATATAN

Ganti frase This is the text inside the banner dengan teks yang Anda inginkan sebelum penyimpan perubahan
Jika Anda menguasai CSS, Anda juga bisa mengatur ukuran dan warna banner dengan mengedit atribut khusus

<script>
    const bannerText = 'This is the text inside the banner';
    const topBanner = document.createElement('div');

    topBanner.id = 'bannerTop';
    topBanner.insertAdjacentHTML("afterbegin", `<p>${bannerText}</p>`);

    setTimeout(() => {
        requestAnimationFrame(() => {
            document.body.append(topBanner);
        })

        setTimeout(() => {
            requestAnimationFrame(() => {
                topBanner.classList.add('visible');
            })
        }, 50);
    }, 1500);
</script>

<style>
    header {
        animation-delay: 1.5s;
        animation-duration: .4s;
        animation-iteration-count: 1;
        animation-fill-mode: forwards;
        animation-timing-function: ease;
        animation-name: addPadding;
    }

    @keyframes addPadding {
        to {
            padding-top: 4.9vh;
        }
    }

    #bannerTop {
        z-index: 20;
        position: fixed;
        top: 0;
        width: 100%;
        height: 5vh;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #CF8D6D;
        overflow: hidden;
        opacity: 0;
        transform: translateY(-100%);
        transition: all .3s ease;
    }

    #bannerTop.visible {
        opacity: 1;
        transform: translateY(0);
    }

    #bannerTop p {
        color: #fff;
    }

    @media screen and (max-width: 920px) {
        #bannerTop {
            height: 10vh;
            flex-direction: column;
        }

        @keyframes addPadding {
            to {
                padding-top: 9.9vh;
            }
        }
    }
</style>

Teks Bergerak di atas Menu Navigasi

Banner terlihat seperti berikut:

A banner with static text at the bottom of a website

Salin code di bawah ini dan masukkan ke kotak Custom code di pengaturan integrasi website Anda.

CATATAN

Ganti frase This is the first text dan This is the second text dengan teks yang Anda inginkan sebelum penyimpan perubahan
Jika Anda menguasai CSS, Anda juga bisa mengatur ukuran dan warna banner dengan mengedit atribut khusus

<script>
    const bannerTextOne = 'This is the first text';
    const bannerTextTwo = 'This is the second text';
    const topMovingBanner =  document.createElement('div');

    topMovingBanner.id = 'movingBannerTop';
    topMovingBanner.insertAdjacentHTML("afterbegin", `<p id="bannerTextOne">${bannerTextOne}</p><p id="bannerTextTwo">${bannerTextTwo}</p>`);

    setTimeout(() => {
        requestAnimationFrame(() => {
            document.body.append(topMovingBanner);
        })
        setTimeout(() => {
            requestAnimationFrame(() => {
                topMovingBanner.classList.add('visible');
            });
        }, 50);
    }, 1500);
</script>

<style>
    header {
        animation-delay: 1.5s;
        animation-duration: .4s;
        animation-iteration-count: 1;
        animation-fill-mode: forwards;
        animation-timing-function: ease;
        animation-name: addPadding;
    }

    @keyframes addPadding {
        to {
            padding-top: 4.9vh;
        }
    }

    #movingBannerTop {
        z-index: 20;
        position: fixed;
        top: 0;
        width: 100%;
        height: 5vh;
        background-color: #CF8D6D;
        overflow: hidden;
        display: flex;
        align-items: center;
        opacity: 0;
        transform: translateY(-100%);
        transition: all .3s ease;
    }

    #movingBannerTop.visible {
        opacity: 1;
        transform: translateY(0);
    }

    #movingBannerTop p {
        color: #fff;
        display: inline-block;
        white-space: nowrap;
        padding-left: 100%;
        position: absolute;
    }

    #bannerTextOne {
        animation: bannerAnimationOne 20s linear infinite;
    }

    #bannerTextTwo {
        animation: bannerAnimatioTwo 20s linear infinite;
    }

    @keyframes bannerAnimationOne {
        0% {
            transform: translateX(0);
            visibility: visible;
        }

        50% {
            transform: translateX(-100%);
            visibility: hidden;
        }

        100% {
            transform: translateX(-100%);
            visibility: hidden;
        }
    }

    @keyframes bannerAnimatioTwo {
        0% {
            transform: translateX(0);
            visibility: hidden;
        }

        50% {
            transform: translateX(0);
            visibility: visible;
        }

        100% {
            transform: translateX(-100%);
            visibility: visible;
        }
    }

    @media screen and (max-width: 920px) {
        @keyframes addPadding {
            to {
                padding-top: 9.9vh;
            }
        }

        #movingBannerTop {
            height: 10vh;
        }

        #bannerTextOne {
            animation: bannerAnimationOne 15s linear infinite;
        }

        #bannerTextTwo {
            animation: bannerAnimatioTwo 15s linear infinite;
        }
    }
</style>

Teks Statis di bawah Website

Banner terlihat seperti berikut:

Salin code di bawah ini dan masukkan ke kotak Custom code di pengaturan integrasi website Anda.

CATATAN

Ganti frase This is the text inside the banner dengan teks yang Anda inginkan sebelum penyimpan perubahan
Jika Anda menguasai CSS, Anda juga bisa mengatur ukuran dan warna banner dengan mengedit atribut khusus

<script>
    const bannerText = 'This is the text inside the banner';
    const bannerBottom = document.createElement('div');
    const bannerCloseButton = document.createElement('span');

    bannerBottom.id = 'bottomBanner';
    bannerBottom.append(bannerCloseButton);
    bannerBottom.insertAdjacentHTML("beforeend", `<p>${bannerText}</p>`);

    bannerCloseButton.addEventListener('click', () => {
        bannerBottom.style.display = 'none';
    })

    setInterval(() => {
        if (!document.querySelector('#bottomBanner')) {
            document.querySelector('main').append(bannerBottom);
        }
    });
</script>

<style>
    #bottomBanner {
        background-color: rgba(255, 0, 0, 0.7);
        position: fixed;
        bottom: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 5vh;
        z-index: 15;
    }

    #bottomBanner p {
        color: #000;
    }

    #bottomBanner span {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        left: 1rem;
        width: 30px;
        height: 30px;
        cursor: pointer;
        transition: .2s;
    }

    #bottomBanner span:hover {
        background-color: #fff3;
    }

    #bottomBanner span:before {
        transform: rotate(315deg);
    }

    #bottomBanner span:after {
        transform: rotate(45deg);
    }

    #bottomBanner span:before,
    #bottomBanner span:after {
        background-color: #000;
        position: absolute;
        top: 14px;
        left: 6px;
        width: 20px;
        height: 2px;
        content: '';
        border-radius: 2px;
    }

    @media screen and (max-width: 920px) {
        #bottomBanner {
            height: 10vh;

        }
    }
</style>