Merhaba arkadaşlar bu gün sizlere mobil uyumlu reklam kodunu göstereceğim. Yalnız burada gösterilen teknik adsense reklamları için geçerli değildir. Adsense reklamlarında büyük reklam kullanıyorsanız, reklamın belli bir kısmı gözükmeyeceğinden ban yeme ihtimaliniz olasıdır. Görsel olarak bir link çıkışı sağlıyorsanız tavsiye edilir. Bu kod sayesinde sitemiz mobilden açıldığında reklamlarımız sayfa boyutuna göre küçülüp büyüyecektir. Bu sayede sitemizin görsel yapısı bozulmadan reklam yayınlayarak gelir elde edeceğiz. Son derece kullanışlı olan bu kod CSS ile yapıyoruz. Dilerseniz dersimize geçelim.

 Mobil Uyumlu Reklam

İlk önce Css dosyamıza girip şu kodları ekliyoruz:

.ufak-reklamx{
display:none;
}
@media screen and (max-width:480px){
.ufak-reklam{
display:none;
}
.ufak-reklamx{
display:block;
}
}

Peki boyutlarını nasıl ayarlayacağız onuda buradan yapıyoruz:

@media screen and (max-width:480px)

Reklamın gözükeceği sayfaya ise şu kodları giriyoruz:

<div class="ufak-reklam">Reklam 1</div>
<div class="ufak-reklamx">Reklam 2</div>

Bu şekilde hem mobil için hazırladığımız hemde normal reklamlarımızı yayınlaya biliriz.

Reklamım Mobilde Gözükmesin

Bu yöntemi adsense reklamları farketmeksizin pek sağlıklı bir şekilde tüm reklam çeşitlerine kolaylıkla uygulayabilirsiniz. Genellikle 728*90 ebatlarında ki adsense reklamları mobil uyumlu(responsive) sitelerde, site mobile göre boyutlandığında reklam yeniden boyutlanamıyor. Bu durumda ya adsensenin yalnızca mobil destekleyen reklamlarını kullanmanız gerekiyor yada reklamı mobilde pasif hale getirerek en azından sitenin görüntüsü bozulmasın şeklinde bir ince ayar çekebilirsiniz.

<div class="reklamUst">
reklam kodunuz buraya eklenecek
</div>

aşağıdaki kodu da temanızın css dosyasında en alta eklemeniz kafi

@media screen and (max-width:1070px) {
    .reklamUst {overflow:hidden; width:0; height:0;
    visibility: hidden;}
}

ekleme işlemlerinden sonra temanızı masaüstü bir ekranda dahi ekranı küçülterek reklamın görünürlüğünü test edebilirsiniz.