Ana içeriğe atla

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.

Blogger'da Yazı İçerisine Reklam Koyma
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 kodlarını XML için düzenleme
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.

Adsense div sınıfları
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

Yorumlar

  1. Güzel bir yazı olmuş. Bir zamanlar ihtiyacım vardı. Ayrıca bunun alt kısma yapabileceğimiz şekli hakkında da kısa bir bilgi verebilir misin?

    http://www.eburhan.com/css-ile-hazirladigim-mesaj-kutulari/ Bunu kullanarak yazılarımın altında duyurular yapmayı planlıyorum.

    YanıtlaSil
  2. adsense izin veriyomu buna

    YanıtlaSil
  3. önceki yazı içine adsense koyma yazınızda böyle birşey yapmıştım ama css kodları kullanmamıştım 120x600 reklam koyduğumda yazının soluna kendiliğinden yerleşmişti ama bunu css kodlarıyla daha güzel yapmışsınız bunu dar yazı çerçeveli bloglar tek tarafta reklam çıkararak da kullanabilirler, öylede güzel olur bence

    YanıtlaSil
  4. @metude,
    Blogger'da Yazı İçerisine Reklam Koyma başlıklı ilk yazımda da altta reklam koymayı anlatmıştım zaten. Sen reklam yerine mesaj kutusu koyarsın ;)

    @cenk,
    Kurallara aykırı bir durum yok. Sizin düşündüğünüz şey nedir?

    @Mayk,
    Evet, ben iki tane olanı göstereyim de gerisi okuyuculara kalmış :) Tavsiyeniz için teşekkürler.

    YanıtlaSil
  5. cenk bu yerleşim yasak değil tıklamaya teşvik ettirecek bi durum yok ayrıca saolun güzel oldu bu :)

    YanıtlaSil
  6. Tamamdır. Test ettim, oldu.

    YanıtlaSil
  7. Güzel bilgi MafiaMax teşekkürler

    YanıtlaSil
  8. Merak ettiğim konulardan bir taneside her yangi uzun bir makalede istediğimiz bir yere adsense ekleyebilir miyiz...

    örneğin:
    http://www.bloggerplugins.org/2007/09/social-bookmarking-elements-after-each.html

    burada yer alan yazı içerisinde belirli yerlede adsense reklamları var...

    YanıtlaSil
  9. Merhaba..
    Siteniz harika,açıklayıcı ve duru anlatımlarınız sayesinde , epel yol kat ettim : )

    Çok teşekkür ediyorum..


    Soru-Cevap kısmı göremediğim için buraya yazıyorum dilerim yardımcı olursunuz..

    Yeni bir blog hesabı edindim,temasını dilediğimce değiştirdim,yanlız büyük bir sorun var yorum alamıyorum ..

    Büyük ihtimalle tema ve kodlarla alakalıdır sanırım..

    Ne yapmam gerektiği konusunda,yardımcı olursanız çok sevinirim..
    Cevabınızı merakl bekleyeceğim..

    YanıtlaSil
  10. @Pepela,
    Merhaba. Yardımcı olabildiysem ne mutlu bana.

    Yorum alamadığınızdan şikayet etmeniz üzere blogunuza baktım. Blogunuzda yorum formu görüntüleniyor. Sorun yorum formunun çalışmaması mı? Biraz daha açabilir misiniz?

    Bu arada sizi tema yükleme konusunda da bilgilendireyim. Yeni bir tema yüklemeden önce varolan temanızın yedeğini alırken "Tam Şablonu Yükle" bağlantısına tıklayarak temanızı .xml dosya formatında bilgisayarınıza indirin. Yani kodları bir not defterine kopyalamayın ;)

    YanıtlaSil
  11. Tamamdır..
    Hiçbir ayarlama yahut müdahalede bulunmadığım halde,sorun halloldu:)
    Söylediklerinizi,aklımın bir köşesine not ettim,çok teşekkür ediyorum tekrar..
    Keyifli günler dilerim..

    YanıtlaSil
  12. peki tıklama oranı artıyor mu hocam sen ondan haber ver :)bir de reklamları yazının ortasına nasıl ekleriz.bazı blogger kullanıcılarında gördüm de.

    YanıtlaSil
  13. @züleyha,
    Tıklama oranının artacağını garanti edemem. Yazının ortasına reklam koyanlar ise yazı yazdıkları yazı editörüne tıpkı yazı yazar gibi adsense reklam kodlarını da ekliyorlar. Yani her yazı yazdıklarında elle reklamı ekliyorlar, otomatik bir sistem değil.

    YanıtlaSil
  14. yazı editörüne adsense kodu konabiliyor mu ki?

    YanıtlaSil
  15. @Adsız,
    Reklam kodundaki köşeli parentezleri değiştirerek bunu yapabilirsiniz.

    < parantezi yerine & lt;
    > parantezi yerine & gt;

    konulur. Burada & ile lt; veya gt; arasında bir karakter boşluk yoktur. Bu yorumda size gösterebilmek için araya boşluk koydum. Eğer boşluk koymasaydım onlar da köşeli oarantez olarak görünecekti. Velhasıl siz bu boşlukları kullanmayacaksınız.

    Reklam kodundaki tüm köşeli parantezleri bunlarla değiştirdiğiniz takdirde bir hata almazsınız.

    YanıtlaSil
  16. @Yaşar Güner,
    Rica ederim.

    YanıtlaSil
  17. blue25

    Kardeş güzel ve faydali paylaşım yapmışsın teşekkür ediyor başarılarının devamını diliyorum.

    http://maviincir.blogspot.com

    YanıtlaSil

