Naudodami Hostinger svetainių kūrimo įrankį, kodo pagalba nesunkiai pridėsite reklamjuostę svetainės viršuje arba apačioje.
Svetainės redagavimo aplinkoje reklamjuostės nesimato – ji matoma peržiūros režime ir realioje svetainės versijoje 💡
Reklamjuostė su statišku tekstu virš svetainės meniu juostos
Ši reklamjuostė atrodo taip:
Nusikopijuokite žemiau esantį kodą ir įklijuokite jį svetainės integracijų nustatymų laukelyje Kodas.
PASTABOS
Kode esančią frazę This is the text inside the banner pakeiskite norimu tekstu
Jei turite CSS žinių, galite personalizuoti reklamjuostės dydį ir spalvą keisdami tam tikrus stiliaus atributus kode
<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>
Reklamjuostė su judančiu tekstu virš svetainės meniu juostos
Ši reklamjuostė atrodo taip:
Nusikopijuokite žemiau esantį kodą ir įklijuokite jį svetainės integracijų nustatymų laukelyje Kodas.
PASTABOS
Kode esančias frazes This is the first text ir This is the second text pakeiskite norimu tekstu
Jei turite CSS žinių, galite personalizuoti reklamjuostės dydį ir spalvą keisdami tam tikrus stiliaus atributus kode
<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>
Reklamjuostė su statišku tekstu svetainės apačioje
Ši reklamjuostė atrodo taip:
Nusikopijuokite žemiau esantį kodą ir įklijuokite jį svetainės integracijų nustatymų laukelyje Kodas.
PASTABOS
Kode esančią frazę This is the text inside the banner pakeiskite norimu tekstu
Jei turite CSS žinių, galite personalizuoti reklamjuostės dydį ir spalvą keisdami tam tikrus stiliaus atributus kode
<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>