Youtube ana sayfasında bulunan 970x250 boyutundaki reklam birimi panosunu bir çoğunuz fark etmiştir. Muhtemelen reklam biriminin büyüklüğü nedeniyle çok fazla yer kaplamasından dolayı, birçok blog yazarları 970x250 reklam birimini kullanmıyor. Bu nedenle, 970x250 reklam birimlerinin fonksiyonel bir reklam panosu içerisinde yayınlanması hem ziyaretçileri rahatsız etmeyecektir hem de daha kullanışlı olacaktır.
Blog sitelerinde de reklam alanı oluşturmak, para kazanmanın en önemli püf noktasıdır. Reklam alanları iyi bir düzen içerisinde ve Adsense politikalarına uygun olacak şekilde konumlandırılmamışsa, bu reklam alanının geleceği yok demektir. Bu yazımızda da blog sitelerinde bir reklam alanı daha oluşturmak için, blog sitesinde 970x250 boyutlarında açılır-kapanır bir reklam panosunun nasıl ekleneceği ile ilgili bilgiler paylaşacağım.
Oluşturacağımız reklam panosunda görüntülenecek olan reklam birimi 970x250 ve 300x250 boyutları görüntülenecektir. Reklam panosunu eklemek için aşağıdaki adımları takip edin.
Blog Sitesine HTML Reklam Panosu Nasıl Eklenir?
Reklam panosunu eklemek için, öncelikle Blogger hesabınıza giriş yapın. Blogunuzun kumanda panelinde bulunan Tema > HTML'i Düzenle yolunu takip ederek blogunuzun şablon editör sayfasını açın ve aşağıdaki adımları uygulayın.
Şablon editör sayfasında aradığınız kodlara daha hızlı bir şekilde erişmek için klavyenizin CTRL+F tuşlarından faydalanabilirsiniz.
1- Aşağıdaki CSS kodlarını blogunuzun </head> kodunun bir satır üzerine ekleyin. CSS
<b:if cond='data:view.isMultipleItems'>
<style>
.ads-container{margin:20px auto;padding:0 10px 20px;position:relative;width:100%;max-width:990px;height:auto;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;}
#close_button,#open_button{font-family:inherit;position:absolute;padding:0;bottom:0;background:0 0;border:none;cursor:pointer;color:#888;font-size:15px;font-weight:500;height:20px;line-height:20px;}
#close_button{right:10px}
#open_button{width:100px;text-align:center;right:50%;margin-right:-50px}
#close_button:focus,#open_button:focus{outline:0}
.adsresponsive{width:970px;height:250px;}
@media screen and (max-width:960px){
.ads-container{max-width:320px;}
.adsresponsive{width:300px;height:250px;}}
</style>
</b:if>2- Aşağıdaki HTML kodunu blogunuzun <body> kodunun bir satır altına ekleyin.
HTML
<b:if cond='data:view.isMultipleItems'>
<div class='ads-container'>
<div id='ads-content'>
<!-- Reklam kodunuz -->
<ins class="adsbygoogle adsresponsive"
style="display:block"
data-ad-client="ca-pub-xxxxxxxxxxxxxx"
data-ad-slot="xxxxxxxxxxx"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
<button id='close_button' onclick="document.getElementById('ads-content').style.display='none';close_button.style.display='none';open_button.style.display='block';" role='button' tabindex='0' title='Kapat'>Kapat</button>
<button hidden='' id='open_button' onclick="document.getElementById('ads-content').style.display='block';close_button.style.display='block';open_button.style.display='none';" role='button' tabindex='0' title='Aç'>Aç</button>
</div>
</b:if>Yukarıdaki HTML kod içerisinde bulunan ca-pub-xxxxxxxxxxxxxx ve xxxxxxxxxxx belirtilen yere yayıncı kimliğinizi ve reklam numaranızı ekleyin. Kod içerisine eklemeyeceğiniz reklam birimi esnek yani duyarlı olmalıdır.
Yukarıdaki adımları doğru bir şekilde uyguladıktan sonra kaydedin ve blogunuzu kontrol edin.
Bknz: Adsense Reklamları Yeni Yayınlanan Yayınlarda Neden Görünmüyor?
Blog Sitesine AMP HTML Reklam Panosu Nasıl Eklenir?
Blog sitesinde AMP HTML teması kullanan blog yazarları da aynı yukarıdaki işlere benzer şekilde aşağıdaki adımları uygulayarak reklam panosunu bloglarına ekleyebilirler.
1- Aşağıdaki CSS kodlarını amp-custom stil dosyası içerisine ekleyin.
CSS
.ad_container{margin:20px auto;padding:0 10px 20px;position:relative;width:100%;max-width:990px;height:auto}
#close_adcontent,#open_adcontent{font-family:Roboto,sans-serif;position:absolute;padding:0;bottom:0;background:0 0;border:none;cursor:pointer;color:#888;font-size:15px;font-weight:500;height:20px;line-height:20px;}
#close_adcontent{right:10px}
#open_adcontent{width:100px;text-align:center;right:50%;margin-right:-50px}
#close_adcontent:focus,#open_adcontent:focus{outline:0}2- Aşağıdaki AMP HTML kodu blogunuzun <body> kodunun bir satır altına ekleyin.
HTML
<b:if cond='data:view.isMultipleItems'>
<div class='ad_container'>
<div id='adcontent'>
<amp-ad data-ad-client='ca-pub-xxxxxxxxxxxxxx' data-ad-slot='xxxxxxxxxx' height='250' layout='fixed-height' type='adsense'>
</amp-ad>
</div>
<button id='close_adcontent' on='tap:adcontent.hide, close_adcontent.hide, open_adcontent.show' role='button' tabindex='0' title='Kapat'>Kapat</button>
<button hidden='' id='open_adcontent' on='tap:adcontent.show, close_adcontent.show, open_adcontent.hide' role='button' tabindex='0' title='Aç'>Aç</button>
</div>
</b:if>Adsense AMP reklam birimlerinin görüntülenmesi için, blogunuzun şablon kodları arasında amp-ad javaScript kodunun olması gerekir. Eğer, blogunuzun şablon kodları arasında amp-ad javaScript kodu bulunuyorsa tekrar eklemeye gerek yoktur. Eğer yoksa, aşağıdaki amp-ad javaScript kodunu blogunuzun <body> kodunun bir satır üzerine ekleyin.
JavaScript
<script async='async' custom-element='amp-ad' src='https://cdn.ampproject.org/v0/amp-ad-0.1.js'></script>Yukarıdaki adımları uyguladıktan sonra şablonu kaydedin ve blogunuzu kontrol edin.
Bu yazımızda Youtube sitesi ana sayfasında bulunan reklam panosu gibi blog siteleri için fonksiyonel bir reklam panosunu paylaştık. Yayın ile ilgili görüş ve sorularınızı yorum formunu kullanarak bize iletebilirsiniz.