{"id":116,"date":"2023-01-04T15:37:58","date_gmt":"2023-01-04T15:37:58","guid":{"rendered":"https:\/\/blog.hostinger.io\/lt\/support\/2023\/01\/04\/6511583-hostinger-svetainiu-kurimo-irankis-kaip-prideti-reklamjuoste\/"},"modified":"2025-08-26T19:48:22","modified_gmt":"2025-08-26T19:48:22","slug":"6511583-hostinger-svetainiu-kurimo-irankis-kaip-prideti-reklamjuoste","status":"publish","type":"post","link":"https:\/\/www.hostinger.com\/lt\/support\/6511583-hostinger-svetainiu-kurimo-irankis-kaip-prideti-reklamjuoste\/","title":{"rendered":"Hostinger Svetaini\u0173 K\u016brimo \u012erankis: Kaip Prid\u0117ti Reklamjuost\u0119?"},"content":{"rendered":"<p class=\"no-margin\">Naudodami <b><a href=\"https:\/\/www.hostinger.lt\/svetaines-kurimas\" target=\"_blank\" class=\"intercom-content-link\" rel=\"noopener\">Hostinger svetaini&#371; k&#363;rimo &#303;rank&#303;<\/a><\/b>, kodo pagalba nesunkiai prid&#279;site reklamjuost&#281; svetain&#279;s vir&scaron;uje arba apa&#269;ioje. <\/p><div class=\"intercom-interblocks-callout\" style=\"background-color: #e3e7fa80;border-color: #334bfa33\">\n<p class=\"no-margin\">Svetain&#279;s redagavimo aplinkoje reklamjuost&#279;s nesimato &ndash; ji matoma per&#382;i&#363;ros re&#382;ime ir realioje svetain&#279;s versijoje &#128161; <\/p>\n<\/div><p class=\"no-margin\">\n<\/p><h1 id=\"h_c7894af026\">Reklamjuost&#279; su stati&scaron;ku tekstu vir&scaron; svetain&#279;s meniu juostos<\/h1><p class=\"no-margin\">&Scaron;i reklamjuost&#279; atrodo taip:<\/p><p class=\"no-margin\">\n<\/p><div class=\"intercom-container intercom-align-center\"><img decoding=\"async\" src=\"\/lt\/support\/wp-content\/uploads\/sites\/58\/2023\/01\/ab12a4f5-53df-4f15-a3ef-270228ab45fe-scaled.png\" alt=\"Baneris su stati&scaron;ku tekstu vir&scaron; svetain&#279;s meniu juostos\"><\/div><p class=\"no-margin\">Nusikopijuokite &#382;emiau esant&#303; kod&#261; ir &#303;klijuokite j&#303; svetain&#279;s integracij&#371; nustatym&#371; laukelyje <b><a href=\"\/lt\/support\/6445594-svetainiu-kurimo-irankis-kaip-prideti-koda-i-svetaines-kodo-head-head-skilti\" target=\"_blank\" class=\"intercom-content-link\">Kodas<\/a><\/b>.<\/p><p class=\"no-margin\">\n<\/p><p class=\"no-margin\"><b>PASTABOS<\/b><\/p><ul>\n<li>\n<p class=\"no-margin\">Kode esan&#269;i&#261; fraz&#281; <b><i>This is the text inside the banner<\/i><\/b> pakeiskite norimu tekstu<\/p>\n<\/li>\n<li>\n<p class=\"no-margin\">Jei turite <b><a href=\"https:\/\/www.w3schools.com\/css\/\" target=\"_blank\" class=\"intercom-content-link\" rel=\"noopener\">CSS &#382;ini&#371;<\/a><\/b>, galite personalizuoti reklamjuost&#279;s dyd&#303; ir spalv&#261; keisdami tam tikrus stiliaus atributus kode<\/p>\n<\/li>\n<\/ul><pre><code>&lt;script&gt;<br>    const bannerText = 'This is the text inside the banner';<br>    const topBanner = document.createElement('div');<br><br>    topBanner.id = 'bannerTop';<br>    topBanner.insertAdjacentHTML(\"afterbegin\", `&lt;p&gt;${bannerText}&lt;\/p&gt;`);<br><br>    setTimeout(() =&gt; {<br>        requestAnimationFrame(() =&gt; {<br>            document.body.append(topBanner);<br>        })<br><br>        setTimeout(() =&gt; {<br>            requestAnimationFrame(() =&gt; {<br>                topBanner.classList.add('visible');<br>            })<br>        }, 50);<br>    }, 1500);<br>&lt;\/script&gt;<br><br>&lt;style&gt;<br>    header {<br>        animation-delay: 1.5s;<br>        animation-duration: .4s;<br>        animation-iteration-count: 1;<br>        animation-fill-mode: forwards;<br>        animation-timing-function: ease;<br>        animation-name: addPadding;<br>    }<br><br>    @keyframes addPadding {<br>        to {<br>            padding-top: 4.9vh;<br>        }<br>    }<br><br>    #bannerTop {<br>        z-index: 20;<br>        position: fixed;<br>        top: 0;<br>        width: 100%;<br>        height: 5vh;<br>        display: flex;<br>        justify-content: center;<br>        align-items: center;<br>        background-color: #CF8D6D;<br>        overflow: hidden;<br>        opacity: 0;<br>        transform: translateY(-100%);<br>        transition: all .3s ease;<br>    }<br><br>    #bannerTop.visible {<br>        opacity: 1;<br>        transform: translateY(0);<br>    }<br><br>    #bannerTop p {<br>        color: #fff;<br>    }<br><br>    @media screen and (max-width: 920px) {<br>        #bannerTop {<br>            height: 10vh;<br>            flex-direction: column;<br>        }<br><br>        @keyframes addPadding {<br>            to {<br>                padding-top: 9.9vh;<br>            }<br>        }<br>    }<br>&lt;\/style&gt;<\/code><\/pre><p class=\"no-margin\">\n<\/p><h1 id=\"h_1c71e9d562\">Reklamjuost&#279; su judan&#269;iu tekstu vir&scaron; svetain&#279;s meniu juostos<\/h1><p class=\"no-margin\">&Scaron;i reklamjuost&#279; atrodo taip:<\/p><p class=\"no-margin\">\n<\/p><div class=\"intercom-container intercom-align-center\"><img decoding=\"async\" src=\"\/lt\/support\/wp-content\/uploads\/sites\/58\/2023\/01\/332a6610-e605-49c4-bebf-68d6ee92a8c2-scaled.png\" alt=\"Baneris su judan&#269;iu tekstu vir&scaron; svetain&#279;s meniu juostos\"><\/div><p class=\"no-margin\">Nusikopijuokite &#382;emiau esant&#303; kod&#261; ir &#303;klijuokite j&#303; svetain&#279;s integracij&#371; nustatym&#371; laukelyje <b><a href=\"\/lt\/support\/6445594-svetainiu-kurimo-irankis-kaip-prideti-koda-i-svetaines-kodo-head-head-skilti\" target=\"_blank\" class=\"intercom-content-link\">Kodas<\/a><\/b>.<\/p><p class=\"no-margin\">\n<\/p><p class=\"no-margin\"><b>PASTABOS<\/b><\/p><ul>\n<li>\n<p class=\"no-margin\">Kode esan&#269;ias frazes <b><i>This is the first text <\/i><\/b>ir <b><i>This is the second text<\/i><\/b> pakeiskite norimu tekstu<\/p>\n<\/li>\n<li>\n<p class=\"no-margin\">Jei turite <b><a href=\"https:\/\/www.w3schools.com\/css\/\" target=\"_blank\" class=\"intercom-content-link\" rel=\"noopener\">CSS &#382;ini&#371;<\/a><\/b>, galite personalizuoti reklamjuost&#279;s dyd&#303; ir spalv&#261; keisdami tam tikrus stiliaus atributus kode<\/p>\n<\/li>\n<\/ul><pre><code>&lt;script&gt;<br>    const bannerTextOne = 'This is the first text';<br>    const bannerTextTwo = 'This is the second text';<br>    const topMovingBanner =  document.createElement('div');<br><br>    topMovingBanner.id = 'movingBannerTop';<br>    topMovingBanner.insertAdjacentHTML(\"afterbegin\", `&lt;p id=\"bannerTextOne\"&gt;${bannerTextOne}&lt;\/p&gt;&lt;p id=\"bannerTextTwo\"&gt;${bannerTextTwo}&lt;\/p&gt;`);<br><br>    setTimeout(() =&gt; {<br>        requestAnimationFrame(() =&gt; {<br>            document.body.append(topMovingBanner);<br>        })<br>        setTimeout(() =&gt; {<br>            requestAnimationFrame(() =&gt; {<br>                topMovingBanner.classList.add('visible');<br>            });<br>        }, 50);<br>    }, 1500);<br>&lt;\/script&gt;<br><br>&lt;style&gt;<br>    header {<br>        animation-delay: 1.5s;<br>        animation-duration: .4s;<br>        animation-iteration-count: 1;<br>        animation-fill-mode: forwards;<br>        animation-timing-function: ease;<br>        animation-name: addPadding;<br>    }<br><br>    @keyframes addPadding {<br>        to {<br>            padding-top: 4.9vh;<br>        }<br>    }<br><br>    #movingBannerTop {<br>        z-index: 20;<br>        position: fixed;<br>        top: 0;<br>        width: 100%;<br>        height: 5vh;<br>        background-color: #CF8D6D;<br>        overflow: hidden;<br>        display: flex;<br>        align-items: center;<br>        opacity: 0;<br>        transform: translateY(-100%);<br>        transition: all .3s ease;<br>    }<br><br>    #movingBannerTop.visible {<br>        opacity: 1;<br>        transform: translateY(0);<br>    }<br><br>    #movingBannerTop p {<br>        color: #fff;<br>        display: inline-block;<br>        white-space: nowrap;<br>        padding-left: 100%;<br>        position: absolute;<br>    }<br><br>    #bannerTextOne {<br>        animation: bannerAnimationOne 20s linear infinite;<br>    }<br><br>    #bannerTextTwo {<br>        animation: bannerAnimatioTwo 20s linear infinite;<br>    }<br><br>    @keyframes bannerAnimationOne {<br>        0% {<br>            transform: translateX(0);<br>            visibility: visible;<br>        }<br><br>        50% {<br>            transform: translateX(-100%);<br>            visibility: hidden;<br>        }<br><br>        100% {<br>            transform: translateX(-100%);<br>            visibility: hidden;<br>        }<br>    }<br><br>    @keyframes bannerAnimatioTwo {<br>        0% {<br>            transform: translateX(0);<br>            visibility: hidden;<br>        }<br><br>        50% {<br>            transform: translateX(0);<br>            visibility: visible;<br>        }<br><br>        100% {<br>            transform: translateX(-100%);<br>            visibility: visible;<br>        }<br>    }<br><br>    @media screen and (max-width: 920px) {<br>        @keyframes addPadding {<br>            to {<br>                padding-top: 9.9vh;<br>            }<br>        }<br><br>        #movingBannerTop {<br>            height: 10vh;<br>        }<br><br>        #bannerTextOne {<br>            animation: bannerAnimationOne 15s linear infinite;<br>        }<br><br>        #bannerTextTwo {<br>            animation: bannerAnimatioTwo 15s linear infinite;<br>        }<br>    }<br>&lt;\/style&gt;<\/code><\/pre><p class=\"no-margin\">\n<\/p><h1 id=\"h_47403504e7\">Reklamjuost&#279; su stati&scaron;ku tekstu svetain&#279;s apa&#269;ioje<\/h1><p class=\"no-margin\">&Scaron;i reklamjuost&#279; atrodo taip:<\/p><p class=\"no-margin\">\n<\/p><div class=\"intercom-container intercom-align-center\"><img decoding=\"async\" src=\"\/lt\/support\/wp-content\/uploads\/sites\/58\/2023\/01\/c62b7f22-7bb3-4cec-ab14-6c277334501f.jpg\" alt=\"Baneris su stati&scaron;ku tekstu svetain&#279;s apa&#269;ioje\"><\/div><p class=\"no-margin\">Nusikopijuokite &#382;emiau esant&#303; kod&#261; ir &#303;klijuokite j&#303; svetain&#279;s integracij&#371; nustatym&#371; laukelyje <b><a href=\"\/lt\/support\/6445594-svetainiu-kurimo-irankis-kaip-prideti-koda-i-svetaines-kodo-head-head-skilti\" target=\"_blank\" class=\"intercom-content-link\">Kodas<\/a><\/b>.<\/p><p class=\"no-margin\">\n<\/p><p class=\"no-margin\"><b>PASTABOS<\/b><\/p><ul>\n<li>\n<p class=\"no-margin\">Kode esan&#269;i&#261; fraz&#281; <b><i>This is the text inside the banner<\/i><\/b> pakeiskite norimu tekstu<\/p>\n<\/li>\n<li>\n<p class=\"no-margin\">Jei turite <b><a href=\"https:\/\/www.w3schools.com\/css\/\" target=\"_blank\" class=\"intercom-content-link\" rel=\"noopener\">CSS &#382;ini&#371;<\/a><\/b>, galite personalizuoti reklamjuost&#279;s dyd&#303; ir spalv&#261; keisdami tam tikrus stiliaus atributus kode<\/p>\n<\/li>\n<\/ul><pre><code>&lt;script&gt;<br>    const bannerText = 'This is the text inside the banner';<br>    const bannerBottom = document.createElement('div');<br>    const bannerCloseButton = document.createElement('span');<br><br>    bannerBottom.id = 'bottomBanner';<br>    bannerBottom.append(bannerCloseButton);<br>    bannerBottom.insertAdjacentHTML(\"beforeend\", `&lt;p&gt;${bannerText}&lt;\/p&gt;`);<br><br>    bannerCloseButton.addEventListener('click', () =&gt; {<br>        bannerBottom.style.display = 'none';<br>    })<br><br>    setInterval(() =&gt; {<br>        if (!document.querySelector('#bottomBanner')) {<br>            document.querySelector('main').append(bannerBottom);<br>        }<br>    });<br>&lt;\/script&gt;<br><br>&lt;style&gt;<br>    #bottomBanner {<br>        background-color: rgba(255, 0, 0, 0.7);<br>        position: fixed;<br>        bottom: 0;<br>        display: flex;<br>        justify-content: center;<br>        align-items: center;<br>        width: 100%;<br>        height: 5vh;<br>        z-index: 15;<br>    }<br><br>    #bottomBanner p {<br>        color: #000;<br>    }<br><br>    #bottomBanner span {<br>        position: absolute;<br>        top: 50%;<br>        transform: translateY(-50%);<br>        left: 1rem;<br>        width: 30px;<br>        height: 30px;<br>        cursor: pointer;<br>        transition: .2s;<br>    }<br><br>    #bottomBanner span:hover {<br>        background-color: #fff3;<br>    }<br><br>    #bottomBanner span:before {<br>        transform: rotate(315deg);<br>    }<br><br>    #bottomBanner span:after {<br>        transform: rotate(45deg);<br>    }<br><br>    #bottomBanner span:before,<br>    #bottomBanner span:after {<br>        background-color: #000;<br>        position: absolute;<br>        top: 14px;<br>        left: 6px;<br>        width: 20px;<br>        height: 2px;<br>        content: '';<br>        border-radius: 2px;<br>    }<br><br>    @media screen and (max-width: 920px) {<br>        #bottomBanner {<br>            height: 10vh;<br><br>        }<br>    }<br>&lt;\/style&gt;<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"<p>Su\u017einokite, kaip prid\u0117ti reklamjuost\u0119 \u012f svetain\u0119, sukurt\u0105 naudojant Hostinger svetaini\u0173 k\u016brimo \u012frank\u012f<\/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":[258],"tags":[],"class_list":["post-116","post","type-post","status-publish","format-standard","hentry","category-integracijos"],"hreflangs":[{"locale":"en-US","link":"https:\/\/www.hostinger.com\/support\/6511583-hostinger-website-builder-how-to-add-a-sticky-bar\/","default":1},{"locale":"es-ES","link":"https:\/\/www.hostinger.com\/es\/support\/6511583-hostinger-creador-de-sitios-web-como-anadir-un-banner\/","default":0},{"locale":"fr-FR","link":"https:\/\/www.hostinger.com\/fr\/support\/6511583-hostinger-createur-de-site-web-comment-ajouter-une-banniere\/","default":0},{"locale":"id-ID","link":"https:\/\/www.hostinger.com\/id\/support\/6511583-hostinger-website-builder-cara-menambahkan-banner\/","default":0},{"locale":"lt-LT","link":"https:\/\/www.hostinger.com\/lt\/support\/6511583-hostinger-svetainiu-kurimo-irankis-kaip-prideti-reklamjuoste\/","default":0},{"locale":"pt-PT","link":"https:\/\/www.hostinger.com\/br\/support\/6511583-hostinger-criador-de-sites-como-adicionar-um-banner\/","default":0}],"include_on_kodee":true,"_links":{"self":[{"href":"https:\/\/www.hostinger.com\/lt\/support\/wp-json\/wp\/v2\/posts\/116","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hostinger.com\/lt\/support\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hostinger.com\/lt\/support\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/lt\/support\/wp-json\/wp\/v2\/users\/581"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/lt\/support\/wp-json\/wp\/v2\/comments?post=116"}],"version-history":[{"count":2,"href":"https:\/\/www.hostinger.com\/lt\/support\/wp-json\/wp\/v2\/posts\/116\/revisions"}],"predecessor-version":[{"id":1749,"href":"https:\/\/www.hostinger.com\/lt\/support\/wp-json\/wp\/v2\/posts\/116\/revisions\/1749"}],"wp:attachment":[{"href":"https:\/\/www.hostinger.com\/lt\/support\/wp-json\/wp\/v2\/media?parent=116"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hostinger.com\/lt\/support\/wp-json\/wp\/v2\/categories?post=116"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hostinger.com\/lt\/support\/wp-json\/wp\/v2\/tags?post=116"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}