CSS ve Javascript Kodu ile Zamanlı Popup Afiş Reklam Alanı Oluşturma

CSS ve Javascript kodları ile zamanlı afiş reklam alanı oluşturmak için bilgiler paylaşacağım. Bu yazımızdaki bilgiler ile blog sitenlerinde...

CSS ve Javascript kodları ile zamanlı afiş reklam alanı oluşturmak için bilgiler paylaşacağım. Bu yazımızdaki bilgiler ile blog sitenlerinde pop-up türünde açılır bir bilgi kutusu veya pop-up türü reklam yayını yapabilirsiniz.

Pop-up afiş reklam eklentisi, blog ziyaretçilerinin herhangi bir sayfayı ziyaret etmesinden birkaç saniye sonra görüntülenir. Çünkü, her sayfanın açılması ve yenilenmesi için bir zamana (yüklenme zamanı) ihtiyacı vardır.

Pop-up afiş reklamını kapat düğmesine veya herhangi bir boş alana tıklayarak kapatabilir ve sayfa içeriğini okumaya devam edebilirsiniz.

Pop-up afiş reklam eklentisi ile Google Adsense reklamlarını yayınlamak yasak olup, Adsense reklam yayınlama politikalarına aykırıdır. Bu nedenle, blog sitenizde pop-up türünde reklam eklentileri ile Google Adsense reklamlarını yayınlamayın.

Ürün satışı yapan bir çok web sitesi veya blog sitesi sahibi, ürünleri için pop-up türü reklam vermek istiyor. Bu tür reklam vermek isteyen ve yayınlamak isteyen blogcular için basit ve kullanışlı bir eklenti.

Pop-up Afiş Reklamı Eklentisi Nasıl Kurulur?

Blog sitenizin yönetim paneline giriş yapın ve yönetim panelinde bulunan Tema editör sayfasını açın.

Aşağıdaki CSS kodlarını tema aditör sayfasında bulunan </head> kodunun bir satır üzerine ekleyin.

CSS

<style>
/*<![CDATA[*/
.is-hide{
    display:none;
    visibility:hidden;
}
 .popup-box{
    position:fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
    width:100%;
    z-index:3
}
 .popup-box-content{
    width:800px;
    height:450px;
    display:block;
    position:absolute;
    top:50%;
    left:50%;
    border-radius:3px;
    margin:-225px 0 0 -420px;
    box-shadow:0 3px 20px 0 rgba(0,0,0,.5);
    z-index:2
}
 .popup-content{
    background:#fff;
    display:block;
    width:100%;
    height:100%;
    border-radius:3px;
    overflow:hidden
}
 .popup-overlay{
    background:#ff5722;
    position:absolute;
    top:0;
    left:0;
    bottom:0;
    width:100%;
    z-index:1
}
 .popup-box-close-button {
     background: #fff;
     position: absolute;
     width:2em;
     height:2em;
     line-height:2em;
     text-align: center;
     top:-1em;
     right: -1em;
     box-shadow: 0 -1px 1px 0 rgba(0,0,0,.2);
     border: none;
     border-radius: 50%;
     cursor:pointer;
     padding:0;
     outline:none
}
 .popup-box-close-button svg{
    vertical-align:middle
}
 .popup-content img{
    display:block;
    width:100%;
    height:100%;
    border-radius:3px;
}
 .popup-flow-box{
    position:relative;
    overflow:hidden
}
 @media screen and (max-width:800px){
    .popup-box-content{
        width:90%;
        height:auto;
        top:20%;
        border-radius:3px;
        margin:0 0 0 -45%
    }
     .popup-content img{
        height:auto
    }
}
/*]]>*/
</style>

Aşağıdaki HTML kodu </body> kodunun bir satır üzerine ekleyin.

HTML

<div class='popup-box is-hide' id='popup-box'>
    <div aria-label='Close' class="popup-overlay" onclick='document.getElementById("popup-box").style.display="none";removeClassonBody();' role="button" tabindex="0"></div>
    <div class='popup-box-content'>
        <a href='https://www.arlinadesign.com/2019/05/blogger-popup-banner-timeout.html' rel='noopener noreferrer' target='_blank' title='Bağlantı başlığını ekleyin'>
            <div class='popup-content'>
                <img alt='Resim alt bilgisi ekleyin' height='318' src='https://img-s1.onedio.com/id-5ccc578acc4b26f85d92ac38/rev-0/w-635/f-jpg-webp/s-875942d7101242b1f8ecd1b68f5ff7a5b2bd574b.webp' title='Resim başlık bilgisi ekleyin' width='635' />
            </div>
        </a>
        <button aria-label='Close' class='popup-box-close-button' onclick='document.getElementById("popup-box").style.display="none";removeClassonBody();'><svg height='24' viewBox='0 0 24 24' width='24'><path d='M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z' fill='#333'></path></svg></button>
    </div>
</div>

HTML kod içerisinde bulunan bağlantı ve resim alanını düzenleyin. Sitenizde bulunan herhangi sayfa veya yayın için veya bilgilendirme mesajı için, bağlantı kodu içerisinde rel='noopener noreferrer' kodunu kaldırın.

Aşağıdaki Javascript kodnudu yukarıdaki HTML kodun hemen bir satır altına ekleyin.

Javascript

<script>
//<![CDATA[
setTimeout(function() {
    document.getElementById('popup-box').classList.remove('is-hide');
    document.body.className += " popup-flow-box"
}, 4800);

function removeClassonBody() {
    var element = document.body;
    element.className = element.className.replace(/\bpopup-flow-box\b/g, "")
}
//]]>
</script>

Raklam açılma ve görüntüleme süresini uzakmak veya kısaltmak için Javascript kodu içerisinde bulunan 4800 değeri ile ayarlayabilirsiniz. Burada her 1000 değeri 1 (bir) saniyeye denk gelir.

Ön İzleme

Pop-up afiş reklam eklentisi için herhangi bir JS kütüphanesi kullanmanıza gerek yoktur ve eklentiyi kullanız durumunda blog sitenizin ve sayfalarının yüklenmesine herhangi bir etki etmez.

Pop-up afiş reklamı eklentisi kurulumu hakkında daha fazla bilgi almak ve görüşlerinizi bizimle paylaşmak için yorum formunu kullanabilirsiniz.