Bildiniz üzere Google 21 Nisanda mobil arayüz güncellemesi gerçekleştirdi. Bu güncelleme ile birlikte web siteleri hızla mobil tasarıma yöneldi. Şayet mobil tasarımınız yoksa bir an önce siteleriniz için bir mobil tasarım elde ediniz. Aksi halde güncelleme ile birlikte sıralamanız önemli ölçüde değişecektir. Bu güncelleme ile birlikte adsense reklamlarının boyutlarını da siteleriniz de değiştirmeniz gerekebilir. Şayet değişiklik yapılmaz ise ziyaretçi açısından hoş olmayan bir görüntü elde edilmiş olur. Bu da hem ziyaretçi kaybınıza hemde reklamlar tıklama oranlarında bir düşüşe neden olacaktır.
Adsense Duyarlı Reklam Birimi Nasıl Oluşturulur?
Siteleriniz için duyarlı reklam birimleri oluşturmak çok basittir. Emin olun bu sayede reklam gelirleriniz de önemli ölçüde artış olacaktır. Bu işlem için öncelikle Adsense Hesabınıza giriş yapınız.
Hesabınıza giriş yaptıktan sonra üst menüde yer alan Reklamlarım yazan yere tıklıyoruz.
Açılan sayfadan Yeni Reklam Birimi yazan yere tıklıyoruz.
Yeni Reklam Birimlerinden Otomatik Boyut esnek yazan reklam birimini seçip en altta er alan Kaydet ve Kodu Al butonuna tıklayıp adsense reklam kodumuzu alıyoruz. Fakat henüz işimiz bitmedi. Buraya kadar olan kısım sadece adsense üzerinde esnek reklam birimi oluşturmuş olduk. Sıra geldi bunu sitemize yerleştirme işlemine.
Duyarlı Reklam Birimini Siteye Yerleştirme
Sizlere benim duyarlı reklamlar için en çok kullandığım kodları vereceğim. Öncelikle sitemize reklam kodlarını yerleştireceğimiz bir <div>...</div> oluşturmamız gerekli.
Örnek:
<div class="duyarli_reklam">adsense duyarlı reklam kodlarımız </div>
Yukarıdaki kodu reklamlarımızın görünmesini istediğimiz sayfada uygun yerlere yerleştiriyoruz. "adsense duyarlı reklam kodlarımız " yazan yeri silip oluşturduğunuz adsense esnek reklam kodunu buraya yapıştırın. Sıra geldi css kodlarımıza.
Temanıza ait css dosyasını açıp aşağıdaki kodları sayfanın en altına yerleştirin.
@media (min-width: 1000px) {.duyarli_reklam { width: 728px; height: 90px;}}
@media (min-width: 470px) and (max-width: 999px) {
.duyarli_reklam { width: 468px; height: 60px;}
}
@media (max-width: 469px) {
.duyarli_reklam { width: 300px; height: 60px;}}
Yukarıdaki kodaları açıklamamız gerekirse,
@media (min-width: 1000px): burada tarayıcımız dedik ki eğer ekran çözünürlüğümüz 1000px den büyük ise oluşturduğumuz div class ımız yani class="duyarli_reklam" genişliği ve yüksekliğini 728px ve 90px alarak ayarla.
@media (min-width: 470px) and (max-width: 999px) : burada ise ekran çözünürlüğümüz 999px den küçük ve 470px den büyük ise oluşturduğumuz div class ımız yani class="duyarli_reklam" genişliği ve yüksekliğini 468px ve 60px alarak ayarla.
@media (max-width: 469px) : burada ise ekran çözünürlüğümüz 469px den küçük ise oluşturduğumuz div class ımız yani class="duyarli_reklam" genişliği ve yüksekliğini 300px ve 60px alarak ayarla.
İşte bu kadar basit. Unutmayın bu kodları ben kendi siteme göre uyarladım. Sizde kod üzerinde değişiklik yaparak kendi sitelerinize göre uygulayın. Burada sadece yatay adsense kod için uygulandı. Siz bu kodları siteniz için dilediğiniz gibi değiştirebilir ve çoğaltabilirsiniz.
0 yorum :
Yorum Gönder