Blogger'a Splash Popup Reklam Ekleme

Birçok arkadaş blogger alt yapısında bulunan siteler için nasıl tam ekran özelliği olan splash reklam ekleyebiliriz diye sormuştu. Uzun zaman oldu. Ben de sizler için bu yazımda bunu paylaşmak istedim. Bu splash reklam mobil ve masaüstü için geçerli olacaktır.

İlk önce tema-HTML düzenle seçin. Daha sonra Ctrl+F ile arama bölümünü açın ve /body tag bulun. Hemen üstüne veya öncesine aşağıdaki kodu ekleyin.

<script>
    $(document).ready(function($) {
        $('.cb_splash_ads .close').click(function(event) {
            event.preventDefault();
            $('.cb_splash_ads').slideUp('slow');
        });
    });

    $(window).load(function(){
        setTimeout(function(){
            $('.cb_splash_ads').slideUp('slow');
        },3000);
    });
</script>

daha sonra tekrar Ctrl+F ile arama bölümünü açın ve tag hemen altına aşağıdaki

<style>
/*********************************
** Yapamcı: www.zekeriyacanbal.com
*********************************/
.cb_splash_ads {
    background-color: rgba(0,0,0,0.8);
    height: 100%;
    left: 0;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 99999;
}
.cb_splash_ads .pop {
    background-color: #fff;
    margin: 10% auto 0;
    padding: 5px;
    position: relative;
    max-width: 300px;
}
.cb_splash_ads .pop img {
    width: 100%;
 vertical-align: middle;
}
.cb_splash_ads .close {
    opacity: 1;
    position: absolute;
    right: -9px;
    top: -9px;
}
.cb_splash_ads .close img {
    height: 32px;
    width: 32px;
}
@media only screen and (max-width:768px){
    .cb_splash_ads .pop {margin-top:25%;}
  }
@media only screen and (max-width:320px){
    .cb_splash_ads .pop {margin: 25% 3% 0;}
  }
</style>

<div class='cb_splash_ads'>
  <div class='pop'>
 <a class='close' href='#'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLSSEEy7Cec1lHTbP5pPVHi9G5PlUiRpM899vXwXzPczVtyTOs8i_q5P4wt99r_Am5Ywh8bPW4pVS-jAsTKgCO0nu6PuPYA84E7XEm5x-In0lLUd_rnkD_wlsaYMq9kLWT2olA_3t-5Ec/s1600/close.gif'/></a>
 300x250 reklam kodunu buraya yapıştırın.
  </div>
</div>

kodlarını ekleyin. Bu kodları kendinize göre özelleştirme yapmak isterseniz. Aşağıdaki özelleştirmeleri yapabilirsiniz. 

• Otomatik olarak kapanma saniyesini mavi renkli 3000 olan değeri istediğiniz bir zaman belirleyin. 
• Eğer otomatik değilde kullanıcı kendi kapatsın diyorsanız yeşil renkli olan kod bölümünü silebilirsiniz.