Banner tidak akan terlihat dari bagian editor tetapi Anda bisa melihatnya di pratinjau atau saat website online 💡 <\/p>\n<\/div>
\n<\/p>
Teks Statis di atas Menu Navigasi<\/h1>
Banner terlihat seperti berikut:<\/p>
![\"A](\"\/id\/support\/wp-content\/uploads\/sites\/57\/2023\/06\/96265439-2277-4402-822b-bd61c332eb7f.jpg\")
<\/div>Salin code di bawah ini dan masukkan ke kotak Custom code<\/a><\/b> di pengaturan integrasi <\/b>website Anda.<\/p> \n<\/p> CATATAN<\/b><\/p> Ganti frase This is the text inside the banner <\/i><\/b>dengan teks yang Anda inginkan sebelum penyimpan perubahan<\/p>\n<\/li>\n Jika Anda menguasai CSS<\/a><\/b>, <\/b>Anda juga bisa mengatur ukuran dan warna banner dengan mengedit atribut khusus<\/p>\n<\/li>\n<\/ul> \n<\/p> Banner terlihat seperti berikut:<\/p> Salin code di bawah ini dan masukkan ke kotak Custom code<\/a><\/b> di pengaturan integrasi <\/b>website Anda.<\/p> \n<\/p> CATATAN<\/b><\/p> Ganti frase This is the first text <\/i><\/b>dan This is the second text <\/i><\/b>dengan teks yang Anda inginkan sebelum penyimpan perubahan<\/p>\n<\/li>\n Jika Anda menguasai CSS<\/a><\/b>, <\/b>Anda juga bisa mengatur ukuran dan warna banner dengan mengedit atribut khusus<\/p>\n<\/li>\n<\/ul> Banner terlihat seperti berikut:<\/p> \n<\/p> Salin code di bawah ini dan masukkan ke kotak Custom code<\/a><\/b> di pengaturan integrasi <\/b>website Anda.<\/p> \n<\/p> CATATAN<\/b><\/p>\n
<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><\/code><\/pre>Teks Bergerak di atas Menu Navigasi<\/h1>
![\"A](\"\/id\/support\/wp-content\/uploads\/sites\/57\/2023\/06\/850c8343-a989-49b6-8458-62f98b7b40d9.jpg\")
<\/div>\n
<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><\/code><\/pre>Teks Statis di bawah Website<\/h1>
![\"A](\"\/id\/support\/wp-content\/uploads\/sites\/57\/2023\/06\/5fa87f4a-7a37-474e-bf19-1e636ea41c62.jpg\")
<\/div>