Blogger'da Yazı İçerisine Reklam Koyma - 2

Yeni, yine, yeniden...

Blogger'da yazı içerisine reklam koymayı bundan tam 2 yıl 3 ay önce Blogger'da Yazı İçerisine Reklam Koyma başlıklı yazım ile anlatmıştım. O yazının yazılmasına Damacana.org yazarı Erdal vesile olmuştu. O yazıda anasayfada görünmeyen, yazı sayfasında ise yazının altında veya üstünde görünen reklamların nasıl konulacağını anlatmıştık.

Bu seferki yazımda ise yine anasayfada görünmeyen, yazı sayfasında ise yazının solunda ve sağında görünen iki adet reklamı nasıl koyacağımızı öğreneceğiz.


Uygulamaya geçmeden önce nasıl göründüğünü sizlere göstereyim. Eğer canlı canlı görmek isterseniz MaFiAMaX Labs bloguna bakabilirsiniz.


DEMO'da da görebileceğiniz gibi bu tür bir reklam yerleşimi için yazı alanı genişliğinizin 600px'den az olmaması gerekir; aksi halde oldukça kötü bir görüntü oluşacak ve ziyaretçilerinize itici gelecektir.

Adım 1: AdSense Reklam Kodunuzu Düzenleyin

Blogger altyapısı XML'e dayandığı için bazı karakterlerin değiştirilmesi gerekir. XML'de CDATA hakkında daha fazla bilgi için tıklayın.


AdSense kodunuzu tek tuş ile hızlıca düzenlemek isterseniz Sedran tarafından Türkçe'ye düzenlenmiş bu aracı kullanabilirsiniz.

Adım 2: Reklam Kodunu Şablonunuza Yerleştirin

Blogger şablonunuzun kodlarını Widget Şablonlarını Genişlet kutucuğunu işaretleyerek görüntüleyin. Yazılarınızın gösterilmesini sağlayan kod satırını arama yaparak hızlıca bulmak için CTRL + F tuş kombinasyonunu kullanarak arama penceresini açın ve post-body ibaresini arayın. Bir kaç yerde aynı tanımlama geçtiği için aşağıdaki yeri bulana kadar aramaya devam edin.


Yukarıda kırmızı kutu içine aldığım satırı bulduktan sonra AdSense kodlarınızı bu satırın hemen üstüne koyacaksınız.

Adım 3: AdSense Reklam Kodlarınıza Sınıf Atayın

AdSense reklam kodlarınızı birer div sınıfı içine yerleştirerek CSS tanımlaması yapabilmemizi sağlayıp yazı içerisindeki poziyonunu belirleyeceğiz.

İlk reklam kodu yazının solunda yer aldığı için adsense-sol, ikinci reklam kodu da yazının sağında yer aldığı için adsense-sag sınıflarını tanımlayacağız.

<div class='adsense-sol'>
<b:if cond='data:blog.pageType == "item"'>
<script type="text/javascript"><!--
google_ad_client = "pub-8XXXXXXXXXXXXXX4";
google_ad_host = "pub-15XXXXXXXXXXXX09";
/* 120x240, oluşturulma 08.11.2009 */
google_ad_slot = "5359XXXXX7";
google_ad_width = 120;
google_ad_height = 240;
//-->
</script>
<script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</b:if>
</div>
<div class='adsense-sag'>
<b:if cond='data:blog.pageType == "item"'>
<script type="text/javascript"><!--
google_ad_client = "pub-8XXXXXXXXXXXXXX4";
google_ad_host = "pub-15XXXXXXXXXXXX09";
/* 120x240, oluşturulma 14.11.2009 */
google_ad_slot = "5359XXXXX7";
google_ad_width = 120;
google_ad_height = 240;
//-->
</script>
<script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</b:if>
</div>

Yukarıdaki kodda kırmızı renkle gösterilen satırlara sizin reklam kodlarınızı yerleştireceğinizi ve reklam kodlarınızı yerleştirmeden önce de Adım 1'deki düzenlemeyi yapmanız gerektiğini hatırlatmak isterim.

Reklam kodlarının hemen üzerinde yer alan <b:if cond='data:blog.pageType == "item"'> satırına da dikkatinizi çekmek istiyorum. Bu satır ile reklamların yalnızca yazı sayfasında görüntülenmesini sağladık. Blogger'da koşullu sorgulamalar hakkında daha detaylı bilgi almak Blogger'da Sadece Yazı Başlıklarını Listelemek başlıklı yazımı okuyabilirsiniz.

Adım 4: div Sınıflarını CSS İle Özelleştirin

AdSense reklam kodlarımızın yazı içerisindeki konumunu belirlemek için atadığımız div sınıflarını CSS kodları ile özelleştirmeliyiz.


Aşağıdaki CSS tanımlamalarını da şablonunuzda bulunan diğer CSS tanımlamalarının yanına koyun.

.adsense-sol {
  float: left;
  margin: 0 5px 5px 0;
  }
.adsense-sag {
  margin: 0 0 5px 5px;
  float: right;
  }

Bitirirken...

Blogger İpuçları kategorisi altında yazdığım her yazıda işin mantığını, nedenlerini anlatmaya çalıştım. Bu sebeple bazı yazılarım oldukça uzasa da uzun vadede gerçekten değerli bir arşive dönüştü. Sizlerden gelen geri bildirimlerden yola çıkarak doğru yolda olduğumu görebiliyorum. Şimdiye kadar bendenizi yalnız bırakmayan sevgili okurlarıma teşekkür ederim.

İlgili Yazılar

• Blogger'da Yazı İçerisine Reklam Koyma
• Blogger'da Sadece Yazı Başlıklarını Listelemek
• Blogger Şablonunu Düzenleme - 2
• Blogger Şablonunu Düzenleme (Güncellendi)