Blogger’da Yüzen Reklam (Floating Ad) Slotu Yapımı

Blogger’da Yüzen Reklam (Floating Ad) Slotu Yapımı

Blogger sitenizde reklam görünürlüğünü artırmanın pratik yollarından biri, sayfanın sağında ve/veya solunda sabit kalan yüzen reklam (floating ad) alanları oluşturmaktır. Bu yöntem, özellikle masaüstü ziyaretçilerde reklamın ekran içinde kalmasını sağlayarak tıklanma ve görüntülenme potansiyelini yükseltebilir.

Bu AGMO rehberinde; Blogger’a yüzen reklam slotu eklemeyi, mobil cihazlarda otomatik gizlemeyi ve isterseniz kullanıcıya “kapat” seçeneği sunmayı adım adım anlatıyoruz.

Yüzen Reklam (Floating Ad) Nedir?

Yüzen reklam; sayfa kaydırılsa bile belirlenen konumda sabit duran reklam alanıdır. Genellikle sol ve sağ kenara sabitlenir. İçeriği kapatmadığı ve deneyimi bozmadığı sürece, masaüstü kullanımda oldukça verimlidir.

Önemli Not: Mobil Uyumluluk

Masaüstünde iyi çalışan bu reklam tipi, mobilde ekrana sığmayıp içerikle çakışabilir. Bu yüzden doğru yaklaşım; mobil ekranlarda reklamı otomatik gizlemek ve yalnızca geniş ekranlarda göstermektir. Aşağıdaki kod bunu hazır şekilde içerir.

Adım 1: Blogger’da HTML/JavaScript Gadget Ekleme

1. Blogger paneline girin.
2. Tema veya Yerleşim (Layout) bölümünü açın.
3. Uygun bir alanda Gadget ekle seçeneğine tıklayın.
4. HTML/JavaScript gadget’ını seçip ekleyin.

Adım 2: Yüzen Reklam Slotu Kodunu Yapıştırın

Aşağıdaki kodu yeni eklediğiniz HTML/JavaScript gadget içine yapıştırın. Kod; solda ve sağda iki ayrı reklam alanı oluşturur, ayrıca mobilde gizler ve kapatma butonu içerir.

<style>
.fixed-leftSd, .fixed-rightSd{
  position:fixed;
  top:80px;
  width:160px;
  height:600px;
  z-index:9999;
}
.fixed-leftSd{ left:0; }
.fixed-rightSd{ right:0; }

.close-fixedSd{
  position:absolute;
  top:-28px;
  left:0;
  width:160px;
  padding:6px 0;
  font-size:12px;
  line-height:1;
  text-align:center;
  background:#eef2f7;
  color:#334155;
  border:1px solid #e2e8f0;
  border-radius:10px 10px 0 0;
  cursor:pointer;
  user-select:none;
}

@media (max-width: 900px){
  .fixed-leftSd, .fixed-rightSd{ display:none !important; }
}
</style>

<div class="fixed-leftSd">
  <div class="close-fixedSd" onclick="this.parentElement.style.display='none';">Reklamı Kapat</div>
  <!-- SOL REKLAM KODUNUZU BURAYA YAPIŞTIRIN -->
</div>

<div class="fixed-rightSd">
  <div class="close-fixedSd" onclick="this.parentElement.style.display='none';">Reklamı Kapat</div>
  <!-- SAĞ REKLAM KODUNUZU BURAYA YAPIŞTIRIN -->
</div>  

Adım 3: AdSense Reklam Kodunu Yerleştirin

Kod içinde yer alan şu alanlara reklam kodunuzu ekleyin:

• SOL REKLAM KODUNUZU BURAYA YAPIŞTIRIN
• SAĞ REKLAM KODUNUZU BURAYA YAPIŞTIRIN

Genellikle 160x600 veya otomatik uyumlu (responsive) birimler masaüstü kenar reklamları için uygundur. Eğer temanızın içerik genişliği çok büyükse, top değerini (80px) ve genişliği (160px) kendi tasarımınıza göre düzenleyebilirsiniz.

Adım 4: Kontrol ve İnce Ayar

• Masaüstünde sayfayı yenileyip reklamların sabit durduğunu doğrulayın.
• Mobilde görünmediğini test edin (ekranı daraltarak da kontrol edebilirsiniz).
• Gerekirse top:80px değerini menü yüksekliğinize göre 60–140 aralığında ayarlayın.

AdSense Politikaları ve Kullanıcı Deneyimi

Reklam yerleşimi yaparken temel hedef; içerik okunurluğunu bozmadan görünürlük sağlamaktır. Yüzen reklamlar içerik alanını kapatmamalı, kullanıcı etkileşimini engellememeli ve özellikle mobilde çakışmaya neden olmamalıdır. Bu rehberdeki yaklaşım, kullanıcı deneyimine öncelik verdiği için daha güvenli bir uygulamadır.

Sonuç

Blogger’da yüzen reklam slotu kurmak, doğru uygulandığında reklam görünürlüğünü artıran etkili bir yöntemdir. Bu rehberdeki kod ile masaüstünde sol/sağ sabit reklam alanları oluşturabilir, mobilde otomatik gizleyebilir ve ziyaretçiye kapatma seçeneği sunabilirsiniz. Daha gelişmiş yerleşimler için AGMO stilinize göre ölçüleri ve konumlandırmayı rahatça özelleştirebilirsiniz.