Blogger Mobil Sayfalar İçin Sticky Reklam Eklentisi

Blogger sayfa düzeyi reklam özelliği ile mobil ekranlarda otomatik olarak yayınlanan Adsense kodu bulunuyor. Fakat, Adsense otomatik sayfa düzeyi reklamları bazen sayfanın üst kısmında yer alıyor ve sayfanın alt kısmı boş görüntüleniyor. Bu nedenle, Adsense reklamlarınız sayfanın alt kısmında görüntülenmesi için, bu yazımızda sticky özellikli sayfa düzeyi reklam eklentisini paylaşıyoruz.


Ziyaretçilerin blog sayfaları arasında dolaşımı engel olmamak için, sayfa düzeyi reklam eklentisinde kapatma butonu  da bulunmakta.

Bu reklam eklentisi sayesinde Adsense reklam politikalarına da uymuş olacaksınız. Otomatik reklamların sayfa düzeyinde açılması blog içeriğinin görüntülenmesini etkilemesi ve zorlaştırmasından dolayı, sayfa düzeyinde zorlamalar gibi uyarılar almanızı da engelleyecektir.

Blogger Sticky Reklam Eklentisi Kurulumu

Blogunuzun mobil sayfalarına, Adsense politikalarına uyumlu sayfa düzeyi reklam eklentisini kurmak için aşağıdaki adımları takip edin.

Birinci adım: Aşağıdaki CSS kodları blogunuzun şablon editör arasında bulunan </head> kodunun bir satır üzerine ekleyin.

CSS

<b:if cond='data:blog.pageType not in {&quot;static_page&quot;,&quot;error_page&quot;,} and not data:blog.searchQuery and data:blog.isMobileRequest == &quot;true&quot;'>
<style>
/*<![CDATA[*/
.sticky-ads{display:-ms-flexbox;display:-webkit-box;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;position:fixed;overflow:visible;text-align:center;bottom:-104px;left:0;width:100%;z-index:9999;max-height:104px;background-image:none;background-color:#fff;margin-bottom:0;padding-top:4px;box-shadow:0 0 5px 0 rgba(0,0,0,0.2);transition:all .4s ease-in-out}
.sticky-ads-close{position:absolute;width:28px;height:28px;top:-28px;right:0;background-image:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0nMTMnIGhlaWdodD0nMTMnIHZpZXdCb3g9JzM0MSA4IDEzIDEzJyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHhtbG5zOnhsaW5rPSdodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rJz48Zz48cGF0aCBzdHlsZT0nZmlsbDojNEY0RjRGJyBkPSdNMzU0IDkuMzFMMzUyLjY5IDhsLTUuMTkgNS4xOUwzNDIuMzEgOCAzNDEgOS4zMWw1LjE5IDUuMTktNS4xOSA1LjE5IDEuMzEgMS4zMSA1LjE5LTUuMTkgNS4xOSA1LjE5IDEuMzEtMS4zMS01LjE5LTUuMTl6Jz48L3BhdGg+PC9nPjwvc3ZnPg==");background-size:13px 13px;background-position:9px;background-color:#fff;background-repeat:no-repeat;box-shadow:0 -1px 1px 0 rgba(0,0,0,0.2);border:none;border-radius:12px 0 0 0;cursor:pointer}
.sticky-ads-close:before{position:absolute;content:"";top:-20px;right:0;bottom:0;left:-20px}
*{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
:active,:focus{outline:0}
/*]]>*/
</style>
</b:if>

Yukarıdaki CSS kodları sabit, hata ve arama sonuçları sayfarında görüntülenmez, yalnızca mobil sürümde görüntülenir. Aynı şekilde bu kural aşağıdaki HTML ve JQuery kodu için de geçerlidir.

İkinci adım: Aşağıdaki HTML ve JQuery kodunu olduğu gibi blogunuzun şablon editör sayfasında bulunan </body> kodunun bir satır üzerine ekleyin.

HTML ve JQuery

<b:if cond='data:blog.pageType not in {&quot;static_page&quot;,&quot;error_page&quot;,} and not data:blog.searchQuery and data:blog.isMobileRequest == &quot;true&quot;'>
<div class='sticky-ads' id='sticky-ads'>
<!-- Reklam kodu alanı -->
<button aria-label='Kapat' class='sticky-ads-close' onclick='document.getElementById(&apos;sticky-ads&apos;).style.display=&apos;none&apos;;'/>
</div>
<script>
//<![CDATA[
window.addEventListener("scroll",function(){
  var target = document.getElementById('sticky-ads');
  if(window.pageYOffset > 300){
   target.style.bottom = "0";
  }
},false);
//]]>
</script>
</b:if>

Yukarıdaki adımları tamamladıktan sonra şablonu kaydedin.

Bilgiler;

• Sayfa düzeyi reklam kodu eklentisi sadece mobil sürümlerden görüntülenecek şekilde ayarlanmıştır.
• Yukarıdaki JQuery kodu içerisinde belirtilen 300 reklam görünümünün maksimum yüksekliğini ayarlama yeridir. Buradan reklam görüntülerinin maksimum yüksekliğini ayarlayabilirsiniz. Mesela, maksimum 100 veya 200 olacak şeklinde düzenleyebilirsiniz.
• HTML kod içerisinde belirtilen "<!-- Reklam kodu alanı -->" yazan yere reklam kodunuzu ekleyin.

Ön İzleme

Bknz: Adsense Eşleştirilen İçerik Birimlerini Özelleştirme

Bu yazımızda sayfa düzeyi reklam kodlarının Adsense yayıncı politikalarına uygun olacak şekilde düzenlenmiş olan, sayfa düzeyi reklam kodu oluşturma eklentisini paylaştık. Eklenti hakkında daha fazla bilgi sahibi olmak için yorum formundan bize ulaşabilirsiniz.