Yorum Gönder

Küfür ve hakaret içeren yorumları sevmiyor, Türkçe'nin doğru kullanıldığı yorumları ise çok seviyoruz.

HTML: <b>, <i>, <a> gibi temel HTML etiketlerini kullanabilirsiniz.
Uyarı: URL adresi belirtirken lütfen başına http:// protokolünü koymayı unutmayın!

Bu blogdaki popüler yayınlar

Sabit Diskinizde 60 GB Yer Açmak İster misiniz?

Windows XP ile hayatımıza giren Sistem Geri Yükleme aracı bazı durumlarda hayat kurtarıcı olsa da kişisel deneyimlerimden yola çıkarak, fazla güvenmememiz gerektiğini öğrendiğim bu araç sabit diskinizin boyutuna bağlı olarak gerektiğinden fazla iştahlı olabiliyor.

Windows XP ve Windows 7 işletim sistemi kullanıyorsanız Sistem Geri Yükleme aracının sabit diskinizde kullanacağı boyutu belirleyebiliyorsunuz. İş Windows Vista'ya geldiğinde kullanıcı arayüzü ile bu işi halletmeye imkan yok. Komut satırı ile değişiklik yapak gerekiyor.

Sabit diskiniz zamanla biriken sistem geri yükleme noktaları sebebiyle her geçen gün kan kaybeder. İşte bu noktada, sabit disk boyutunuza bağlı olarak eski geri yükleme noktalarını silip 60 GB'tan fazla yer açmanız mümkün. Sistem Geri Yükleme aracı sabit diskinizin %15'i kadar yeri kendine tahsis edebiliyor. Günümüzde kullanılan sabit disk boyutlarını düşündüğümüzde de 500 GB'lık bir sabit diskte 75 GB yeri -bazen- gereksiz yere heba etmiş oluyo…

Blogger Şablonunu Düzenleme (Güncellendi)

Yeni, yine, yeniden...

Sanırım bu sloganın ne anlama geldiğini biliyorsunuzdur. Bilmeyenler için tekrarlarsam, bu sloganı Blogger İpuçları kategorisi altında yazdığım yazılarda başlangıç cümlemdir :-) Yaklaşık bir haftadır bir çok kişi bana "Yorum Gönder" butonunu nasıl değiştirdiğimi sorup durdu. Aslında cevabı çok basit; <img src=.../> etiketini kullanarak :-) İşlem bu kadar basit olmasına rağmen bir çok kişi bu ve bunun gibi basit işlemleri yapamıyor. Daha doğrusu sorun Blogger şablonunun XML olmasından kaynaklanıyor. Blogger şablonumuza baktığımızda herşeyin sunucularda barındırılan bir değişkene atandığını görüyoruz. Yani kimse şablununun kodları arasında "Yorum Gönder" ibaresini göremez! Onun yerine, <data:...> etiketi ile atanan değişkeni görür. Ancak değişken diyince akla garip garip ifadeler gelmesin, Google bu işi yaparken değişkenlere verdiği adlarda İngilizce anlamlarını verecek şekilde isimlendirme yapmış. Burda bahsi geçen "Yorum Gönde…