BloggerDestek.COM | Eklentiler, temalar ve ipuçları...

Blogger için Adsense Gelir Paylaşımı Hack

2009-11-20T18:48:00.002+02:00

Güncel içerik eklenen,hiti iyi olan ve bu içeriği ekleyen birbirinden iyi yazarlarınız varsa işte bu hack tam size göre.Yazılarda yazarların kendi adsense reklamlarının görülmesi hem onların daha çok yazmasına vesile olur hemde sizin daha çok kazanmanıza.Ve bu özellik sayesinde daha çok yazara sahip olabilirsiniz.
Blogger Gelir Paylaşımı için

Oturum açmak için Blogger Dashboard
Layout >> HTML ve Widget şablonlarını genişletin
Aşağıdaki kodu ctrl+F ile ara

<data:post.body/>

Aşağıda ki kodu hemen altına yerleştirin

<b:if cond='data:blog.pageType == "item"'>

<b:if cond='data:post.author == "yazar1"'>
Reklam Kodu yönetici burada (yazar) ilk
</b:if>

<b:if cond='data:post.author == "yazar2"'> 
Reklam Kodu Burada yazar2 (ikinci yazar için)
</b:if>

<b:if cond='data:post.author == "yazar3"'> 
Reklam Kodu Burada yazar3 (üçüncü yazar için)
</b:if>

</b:if>

Yazar isimlerini ve reklam kodlarını düzenleyin
Yaptığınız değişiklikleri kaydedin
Bitirdiniz.

Okuyucuya Not:Tek bir adsense hesabım olduğu için çalışıp çalışmadığını deneyemedim.

Blogger için Alternatif Yorum Formları

2009-11-20T11:15:00.000+02:00

Blogger yorum formları birazcık geliştirilsede yıllar içerisinde pek beğeni kazanmamıştır.Kullanışlılık bakımından,görünüm bakımından wordpress yorum formunun çok gerisinde ne yazık ki: Blogger'ın bu eksikliğini gidermek daha şık görüntülü yorum formları için en popüler ve kullanışlı olanlarını listelemek istedim.Fakat önce bunu bilmeniz gerekir,bahsedeceğim siteleri blogunuza entegre ettiğiniz zaman yorumlarınız orada saklanıyor.Yani zamanla geri dönüş yaparsanız bu yorumlar geri gelmiyor.
Ayrıca tecrübelerime göre bu yorum formaları yazılara gelen yorumlarda artışa sebep oluyor.Kullanmanızı tavsiye edeceğim 3 adet alternatif var;

1. Intense Debate –

Benim favori listemde bir numara olan yorum formu.Wordpress,blogger entegrasyonu pek şık.

2.DISQUS -

Başka bir yorum sistemi.mashable.com'un da kullandığı bir sistemdir.

3.JS-Kit (Echo)

Bu da başka bir JavaScript tabanlı yorum system.Echo hem ücretsiz ve ücretli paketleri sunuyor! Ücretsiz paketi dişli yorum ve bir arayüze sahip Ayrıca onun yorum biçimi kullanarak videolar, resimler, similes ekleyebilirsiniz basit bir WYSIWYG yorum editörü.

Uyarı: Son olarak şunu bildirmeliyim yorum formlarını değiştirmeden önce blogger şablonunuzun yedeğini almanızı şiddetle öneririm.

Blogger Devamını Oku Özelliği

2009-10-24T14:38:00.001+03:00

Google'ın 9 Eylül 2009 tarihli blog gönderisinde yaptığı açıklamayla, Blogger'da "devamını oku" özelliği resmen devreye girmişti. Bunu size yazmayı, anlatmayı o gün çok istemiştim ama çok yoğundum bir türlü yenilikleri duyurma fırsatım olmadı. Şimdi Blogger'ın bu özelliği üzerinde biraz duracağım.

İlk olarak "Yazıları devamını oku özelliğine göre nasıl yazmalısınız?" konusuna değineceğim. Size tavsiyem yazılarınızı yazarken "Güncellenmiş düzenleyici" veya "Blogger Draft" kullanmanız. Çünkü Güncelleştirilmiş düzenleyici üzerinde bir tuşa basarak yazınıza devamını oku özelliğini kazandırabiliyorsunuz.
Güncellenmiş Düzenleyiciyi nasıl aktif hale getireceğinizi bilmiyorsanız önce şu yazıyı okuyun:
http://www.bloggerdestek.com/2009/10/blogger-metin-editorunu-degistirin.html

Metin editörünüzü değiştirdiyseniz veya blog yazılarınızı blogger draft üzerinden yazıyorsanız yazıyı bölmek ve devamını oku bağlantısını eklemek sizin için sadece bir tıklamaya bakıyor demektir.

1) Güncellenmiş Düzenleyici ile Devamını Oku Bağlantısı
Güncellenmiş Düzenleyiciyi kullanan blogger kullanıcıları! Yazılarınızı yazarken, yazının bölmek istediğiniz kısmına tıklıyorsunuz, daha sonra metin editörlerünüzün sağ üst köşesindeki "Atlama aralığı ekle" butonuna tıklıyorsunuz. Yazınızı nereden bölmek istiyorsanız orada sembolik bir çizgi çıkıyor. Bu çizgi sadece yazıyı düzenlerken görünecek, yazı yayınlandıktan sonra okuyuculara görünmeyecektir.

2) Eski Metin Editörünü Kullananlar İçin Devamını Oku

Draft kullanmayabilirsiniz, hatta yeni metin editörünü de kullanmıyor olabilirsiniz. Fakat bu sizin devamını oku özelliğinden faydalanamayacağınızı göstermez. Eğer eski düzenleyiciyi kullanıyorsanız yapmanız gereken şey, yazıyı yazarken "HTML'yi Düzenle" kısmına girip, yazıyı neresinden bölmek istiyorsanız orasına  etiketini eklemeniz. Aşağıdaki resimde görüldüğü gibi.

3) Devamını Oku Linkini Ayarlardan Düzenlemek
Devamını oku linkini yazınıza eklediğinizde yazınızın altında Devamı» şeklinde bir bağlantı göreceksiniz. Bu bağlantıya istediğiniz metni nasıl yazarsınız? Şöyle: Blogger Ayarlarınızda Yerleşim > Sayfa Ögeleri yolunu izleyin. Daha sonra orada göreceğiniz Blog Kayıtları ögesinin altındaki Düzenle bağlantısına tıklayın. Açılan pencerede "Kayıt Sayfası Bağlantı Metni" kutusuna ne istiyorsanız onu yazın.

4) Sorunlu Şablonlar İçin
Eğer klasik şablonlardan birisini kullanmıyorsanız ve devamını oku bağlantısı otomatik olarak blogunuzda görünmüyorsa, şimdi anlatacağım şeyleri yapmanız gerekecektir.
Şablonunuzun ayarlarına girin, Yerleşim > HTML'yi Düzenle sayfasına girin.
"Widget Şablonlarını Genişlet" seçeneğini işaretleyin.
<data:post.body/> kodunu bulun ve hemen altına şu kodu yapıştırın:


<b:if cond='data:post.hasJumpLink'>
      <div class='jump-link'>
        <a expr:href='data:post.url + "#more"'><data:post.jumpText/></a>  
      </div>
    </b:if>

Daha sonra şablonunuzu kaydetmeniz bu işlem için yeterlidir. Eğer anlatımı yeterli bulmadıysanız, kaynaklarda belirttiğim linklerden keyfinize göre birini seçerek bakabilirsiniz. MaFiAMaX tavsiyemdir.

Son Olarak Kaynaklar:
http://www.mafiamax.com/2009/09/blogger-devamini-oku-ozelligi-devrede.html
http://bloggerindraft.blogspot.com/2009/09/you-might-as-well-jump.html
http://buzz.blogger.com/2009/09/you-might-as-well-jump.html (bir üsttekinin aynısı)

Blogger Metin Editörünü Değiştirin

2009-10-24T13:00:00.001+03:00

Blogger Draft'a girmeden de blogunuza yazı yazarken gelişmiş metin editörünü kullanmak ister misiniz? Uzun zamandır eski metin editörünü kullanıyorsanız artık bir değişiklik yapma zamanı gelmiş demektir. O sıkıcı metin editöründen kurtulun ve yeni metin editörünün tadını çıkarın.Bu yazıda sadece yeni metin editörüne nasıl geçeceğinizi anlatacağım. Bu editörün ne işe yaradığını ileriki yazılarda farkedeceksiniz.

"Güncellenmiş Düzenleyici" ye Geçiş
Gelişmiş Düzenleyiciyi aktif etmek için Blogunuzun "Ayarlar" sayfasına girmeniz ve orda "Temel" ayarlara girmeniz gerekiyor. O sayfanın en altında "Yayın düzenleyicisi seçin" kısmında "Güncellenmiş düzenleyici" seçeneğini aktif hale getirip "Ayarları Kaydet" butonuna basarak bunu halledebilirsiniz. Aşağıya adım adım resimleri ekledim.

Ayarlar'dan Temel'e giriş.

Güncellenmiş düzenleyicinin seçilişi.

Ve bir de gelişmiş düzenleyicinin bir resmini ekleyeyim:

Kaleidoscope Blogger Teması

2009-09-17T06:07:00.000+03:00

Bilindiği üzere şu sıralar Blogger tema çeviren arkadaşlar daha çok kişisel bloglara uygun temalar çevirmekteler. Bunun nedeni kişiel blog temalarına daha fazla ilgi olmasından olsa gerek, özellikle ezwpthemes.com'un ürettiği temalar anında Blogger'a çeviriliyor, Kaleidoscope da bu temalardan biri, hoşuma gitti ve Blogger Türkiye ile paylaşmak istedim.

Demo | Download

Falcon Hive ve Blogger Templates 'a bu güzel tema için teşekkür ediyoruz. İlerleyen zamanlarda bu ve buna benzer Blogger temalarını izlerle paylaşacağım.

Haftanın Blogu:Online Gitar Dersi

2009-08-26T19:33:00.005+03:00

Son zamanlarda bir sürü müzik blogu açıldı.Bunların çoğunda müzik haberleri ve (yasal olmasa da) indirebilir müzik blogları.Müzik bloglarının %1'lik küçük bir kısmıda tanıtacağım haftanın blogunun yaptığını yapıyor:Online ve Ücretsiz Enstruman Eğitimi.Online Enstruman Eğitim Blogları henüz ülkemizde gelişmiş sayılmaz.Yurtdışına bakarsanız, normal kurslardan çok, online eğitim blogları bulursunuz.Türkiye'de de ücretsiz ve online gitar eğitimi veren bir blog var.Online Gitar Dersi'nde gitar eğitimindeki seviyelerinize göre dersler mevcut.Yani; yeni başlayanlar içinde, uzmanlar içinde dersler var.Bu blogta gitar çalan biri için her şey düşünülmüş.Gitar eğitiminin yanında menüden ulaşabileceğiniz ses eğitimi ve ders videoları mevcut.Aynı zamanda blog sahibiyle her an etkileşim içindesiniz.Blog sahibinin sosyal paylaşım sitelerindeki profilinden onunla iletişime geçebilir veya blogtaki derslerin altında bulunan "yorum yaz"dan ona soru ve görüşlerinizi iletebilirsiniz.Kısacası, Online Gitar Dersi . Blogcu Türkiye'de ücretsiz gitar öğrenmek isteyenlerin ve ya kendini geliştirmeye çalışanların mutlaka ziyaret etmesi gereken bir blog.Tebrikler haftanın blogu!

Bloga ulaşmak için:onlinegitardersi.blogcu.com

Blogger "Etiketler" Widgetini Yeniden Düzenledi

2009-08-26T00:41:00.001+03:00

Blogger ekibi tarafından "Etiketler" widgeti düzenlenmiş ve daha kullanışlı hale getirilmiş. Bence güzel de olmuş. Blogger'da olmasını istediğim onlarca özellikten birisiydi bu. Bu sayede blogger'ımız wordpress'e daha da yakınlaşmış oluyor. Bu düzenlemeyi friendfeed'de Teknomobi sayesinde öğrendim, sanırım ülkemizde bu konu hakkında birşeyler yazan ilk blogculardan birisi Teknomobi. Beni de bilgilendirdiği için teşekkür ediyorum. Şimdi düzenlemelerden biraz bahsedeyim.

Öncelikle söyleyeyim, ben de bu hataya düştüm, widget ekle dedikten sonra yeni bir widget aramayın, düzenlemeler bizim bildiğimiz etiketler widgeti üzerinde yapılmış.

Sayfa ögelerine giriyoruz, eklemek istediğimiz yerdeki "Gadget Ekle" seçeneğine tıklıyoruz.

Açılan sayfada "Etiketler" linkine tıklıyoruz. Bundan sonra etiketler widgetimiz ile ilgili özellikler çıkıyor karşımıza. İşte Google voleyi burada vurmuş.

"Seçilen Etiketler" seçeneğinden anlayacağımız gibi, widget üzerinde sadece istediğimiz etiketlerin görüntülenmesini sağlayabiliyoruz artık. Seçilen Etiketler linkine tıkladığımızda hemen altında "düzenle" diye bir link çıkıyor. Bu linkten istediğimiz etiketleri işaretliyoruz. İstemediklerimizi almıyoruz. Daha sonra yeni gelen bir özellik olarak "Liste" veya "Bulut" seçenekleri mevcut. Yani artık etiket bulutu oluşturabilmek için bir sürü javascript koduna ihtiyacımız yok.

Bence hala etiket sisteminde arıza var. Aklıma gelen birkaç eksiği sıralayayım hemen:
1) Etiketler http://blogadresi/etiket/etiketismi/ gibi bir sayfada açılabilir.
2) Etiketlerin olduğu /search sayfasının bloglarımızın robots.txt dosyasında arama motorlarına alınması engellenmiş.
Ama yine de güzel bir adım. Bu düzenleme için Google'a teşekkür ediyorum.
İlgili Haber.

Yazı Sonuna Eklenen Resimlerden Kaynaklanan Sorun

2009-08-25T23:55:00.001+03:00

Sevgili blogger ahalisi, bu yazıda az önce tasarım yaparken karşıma çıkan bir dandiklikten ve bunun için uyguladığım çözümden bahsedeceğim. Bu sorun şu, eğer bir yazının sonuna sağa veya sola dayalı bir resim eklerseniz, o resim blogunuzun yazıdan sonraki kısmının tasarımına zarar veriyor. Yani o yazı görüntülenirken sayfanızda türlü türlü tasarım sorunları oluşuyor. Aslında çok basit olan olay şundan ibaret, biz bir resimi yazımıza yüklediğimizde o resime sağa veya sola dayalı olarak bir ayar veriyorsak, bu ayar yazının o resimin yan tarafından akmasını istemiş olmamız anlamına geliyor. Örneğin resimi sola yasladığımızda yazılar resimin sağından akarlar. Ancak resimi yazının sonuna eklediysek, yani resimden sonra yazı yoksa, yada çok az yazı varsa, o resim sağına blogdaki diğer elemanları da alıyor. Bu durumda da aslında yazının altında olması gereken elemanlar yazının içindeymiş gibi bir görüntü sergiliyorlar. Bir resim ile açıklayacak olursak:

Gördüğünüz gibi şirin kedimizin olduğu resim sayfada yazının altında bulunması gereken turuncu kısım ile sarı kısımı kendi sağına almış.

Peki bunu nasıl düzeltebiliriz? Bunu şablonumuza yapacağımız çok kısa bir ilaveyle düzeltebiliyoruz. Yapmamız gereken blogger kontrol panelinde, Yerleşim sayfasında HTML'yi Düzenle'ye girip widget şablonlarını genişlettikten sonra şu kodu bulup:
<data:post.body/>
Altına şu kodu yerleştirmek:
<div style='clear: both;'/>
Ve şablonunuzu kaydetmek. Bir resim de bu basit işlemi yaptıktan sonrası için ekleyeyim de farkı göstermiş olayım.

Umarım anlatmak istediğimi verebilmişimdir. İyi günler dilerim :)

Son Yazılar ve Son Yorumlar Eklentileri

2009-08-21T03:19:00.004+03:00

Olayı hiç javascript dosyalarınızı hostunuza yükleyin olaylarına girmeden anlatacağım. Çünkü blogger kullanıcılarının büyük bir çoğunluğu javascript dosyalarını yükleyebilecekleri host bulmakta zorlanıyorlar.

Blogger Son Yazılar
İlk anlatacağım şey son yazılar widgetini blogunuza eklemek. Bunun için blogunuzun "Sayfa Ögeleri" kısmında yeni widget olarak "HTML/Javascript" widgetini seçmeniz, ve onun içerisine alttaki kodu kopyalamanız yeterli.


<script style="text/javascript">
function showrecentposts(json) {
for (var i = 0; i < numposts; i++) {
var entry = json.feed.entry[i];
var posttitle = entry.title.$t;
var posturl;
if (i == json.feed.entry.length) break;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
posturl = entry.link[k].href;
break;
}
}
posttitle = posttitle.link(posturl);
var readmorelink = "(more)";
readmorelink = readmorelink.link(posturl);
var postdate = entry.published.$t;
var cdyear = postdate.substring(0,4);
var cdmonth = postdate.substring(5,7);
var cdday = postdate.substring(8,10);
var monthnames = new Array();
monthnames[1] = "Jan";
monthnames[2] = "Feb";
monthnames[3] = "Mar";
monthnames[4] = "Apr";
monthnames[5] = "May";
monthnames[6] = "Jun";
monthnames[7] = "Jul";
monthnames[8] = "Aug";
monthnames[9] = "Sep";
monthnames[10] = "Oct";
monthnames[11] = "Nov";
monthnames[12] = "Dec";
if ("content" in entry) {
var postcontent = entry.content.$t;}
else
if ("summary" in entry) {
var postcontent = entry.summary.$t;}
else var postcontent = "";
var re = /<\S[^>]*>/g; 
postcontent = postcontent.replace(re, "");
if (!standardstyling) document.write('<div class="bbrecpost">');
if (standardstyling) document.write('<br/>');
document.write(posttitle);
document.write('<br/>');
if (showpostdate == true) document.write(' - ' + monthnames[parseInt(cdmonth,10)] + ' ' + cdday);
if (!standardstyling) document.write('</div><div class="bbrecpostsum">');
if (showpostsummary == true) {
if (standardstyling) document.write('<br/>');
if (postcontent.length < numchars) {
if (standardstyling) document.write('<i>');
document.write(postcontent);
if (standardstyling) document.write('</i>');}
else {
if (standardstyling) document.write('<i>');
postcontent = postcontent.substring(0, numchars);
var quoteEnd = postcontent.lastIndexOf(" ");
postcontent = postcontent.substring(0,quoteEnd);
document.write(postcontent + '...' + readmorelink);
if (standardstyling) document.write('</i>');}
}
if (!standardstyling) document.write('</div>');
}
}

var numposts = 10;
var showpostdate = false;
var showpostsummary = false;
var numchars = 250;
var standardstyling = false;
</script>
<script src="http://www.siteadresiniz.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentposts"></script>

Kodun içerisinde kırmızı yazdığım yerleri düzenleyebilirsiniz kendinize göre. Nasıl mı? Şu şekilde:

var numposts = 10;
Yukarıdaki değişkenin karşısındaki sayı son yazılar widgetinizde kaç tane yazının gösterileceğini belirtiyor. Bu sayıyı arttırabilir veya azaltabilirsiniz.

var showpostdate = false;
Burada ise true veya false kullanarak değişkenimizi değiştiriyoruz. Son yazılar widgetinde yazıların yazılma tarihlerinin görüntülenmesini istiyorsanız true, istemiyorsanız false olarak ayarlıyorsunuz.

var showpostsummary = false;
Yukarıdaki değişken ise yazının belirli bir kısmının gösterilip gösterilmeyeceğini belirtiyor. true olarak değiştirirseniz yazının başlığının altında yazıdan belirli bir kesit sunacaktır. Eğer false olarak bırakırsanız yazılarınızın sadece başlıklarını gösterecektir.

var numchars = 250;
Eğer yazınızın içeriğinden belirli bir kesit sunmayı bir önceki adımda kabul ettiyseniz, buradaki değişken yardımıyla yazınızdan kaç karakterlik bir içerik sunacağınızı belirtmelisiniz. Burada varsayılan olarak 250 karakter belirtilmiş. Yine seçim size ait :)

Ve ayrıca kırmızı ile işaretlediğim www.siteadresiniz.com kısmını kendi blog adresiniz ile değiştirin.

Blogger Son Yorumlar
Şimdi sıra geldi son yorumlar widgetine. Bunun için de blogunuzun "Sayfa Ögeleri" kısmında Yeni widget oluşturun ve "HTML/Javascript" ögesini seçin. Daha sonra içine aşağıda yazdığım kodu yapıştırın.


<script style="text/javascript">
function showrecentcomments(json) {
  for (var i = 0; i < numcomments; i++) {
    var entry = json.feed.entry[i];
    var alturl;

    if (i == json.feed.entry.length) break;
    for (var k = 0; k < entry.link.length; k++) {
      if (entry.link[k].rel == 'alternate') {
        alturl = entry.link[k].href;
        break;
      }
    }
   alturl = alturl.replace("#", "#comment-");
   var postlink = alturl.split("#");
   postlink = postlink[0];
   var linktext = postlink.split("/");
   linktext = linktext[5];
   linktext = linktext.split(".html");
   linktext = linktext[0];
   var posttitle = linktext.replace(/-/g," ");
   posttitle = posttitle.link(postlink);
   if ("content" in entry) {
     var comment = entry.content.$t;}
   else
   if ("summary" in entry) {
     var comment = entry.summary.$t;}
   else var comment = "";
   var re = /<\S[^>]*>/g; 
   comment = comment.replace(re, "");
   if (!standardstyling) document.write('<div class="bbrecpost">');

   document.write('<a href="' + alturl + '"><b><font color="#FF0000" style="font-size: 9pt">' + entry.author[0].name.$t + '</font></b> ; ');
   if (!standardstyling) document.write('</div><div class="bbrecpostsum">');
   if (comment.length < numchars) {
         if (standardstyling) document.write('');
         document.write('<i><font style="font-size: 9pt"> ' + comment + '</font></i><br>');
         if (standardstyling) document.write('');}
   else
        { 
         if (standardstyling) document.write('');
         comment = comment.substring(0, numchars);
         var quoteEnd = comment.lastIndexOf(" ");
         comment = comment.substring(0, quoteEnd);
         document.write('<i><font style="font-size: 9pt">' + comment + ' ...)</font></i><br>');
         if (standardstyling) document.write('</a>');}
   if (!standardstyling) document.write('</div>');
   if (standardstyling) document.write('');
  }
if (!standardstyling) document.write('<div class="bbwidgetfooter">');
if (standardstyling) document.write('');
document.write();
if (!standardstyling) document.write('</div>');}
var numcomments = 10;
var numchars = 20;
var standardstyling = true;
</script>
<script src="http://www.siteadresiniz.com/feeds/comments/default?alt=json-in-script&callback=showrecentcomments"></script>

Tabi, bu kodda da yapabileceğiniz birkaç ufak düzenleme var, mesela aşağıdakiler gibi. Aşağıdaki kodları yukarıda kırmızı renk ile belirttim.

var numcomments = 10;
Bu değişkenin karşısındaki sayıyı değiştirdiğimizde son yorumlar widgetimizde kaç tane yorum gösterileceğini belirlemiş oluyoruz.

var numchars = 20;
Bu değişkenin karşısındaki sayıyı değiştirdiğimizde ise her bir yorumdan kaç tane karakterin gösterileceğini belirlemiş oluyoruz.

Ve ayrıca kırmızı ile işaretlediğim www.siteadresiniz.com kısmını kendi blog adresiniz ile değiştirin.

Evet millet, javascript kodlarını widgetimizin içerisine kopyalıyoruz ki böylece bu javascript kodları için bir adet host bulmamıza gerek kalmıyor. Böyle daha rahat değil mi sizce?

Ve böylece eskiden Yasin abimin yazdığı şu yazıdaki butonların çalışmama sorununa da bir çare bulmuş olduk. Sorun şuydu; butonların bağlı olduğu linkteki site artık yoktu :)

11 ayın sultanı Ramazan ayına girmiş bulunuyoruz, bu yazıyı da ilk sene ilk sahurumu beklerken yazıyorum. Gece gece bilgisayar ekranına bön bön bakmaktan iyidir değil mi birşeyler paylaşmak? Neyse, uykusuzken yazdığım bu yazıda hatalarım olduysa affola, hepinize hayırlı ramazanlar dilerim, oruç tutanların oruçlarını Allah kabul etsin :)

Blogger'a Şablon/Tema Yüklemek

2009-08-19T15:20:00.001+03:00

Şu sıralar bana gelen soruların büyük bir kısmı "şablon yükleyemiyorum" konusu üzerine. Bu yüzden bu konuyu anlatma ihtiyacı duydum.

İlk olarak birbirinden güzel temaların bulunduğu http://btemplates.com/ sitesini kullanmayı göstereceğim sizlere. Size tavsiyem basit, sade temaları kullanın, hareketli cafcaflı temalardan uzak durun. Çünkü tema ne kadar karmaşık olursa içerisinde o kadar javascript dosyası olur ve o dosyaları da hostunuza yüklemeniz, daha sonra da şablonda yerleştirmeniz gerekir. Uyarıyı da verdikten sonra şimdi anlatıma geçelim.

İlk olarak http://btemplates.com/ sitesine giriyorsunuz. Sağda "Categories" başlığı altında birçok tema kategorisi görebilirsiniz. Onlardan birisine tıkladığınızda karşınıza yine ana sayfadaki gibi birçok tema çıkacaktır. Şimdi o temalardan sade olarak gördüğünüz herhangi birisine tıklayın. Daha sonra açılan sayfada "Download" ve "Live Demo" şeklinde iki tane buton görürsünüz. Bunlardan "Download" butonuna tıklayarak şablonunuzu bilgisayarınıza indirebilirsiniz. "Live Demo" ise o şablonun yüklü olduğu bir blog açar size ve şablonu canlı canlı inceleme imkanı sunar. Neyse uzatmadan, "Download" butonuna basın ve şablonu masaüstünüze indirin.

Şimdi masaüstünüze inmiş olan dosyayı inceleyelim. O bir sıkıştırılmış dosyadır ve onu açmadan şablon olarak blogunuza yükleyemezsiniz. Bu dosyaya sağ tıklayıp "klasöre çıkart ...\" şeklindeki winrar komutunu seçiyoruz. Örnek olsun diye ben "Nourish" isminde bir tema indirdim masaüstüne onu gösteriyorum resimlerde:

Bu işlemi yaptıktan sonra masaüstünüzde yeni bir klasör oluşacak, klasörün ismi indirdiğiniz zipli dosyanızın ismiyle aynı olacak şekilde. O klasörün içine göz gezdirecek olursanız, bir tane "XML Belgesi" bulursunuz.

Şimdi bu dosyayı Blogger'a yüklemek kaldı geriye. Şu yolu takip edin:
Blogger yönetim panelinde Yerleşim -> HTML'yi Düzenle sayfasına giriyorsunuz.
Orada "Dosya Seç" butonuna tıklıyorsunuz. Masaüstünüzde zipi açtıktan sonra oluşan klasörün içindeki xml dosyasını seçiyorsunuz ve "Aç" butonuna basıyorsunuz. Daha sonra da "Dosya Seç" butonunun yanındaki "Yükle" butonuna basıyorsunuz.
"Lütfen aşağıdaki widget’ların silinmesi gerektiğini doğrulayın. Tüm widget’ların yapılandırma verileri kaybolacak."
şeklinde bir uyarı alırsanız "Onayla ve Kaydet" butonuna basın ve yolunuza devam edin. Şablonunuzda bir hata yoksa yüklenecektir.

Not: Bilgisayarınıza indirdiğiniz sıkıştırılmış dosyayı açabilmek için Winrar programına ihtiyacınız olacaktır. Winrar programını indirmek için aşağıdaki linke tıklayın:
http://www.rarlab.com/rar/wrar380tr.exe

Otomatik Yazının Devamını Oku Bağlantısı

2009-08-15T12:43:00.009+03:00

Güncelleme: Blogger'ın devamını oku özelliğini resmen devreye sokmasıyla bu tür kod ekleme işlemlerine artık gerek kalmadı. Güncel yazı için:
http://www.bloggerdestek.com/2009/10/blogger-devamini-oku-ozelligi.html

Eski "devamını oku" eklentisinin sayfasını düzenleyip kaydettiğimde besleme okuyucular bunu yeni yazılmış bir yazı kabul edmiş, bağlı olduğum sosyal ağlarda da bu yazı yeni bir yazıymış gibi yayınlanmıştı. Otomatik Devamını Oku daha iyi gibi bir de yorum alınca bu eklentinin de bloggerdestek sayfalarında bulunması gereklidir diye düşündüm.

Evet eklentiyi tanıtmak gerekirse, sizin belirlediğiniz karakter sayısından sonra yazıyı bölüyor ve devamını oku iletisi koyuyor. Ayrıca yazıya eklediğiniz ilk resimi de sizin istediğiniz boyutlara getirip sola yaslıyor ve onu da ana sayfada o şekilde görüyorsunuz.

Şimdi nasıl yapıldığına geçelim. Uzun uzadıya anlatılması gereken birşey değil. Ama biraz uzatacağım olası sorunları önlemek için.

İlk olarak blogunuzda Yerleşim kısmındaki "HTML Düzenle" sayfasında "Widget Şablonlarını Genişlet" seçeneğini işaretliyorsunuz. Daha sonra ctrl+f yardımıyla şablonda arama yaparak şu kodu buluyorsunuz: <data:post.body/>

Daha sonra bulduğunuz o kodu siliyorsunuz, yerine aşağıdaki kodu yapıştırıyorsunuz.


<script type='text/javascript'>
summary_noimg = 350;
summary_img = 250;
img_thumb_height = 80;
img_thumb_width = 80;
</script>
<script src='http://klod82.googlepages.com/summary-post.js' type='text/javascript'/>
<b:if cond='data:blog.pageType != "item"'>
<div expr:id='"summary" + data:post.id'>
<data:post.body/>
</div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script>
<span class='rmlink' style='float:right'>
<a expr:href='data:post.url'>Devamını Oku</a>
</span>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<data:post.body/>
</b:if>

Eklediniz mi? Şimdi birkaç ufak ayar yaparak bu eklentiyi kendinize göre kişiselleştiriyorsunuz. Yukarıdaki kodun en üstlerinde bulunan şu satırlarda istediğiniz düzenlemeleri yapıverin:
summary_noimg = 350; --> Resim olmadığı zaman yazının 350 karakteri gösterilir.
summary_img = 250; --> Resim olduğu zaman yazının 250 karakteri gösterilir.
img_thumb_height = 80; --> Resimin yüksekliği 80px olarak ayarlı.
img_thumb_width = 80; --> Resimin genişliği 80px olarak ayarlı.

Düzenleme:Ve ayrıca şunu düzenlemenizde fayda var; kodun 7. satırında bulunan script kodunun içerisindeki javascript dosyasını kendi bilgisayarınıza indirip kendi hostunuza kurmalı ve koddaki linki değiştirmelisiniz. Yani oradaki
http://klod82.googlepages.com/summary-post.js
linkinin yerine kendi hostunuza yüklediğiniz js dosyasının linkini yazmalısınız.

Bu satırlardaki sayıları da düzenlediyseniz şablonunuzu kaydedebilirsiniz. Olası bir problem ile karşılaşmamak için düzenlemeleri yapmadan önce şablonunuzu bilgisayarınıza kaydedin.

Kodlar: TamBirBlog

Status Message(Durum Mesajı) Bloğunu Düzenliyoruz

2009-08-11T22:52:00.006+03:00

Blogger'da etiketlerden herhangi birisine tıklayıp etiket sayfasını açtığınızda veya arama yapıp arama sayfasını açtığınızda "Status Message" isimli bir blok belirir sayfanızda. Bu blokta gittiğiniz sayfanın özelliğiyle ilgili bilgi verir. Örnek vermek gerekirse:
- "widget etiketine sahip kayıtlar gösteriliyor. Tüm kayıtları göster"
- "Sorgunuzla eşleşen kayıt yok. Tüm kayıtları göster"
- "blogger sorgusuna yönelik kayıtlar görüntüleniyor. Tüm kayıtları göster"

Şimdi bu mesajın görüntülendiği bloğu düzenleyeceğiz. Bu blok normalde css kodlarınıza ekleyeceğiniz basit birkaç kod ile düzenlenebilir ancak ben html kodlarının da üzerinde duracağım.

Status Message bloğu, blog HTML'nizde "widget şablonlarını genişlet" seçeneğinizi aktif ettiğinizde karşınıza çıkan şu kodlar ile tanımlanmıştır:


<b:includable id='status-message'>
<b:if cond='data:navMessage'>
<div class='status-msg-wrap'>
<div class='status-msg-body'>
<data:navMessage/>
</div>
<div class='status-msg-border'>
<div class='status-msg-bg'>
<div class='status-msg-hidden'><data:navMessage/></div>
</div>
</div>
</div>
<div style='clear: both;'/>
</b:if>
</b:includable>

"Bazı Özel Kodlar" isimli yazıda anlattığım gibi b:includable kodu sadece bir nesneyi tanımlamaya yarar. O nesnenin nerede duracağını ise b:include koduyla düzenleriz. Yani üstteki kodları takiben şablonunuzda bir de b:include kodunun bulunması gerekiyor. Bu kod ise şudur:
<b:include data='top' name='status-message'/>

Evet bu kodları gösterdiğime göre düzenleme kısmına geçebilirim. Öncelikle renklendirme ve resim ekleme olayını anlatacağım. Bunu CSS aracılığıyla yapıyoruz.
Şablon HTML'mizde ctrl+f tuş kombinasyonunu kullanarak ]]></b:skin> kodunu arıyoruz, buluyoruz ve hemen üstüne şu kodları yapıştırıyoruz:


.status-msg-wrap {
width:90%;
padding:5px;
}
.status-msg-body {
font-size:80%;
text-align:left;
padding:5px 5px 5px 30px;
width:auto;
}
.status-msg-border {
border:1px solid #a19a36;
opacity:1;
}
.status-msg-bg {
background: #FFF9B3 url(http://img3.imageshack.us/img3/2228/gnomestatus5b25d.png) center left no-repeat;
opacity:1;
}

Renklerden ve biçimlendirmeden biraz bahsedecek olursam:

1) Kenarlık:
Yukarıdaki css kodlarında gördüğünüz border:1px solid #a19a36; kodu Status Message bloğunuzun kenarlıklarını belirtmek için kullanılmış. Buradaki 1px kenarlığın genişliğini, solid kenarlığın cinsini, #a19a36 ise kenarlığın rengini belirtir. 1px değerini büyüterek(2px,3px,..) kenarlığı kalınlaştırabilir, solid yerine dotted yazarak kenarlığı kesik çizgilerden oluşan bir hale getirebilir, #a19a36 yerine de başka bir renk kodu yazarak kenarlığın rengini değiştirebilirsiniz. Kenarlıkları kaldırmak için ise border:1px solid #a19a36; kodu yerine border:0; kodunu yazabilirsiniz.

2) Arkaplan Rengi
Yukarıdaki CSS kodları içerisinde gördüğünüz
background: #FFF9B3 url(http://img3.imageshack.us/img3/2228/gnomestatus5b25d.png) center left no-repeat;
kodundaki #FFF9B3 renk kodunun yerine başka bir renk kodu yazarsanız Status Message bloğunuzun rengini değiştirmiş olacaksınız.

3) Soldaki Resim
Yine bir üst maddede yazdığım kod olan
background: #FFF9B3 url(http://img3.imageshack.us/img3/2228/gnomestatus5b25d.png) center left no-repeat;
kodunun içinde soldaki resimin de kodu mevcut.
http://img3.imageshack.us/img3/2228/gnomestatus5b25d.png
Bu resim linkinin yerine kendi resim dosyanızın linkini yazdığınız zaman Status Message bloğunuzun sol tarafında o resim çıkacaktır. Burada dikkat etmeniz gereken şey ise sizin yükleyeceğiniz resimin genişliği normalde orada bulunan resimin genişliğinden fazlaysa
padding:5px 5px 5px 30px;
Kodundaki 30px değerini büyütmeniz gerekir.

4) Status Message Bloğunu Kaldırmak
Bunu uygulamak için iki tane yöntem var:

4.1) Birinci yöntem CSS kodlarıyla kaldırmak, bu yöntemi kullanırsanız, Status Message bloğu aslında blogunuzda var olacak, ancak ziyaretçiler onu göremeyecek. Yukarıdaki CSS kodlarını blogunuza yapıştırdıysanız silin, çünkü ona artık ihtiyacınız kalmadı. Şimdi ]]></b:skin> kodundan hemen önce şu kodları yapıştıracaksınız:


.status-msg-wrap {
width:0;
height:0;
display:none;
}

Bu işlemi yaptıktan sonra şablonunuzu kaydedin. Olmuş olmalı :)

4.2) İkinci yöntem ise html kodlarının arasından b:include kodunu silmek. Şablon HTML'nizde "Widget Şablonlarını Genişlet" seçeneğini aktifleştirin ve ctrl+f yardımıyla şu kodu bulun:
<b:include data='top' name='status-message'/>
Ve o kodu silin... Şablonunuzu kaydettiğinizde olmuş olmalı :)

Tarayıcı Uyumu: CSS Sıfırlama Tekniği

2009-08-11T01:21:00.005+03:00

Bir web sayfası hazırlarken bazı etiketlerin her tarayıcıda farklı göründüğünü fark ettiniz mi hiç? Bazı html etiketleri, eğer css ile onlara belirli değerleri vermediyseniz her tarayıcıda farklı değerler alırlar. Örnek verecek olursak h1 etiketini hiçbir css tanımlaması yapmadan bir şablona yerleştirdik. Bazı tarayıcılar h1 etiketini yorumlarken yukarıdan biraz boşluk bırakırlar. Bazı tarayıcılar ise hiçbir boşluk bırakmazlar. Bu nedenle tarayıcılar arasında büyük farklar oluşabilir.

Ancak CSS Sıfırlama Tekniklerini kullandığımızda ise iş biraz değişir. Bu tekniği kullanarak web sayfamızdaki tüm html etiketlerini başlangıçta sıfırlıyoruz. Bu sayede tarayıcılar değil siz belirlemiş oluyorsunuz nasıl görüneceğini. Sıfırlama tekniği CSS kodlarınızın en başında öylece dururken siz de istediğiniz etiketleri onun altında tekrar tanımlamaya başlıyorsunuz.

Aşağıda benim en çok kullandığım ve bloggerdestek'de de kullandığım CSS Sıfırlama Tekniği olan Eric Mayer'in ürettiği "Tam Sıfırlama" tekniğinin kodları var.


html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
outline: 0;
}
body {
line-height: 1;
color: black;
background: white;
}
ol, ul {
list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
border-collapse: separate;
border-spacing: 0;
}
caption, th, td {
text-align: left;
font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: "";
}
blockquote, q {
quotes: "" "";
}

Sanırım en çok kullanılan sıfırlama tekniği de budur. Bu kodu CSS kodlarımızın en başına eklememiz gerekiyor. Blogger için konuşmak gerekirse:
<b:skin><![CDATA[
kodundan hemen sonra yukarıdaki kodları yapıştırabiliriz. Kodların yukarıdaki haliyle şablonunuzda çok yer kapladığını düşünecek olursanız aşağıdaki haliyle de koyabilirsiniz. Nasıl olsa sıfırlama kodu üzerinde hiçbir değişiklik yapmanız gerekmiyor. Aşağıdaki kod yukarıdaki kodun düzenlenmiş halidir. İşlevsel olarak hiçbir fark yoktur.


html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {margin:0;padding:0;border:0;outline:0;font-weight:inherit;font-style:inherit;font-size:100%;font-family:inherit;vertical-align:baseline;}
:focus {outline:0;}
body {line-height:1;color:black;background:white;}
ol, ul {list-style:none;}
table {border-collapse:separate;border-spacing:0;}
caption, th, td {text-align:left;font-weight:normal;}
blockquote:before, blockquote:after, q:before, q:after {content: "";}
blockquote, q {quotes: "" "";}

Daha fazla CSS Sıfırlama Tekniği öğrenmek isterseniz Web Deneyimleri isimli blogu ziyaret edebilirsiniz. Link:
http://webdeneyimleri.donanimhaber.com/css-sifirlama-teknigi/

Blogger'da Bazı Özel Kodlar

2009-08-10T10:06:00.009+03:00

Blogger şablonunda belli başlı anlamlı kodlar vardır. Şablonun tamamen html veya css'den oluştuğunu sananlar yanılırlar çünkü bu kodlar html olarak tanımlı değildir. Bugün bu kodlardan ele alabildiğimce fazlasını ele almaya çalışacağım, çünkü kendi şablonunu yapmak isteyen her ferdin bilmesi gerektiğini düşünüyorum bunları. Başlıyorum.

A) Widget Şablonları Genişletilmeden
Öncelikle widget şablonlarını genişletmeden karşımıza çıkan kodlardan bahsedeyim.
Not: İçi nokta dolu parantez o kodun ortasında başka kodların var olduğu anlamına gelir. Bunu her kodda yapacağım. Parantezin solundaki kod anlatacağım kodun başlangıcı, sağındaki değer ise bitişidir. Ve parantezin yerinde de başka kodlar mevcuttur genellikle.

1) <b:skin><![CDATA[ (.....................) ]]></b:skin>
Bu kodun arasında HTML'den <style> ve </style> taglarının arasına yerleştirmeye alışık olduğumuz, şablonun CSS kodları bulunur. Bir tasarım yaparken siz ister bu kodun arasına yazın css kodlarınızı, isterseniz de yine alışık olduğunuz gibi <head> tagından sonra <style> ve </style> taglarını kopyalayın ve bu tagların arasına yazın.

2) <b:section class='....' id='....' > (....................) </b:section>
Bu kodun arasında widgetleriniz bulunur. Etiketler, blog yazıları, blog arşivi, son yazılar vs. sayfa ögelerinden eklediğiniz tüm widgetler bu kodların arasında bulunur. Bu kod sayfanızda birkaç yerde bulunabilir. Örneğin header, sidebar ve main kısımlarının içerisinde olabilir. Tagın içindeki id='....' kısmındaki noktaları silerek kendi şablonunuzda olmayan bir kelime girmeniz şartıyla bu kodu şablonda çeşitli yerlere kopyalayarak blogunuzda istediğiniz yeri widget eklenebilir hale getirebilirsiniz.

3) <b:widget id='.....' title='..........' type='.....'/>
Bunlar da eklediğiniz widgetleri gösterirler ve bu kodlar yukarıda 2. maddede verdiğim kodun arasında bulunurlar. Her widget için bu koddan bir tane çıkar ve widget şablonlarını genişlet dediğiniz zaman bu kodlar genişleyerek içlerindeki tüm html kodlarını size gösterirler. Bu kodlardan birini silmeniz demek o widgeti silmeniz demektir ve şablonu kaydederseniz geri dönüşü yoktur.

B) Widget Şablonlarını Genişlettikten Sonra
Widget şablonlarını genişlettiğimize göre widgetlerin tasarımıyla ilgili kodlarla uğraşacağız demektir.
Not: Sayfa ögeleri kısmından girip bir widgeti düzenlemek ile buradan bir widgeti düzenlemek arasında fark vardır. Buradan widgetin tasarımını düzenlerken sayfa ögelerinden widgetin içeriğini düzenlersiniz.

1) <b:includable id='............'> (...........) </b:includable>
Noktalı yerlerde belirli html kodları ve aşağıda anlatacağım birkaç özel kod daha vardır genellikle. Bu kod belirli değerleri tanımlamak için kullanılır. Mesela "Yorumlar" veya "Yazılar" ın şeklini falan tanımlamaya yarar. İçerisindeki html kodunu değiştirerek tanımladığı nesneler üzerinde değişiklik yapabilirsiniz.

2) <b:include data='......' name='.........'/>
Genellikle kapalı koddur yani kod tek tag ile oluşur kapatma tagı olmaz ve yukarıdaki gibi "/" ile biter. Neyse b:include koduna gelecek olursak, yukarıdaki b:includable koduyla tanımladığımız olayı herhangi bir yere çağırmak için kullanılır. Yani biz b:includable ile belirtilen şeyin görünmesini istediğimiz yeri b:include kodunu taşıyarak belirliyoruz. Çünkü b:includable sadece onun ne olduğunu ve nasıl olduğunu tanımlamak için kullanılırken b:include ise onun nerede olacağını belirtir.

3) <b:if cond='......'> (...............) </b:if>
Bu kod isminden de anlaşılacağı gibi eğer(if) ifadesini içeriyor. Yani belirli koşullarda belirli tepkiler verilmesini sağlıyor. Bu kodun üzerinde çok duracağım çünkü blog tasarımında çok önemli bir yeri var bence. Yerine göre kullanmasını bilen tasarımcı bu kod ile harikalar yaratabilir.

Öncelikle, bir koşullu sorgulama oluşturabilmek için elinizde bir koşulun olması gerekiyor. Bu koşulu da kodun içerisindeki cont='...' kısmında belirtmelisiniz. Şimdi örnek koşulları işleyelim.

3.1) <b:if cond='data:blog.pageType == "item"'> (.....) </b:if>
Bu koşulda gördüğünüz üzere eşitliğini kurmuş. Burdaki matematiksel sembollerden ve ingilizce ifadelerden de anlayabiliyoruz aslında ancak açıklayayım, data:blog.pageType == "item"data:blog.pageType kodu sayfanın ne sayfası olduğunu sorguluyor. item ise sayfanın yazı sayfası olduğunu belirtiyor. Arada iki tane eşittir(==) işaretinin olması da koşulun eşitlik anlamı taşıdığını gösteriyor. Burdaki koşulun anlamı şu: "eğer sayfa yazı sayfasıysa". Bu kod şu şekilde çalışır:
<b:if cond='data:blog.pageType == "item"'> kodu ile </b:if> kodu arasına yazdığınız kodlar sadece yazı sayfalarında çalışır. Onun harici sayfalarda çalışmaz. İki adet eşittir(=) işaretinden birincisini ünlem(!) ile değiştirerek kodu kullanırsanız kod tam tersi anlamda çalışır. Yani <b:if cond='data:blog.pageType != "item"'> kodu ile </b:if> kodu arasına yazdığınız kod sadece yazı sayfasında görünmez. Onun harici tüm sayfalarda görünür.

3.2) <b:if cond='data:blog.pageType == "archive"'> (.....) </b:if>
Bu kod da bir üstteki maddeyle benzer bir özelliğe sahip. Bu kodun içerisine yazdığınız kod sadece arşiv sayfalarında çalışır. Arşiv sayfasında değilseniz yani anasayfada veya yazı sayfasındaysanız bu kodu çalıştırmaz, sadece arşiv bağlantılarından birine tıkladığınızda açılan sayfada çalışır. Aynı şekilde yukarıdaki maddede olduğu gibi ünlemli(!) versiyonu da vardır. Yani arşiv sayfası olmayan sayfalarda elemanın görünmesini sağlar.

3.3) <b:if cond='data:blog.pageType == "index"'> (.....) </b:if>
Bu kodda da sayfa tipinin index, yani anasayfa olması koşulu verilmiş. Bu kodun içine yazdığınız diğer kodlar veya yazılar sadece anasayfada görünecektir. Yukarıdaki iki maddede olduğu gibi ünlemli(!) kullanımı da vardır. Yani yazıların ana sayfa harici sayfalarda görüntülenmesi koşulu. Bu kod aşağıdaki şekilde de karşınıza çıkabilir:
<b:if cond='data:blog.homepageUrl == data:blog.url'>
Bu kodun da blog ana sayfanızın adresinin şu anda açık olan sayfaya eşit olması durumunda çalışacağını koşullamış. Yani bir şeyin sadece ana sayfada görünmesi için yazılan bir kod.

3.4) <b:if cond='.........'> (.......) </b:if>
Bu kodda anlatılan şey .... olan yere yazılan şeyin doğru olduğu durumlarda çalışmasıdır. Eşittir işareti yoktur yada herhangi bir matematiksel ifade yoktur diyelim. Koşul sizin yönetim panelinden yaptıklarınıza bağlı olarak çalışır. Anlatımda tıkantım kendi kodlarımdan bir örnek veriyorum :)


<b:if cond='data:post.labels'>
Kategoriler:
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'>
<data:label.name/>
</a>
<b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if></b:loop>.
</b:if>

Burada koşul olarak data:post.labels kullanılmış. Hani sayfa ögelerinde Blog Yazıları widgetini düzenlerken etiketler diye bir onay kutusu var. Bu kod o onay kutusuna tik koyarsanız çalışacak, diğer durumlarda çalışmayacaktır. İsterseniz buradaki b:if kısımlarını kaldırıp koşulu ortadan kaldırabilirsiniz. Böylece kontrol paneliyle alakayı kesmiş olacaksınız, etiketler her zaman yazıda görünecektir. Bu şekilde tek ifadeli çok sorgu vardır şablonunuzda ben burada etiketleri örnek verdim.

3.5) <b:else> kodunun <b:if> ile birlikte kullanımı:
İngilizcede "aksi halde" anlamına gelen "else" kelimesinden oluşan bu kod b:if kodunun içinde kullanılır. Biz az önce yaptığımız uygulamalarda şöyle şeyler yapmıştık, mesela bir kodu sadece ana sayfada gösteriyorduk. Ancak öyle yazdığımız bir koşulda kod sadece ana sayfada görünüyor, diğer sayfalarda görünmüyordu. b:else kullanırsak durum şöyle olacak, mesela bir yelemanı ana sayfada görünsün diye ayarlayacağız, eğer girilen sayfa ana sayfa değilse başka bir eleman görünecek. Bir örnekle pekiştirecek olursak:


<b:if cond='data:blog.homepageUrl == data:blog.url'>
Bu kısım sadece ana sayfada çıkacak
<b:else/>
Bu kısım ise ana sayfa harici sayfalarda çıkacak
</b:if>

Gördüğünüz gibi bu şekilde b:if koşulunun içerisine yazılan bir koşullamadır b:else. Yani b:if'in tamamlayıcısıdır diyebiliriz. Ama kullanmak da zorunlu değildir tabi :)

4) b:loop Tekrarlama Kodu:
Evet en sevdiğim şeye geldi sıra. Bazı olayları tekrarlama kodu. Örneğin ana sayfada yazıların alt alta listelenmesi, yazı sayfasında yorumların alt alta listelenmesi, yazının altında etiketlerin yan yana sıralanması, bağlantılar widgetinizde kaydettiğiniz linklerin alt alta sıralanması gibi peş peşe gelen listeleme işlemlerini yapar bu eleman. Etiketlerden bir örnek vermek gerekirse:


  Bu yazı şu etiketlere sahiptir:
<div id='etiketlerimiz'>
Kategoriler:
<b:loop values='data:post.labels' var='label'>
  <a expr:href='data:label.url' rel='tag'>
  <data:label.name/>
  </a>
  <b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
</b:loop>.
</div>

Kodda gördüğünüz biçimlendirme üzerinden anlatayım. Burada b:loop kodunun içerisinde yazının etiketlerini çağıran koşullar var. Etikete tıklandığında açılacak olan sayfa falan kodlanmış. Ancak b:loop olmasaydı burada etiketlerin tamamını peş peşe çağıramazdık sayfaya. b:loop burada tek tek her etiketi temsil ediyor. b:loop kodunun içerisinde yapacağınız değişiklik etiketleri tek tek etkilerken b:loop kodunun dışında yapacağınız değişiklik etiketleri toptan etkiler. Mesela b:loop kodunun bir satır üstünde bir resim eklerseniz o resim sayfada bir tane çıkacaktır ancak b:loop kodunun içine bir resim eklemişsek, bu resim sayfada her etiketin yanında görünecektir. Yukarıdaki örnekte gördüğünüz "Kategoriler:" yazısı b:loop kodunun dışında olduğu için sadece bir kere etiketlerden önce görüntüleniyor. Eğer onu b:loop kodunun içerisine yazmak gibi bir hata etse idik her bir etiketten önce kategoriler diye bir kelime çıkacaktı.

5) <data:..../> Kodu
Bu kod belirli verileri Blogger veritabanından şablonumuza çağırmak için kullanılıyor. Örneğin <data:post.author/> kodunda post.author, yani yazının yazarı, verisini blog yazısına çağırma amacı vardır. Bu şekilde pek çok veri vardır şablonda. Örneğin yukarıdaki örneklerin birinde bulunan <data:label.name/> kodu da herhangi bir etiketin ismini çağırmak için kullanılmış.

Bugünlük bu kadar. 3 saatlik bir yazının sonunda sonuna geldim, umarım faydalı olur, eksiklerim veya hatalarım için yorum yapmayı ihmal etmeyin. İyi günler...

Blog Dergisi 1. Sayı

2009-08-08T23:10:00.008+03:00

Blog dünyasını yakından ilgilendirecek bir olay var, Blog Dergisi isminde bir dergi piyasaya çıktı. Özgün yazılarıyla ve geniş yazar kadrosuyla online ortamda yayınlanmaya başlayan derginin 1. sayısı bu ay içerisinde çıktı.

Hemen indirip okunması gereken bir dergidir diye düşündüm, kota problemime rağmen indirdim ve yanılmadığımı anladım. Dergi öncelikle şık tasarımıyla göze hitap ediyor. Bir online dergi olmasına rağmen baskı dergiler kadar tasarımı hoş. Aceleyle hazırladıkları için iyi olmadığını söyledikleri dergi kapakları bile bence oldukça şık. Bu da bizi gelecek sayılarda daha güzel dergi kapaklarının beklediğini gösteriyor.

Gelelim dergi içeriğine. Dergi bu sayısında şu ana başlıklarda yazılar içeriyor:

-Blog

-Röportaj

-Teknoloji

-Oyun

-Sinema

-Müzik

-Mizah

Ana başlıklardan da anlaşılacağı gibi bu sadece blog ile ilgili değil, her konuyla ilgili bir dergi. Her telden yazılar var ve her türlü kitleye biraz biraz hitap ediyor. Ancak derginin girişinde de bahsedilmiş yazar eksikliği var ve bu nedenle bence konu sayısı bir dergiye göre yetersiz kalmış.

Bitirirken...

Yazıyı sonlandırırken buradan birkaç tavsiye yazmak istedim aklıma gelen şu:

- Yazar sıkıntınızı gidermek için misafir yazarlığa başvurabilirsiniz. Bir kişi sadece derginin bir sayısına istediği yazıyı gönderir, siz beğenirseniz eklersiniz, o kişinin adı soyadı blog adresiyle beraber yayınlarsınız. O sayınızda da yazar kadronuzda misafir yazarlar(konuk oyuncu gibi) diye bir başlık açar orada ismini belirtirsiniz tekrar.

- Bir blog dergisi olduğu halde blog harici konular çok ağır basıyor. Bu konular olmasın demiyorum ancak blog dergisi diye ismine bakıp açtığımızda blog ile ilgili daha çok yazı görmek istiyoruz.

Dipnot: Blogger konulu yazınızdaki kız da çok hoş olmuş orada :)

PDF uzantılı dergiyi buradan indirebilirsiniz:
http://www.mediafire.com/download.php?omoq2lzlqyh

Derginin yayınlandığı siteler:

Tam Bir Blog

BlogDergisi.com

Yazı İçerisine Kod veya Şablon İçerisine Adsense Kodu Eklemek

2009-08-08T16:09:00.006+03:00

Bazı bloggercı arkadaşlar yazı içine kod ekleyemezler. Ya kodları içlerine tire(-) işareti koyarak yazarlar, ya koddaki karakterleri tek tek değiştirmeye çalışırlar, ya da normal yapıştırırlar ama kodlar kod olarak değil de kodun karşılığı olarak görünürler.

Bazı arkadaşlar da Blogger Şablonunun içerisinde body tagından sonra Adsense kodlarını yerleştirmeye çalışırlar ancak blogger şablonunun içerisinde body tagından sonra script tagı eklenemez. Bu nedenle şablon hata verir.

İşte bu iki neden ile Blogger'da kullanamadığımız kodları dönüştürerek yerleştirmemiz gerekiyor.

Eskiden bu şekilde kodları ekleyebilmek için kodun içindeki çoğu karakteri
(<) işaretlerinin yerine (& l t ;) (>)işaretlerinin yerine (& g t ;) ve
(") işaretlerinin yerine (& q u o t;)
olacak şekilde el ile değiştirirdik. Şimdi ise bu işi blogger kullanıcıları için işkence olmaktan kurtaracak bir kod buldum bir yerden, BloggerDestek maskesi giydirdim ve sizler için yayınladım. Buradaki linke tıklayın ve açılan Pop-Up penceredeki büyük alana kodunuzu yazın/yapıştırın. Daha sonra "Çevir" butonuna bastığınızda kodunuz sizin için blogunuza yerleştirilebilir hale gelecektir. Daha sonra o kodu ne yapacağınızı siz biliyorsunuz. Bilmeyenler için:
http://www.bloggerdestek.com/2008/03/reklamlar-yaz-iinde-yaymlansn.html
http://www.bloggerdestek.com/2008/06/reklamlariniz-yazi-icinde-yayimlansin-2.html

Artı olarak bunu sadece reklamlar için mi kullanıyoruz? Hayır! Yukarıda da belirttiğim gibi ziyaretçilerinize/okurlarınıza göstermek istediğiniz kodları yazıya koyarken de çevirdikten sonra koyuyorsunuz. Umarım sizin için hazırladığım şeyi beğenirsiniz :)

Kod Çevir!

Yeniden Doğuş

2009-08-08T02:02:00.004+03:00

Bu yola ilk çıktığımız günlerde ne kadar ateşliydik bilirsiniz. İnsanlarla birşeyler paylaşabilmek, insanlara birşeyler öğretebilmek için yanıp tutuşurduk. Yasin abim ile beraber başladığımız bu yolda bu blogdan nice yazarlar geçti. Kimisi geldi, hiçbir şey yazmadan gitti, kimsi geldi, sessiz sakin yazılarını paylaştı ve sonra gitti, kimisi ise hala burada... Blogger dünyasında duyurulacak yenilik hiç bitmiyor. Ancak blogda en son yazılan yazının Mart 2009'da olduğunu görünce de bazı şeyleri düşünmek gerekiyor. 11 yazarı olan bir blogda 4-5 ay boyunca hiçbir şeyin yazılmaması sizce de düşündürücü değil mi?

Blog en parlak zamanlarını Ocak-Ağustos 2008 döneminde yaşadı. O tarihten sonra biliyorsunuz ki benim ÖSS çalışmalarım başladı. Ben 1 sene internetten ayrı kaldım, gelişmelerden ayrı kaldım, en önemlisi de bloglarımdan ayrı kaldım. Döndüğümde fark ettiğim ilk şeylerden birisi BloggerDestek ateşinin söndüğüydü ve çok üzücü olmuştu benim için. Çünkü sitenin başına olmadık felaketler gelmişti. Yeni bir şablon yüklenmiş, şablondaki resim dosyalarının adresleri bozuk olunca şablon neredeyse kullanılamaz hale gelmişti. Üstüne üstlük siteye yaklaşık 4000 dış bağlantı varken site google arama sonuçlarında çıkmaz olmuştu. Sanki sadece izleyicilerinin görüntüleyebileceği bir blog oluvermişti.

Bu duruma en kısa zamanda el atmak gerektiğini düşündüm ama koca bir yaz yasin abimi bekledim bu konuyu konuşmak için, ama onun üniversite işleri olduğunu ve uzun süre gelemeyeceğini anlayınca boşa beklediğimi anladım.(Not: Yasin abi sana sitem etmiyorum.)

Tek başıma bu işe girişmeyi düşündüm. Nereden başlamalı diye düşündüm. Önce blogun Google aramalarında çıkması için birkaç düzenleme yaptım(webmaster tools, meta tag ekleme vs...). Daha sonra kendimi tamamen tasarıma verdim. 3-4 gün süren yeni bir tasarım oluşturma sürecinin sonunda bu temayı oluşturdum. Tek başıma mı? Hayır, Shawn Ralf tüm tasarım süreci boyunca gerek görüşleriyle, gerek verdiği renk kodlarıyla, gerek şablon arşiviyle, gerekse manevi desteğiyle bana çok yardımcı oldu. Teşekkür etmeden de olmayacak :)

Şimdi BloggerDestek için bir yeniden doğuş söz konusu olmalı. Bu yeniden doğuş için birçok fedakarlık yaptım, oldukça fazla vaktimi harcadım. İnşallah diğer yazar arkadaşlar da bu konuda bu bloga desteklerini artık esirgemezler.

Şimdi yazıları düzenleme sürecine giriyorum. Eski, güncelliğini kaybetmiş, işe yaramaz yazıları silip, hala güncel ve işe yarar yazıları da yeniden düzenleyerek blogun görüntüsündeki bozuklukları da biraz daha azaltacağım. Bu süreç de sanırım 3-5 gün civarı sürer. Bana şans dileyin :)

Vay be. Sanırım en uzun yazılarımdan birisi oldu. Ve sanırım en çok uğraştığım şablon da bu oldu :) İnşallah kıymeti bilinir.

Crafty Blogger Teması

2009-03-03T11:28:00.001+02:00

Crafty teması iki sütunlu hoş bir tema, sizlerle paylaşayım dedim. Orijinal olarak Its Called Web Design tarafından Wordpress için tasarlanmıştır ve FoolBlogger tarafından Blogger uyarlaması yapılmıştır. Hoş, göz yormayan ve düzgün bir tasarımı vardır ayrıca renk uyumu sağlandığında Adsense kullananlar içinde büyük avantaj sağlayacaktır.

Bu yazı Blogger Destek Tema bloguna taşınmıştır. Link:
http://tema.bloggerdestek.com/2009/08/crafty-blogger-temas.html

Blogger Magazine Templates

2009-01-09T19:57:00.001+02:00

BloggerDestek okuyucuları uzundur yeni bir yazı görmedi. Malesef ki yeni yılda artık sizlere çok fazla destek veremiyoruz.Malum paylaşılıcak çok yenilik yok onun yanı sıra yazar kadromuzun darmaduman olmasıda ayrı bir durum.Benimde iş okul vs hayatımdan ötürü öksüz kaldı destek blogumuz.Arasıra yazarım gördüğümü eklerim diyen varsa bir mailcik atsın arkadaşlar :) Bu aralar blogger magazine temaları buldum bir kaç adet epeyde hoşuma gitti.

Bu yazı Blogger Destek Tema bloguna aktarılmıştır. Link:
http://tema.bloggerdestek.com/2009/08/blogger-magazine-templates.html

Blogger için Kışa Özel Logolar

2008-11-18T14:09:00.001+02:00

Kışa özel birbirinden hoş ve kullanışlı blogger logolarını Taizzar tarafından hazırlanmış bu güzel çalışmayı sizlerle paylaşmak istedim.Lafı fazla uzatmadan ;

İndir

Buzla Blog Yarışması

2008-11-02T22:05:00.001+02:00

Uzun zamandır yazmaya zaman bulamamaktan ziyade yazmaya değebilicek pek bir konu bulamamaktan yakınarak nette zap yapıyordum. Google reklamlarında blog yarışması ilanını görüp hemen tıkırtattım.Bizlerinde uzun zaman önce düşündüğü ama hayata geçiremediği bu yarışmanın var olması blog camiamız için sevindirici haber. Umarım sonuçlarıda demokratik olur.En son forum.iyinet.com webmaster sitesinin bir yarışması vardı bildiğim ve son ay yarışma iptal edilmişti.Ondan sonra yarışmalara karşı epey soğudum.Fakat Ödüllerde yabana atılmıcak türdün birinci arkadaşa meşhur iphone 3 g hediye edilicekmiş.17 Kasım'a kadar ön kayıtlar alınıcakmış bu duruma göre acele etmekte fayda var, kriterler kurallar nedir onları anlatıcak değilim. http://blogyarismasi.blogspot.com/ adında ki blogdan ayrıntılı bilgi alınabilir.
İyi olan kazansın :)

Blogger için Flash Etiket Bulutu

2008-08-31T17:44:00.010+03:00

Wordpress bloglarında gördüğümüz flash etiket bulutunu Blogger Buster'de blogger'a uygulanışı anlatılmış.İngilizcesi olmayanlar için anlatıyım.Baştan söyliyim Türkçe karakterler çıkmıyor js bilgisi olanlar bunu düzeltebilirler sanırım.
Yerleşim>Html düzenlede Ctrl+F Tuşlarına basıp aşağıdaki kodu arıyoruz.

<b:section class='sidebar' id='sidebar' preferred='yes'>

Daha sonra yukarıdaki kodun altına aşağıdaki kodu yapıştırıyoruz.


<b:widget id='Label99' locked='false' title='Labels' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<script src='http://halotemplates.s3.amazonaws.com/wp-cumulus-example/swfobject.js' type='text/javascript'/>
<div id='flashcontent'>Blogumulus by <a href='http://www.roytanck.com/'>Roy Tanck</a> and <a href='http://www.bloggerbuster.com'>Amanda Fazani</a></div>
<script type='text/javascript'>
var so = new SWFObject(&quot;http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf&quot;, &quot;tagcloud&quot;, &quot;240&quot;, &quot;300&quot;, &quot;7&quot;, &quot;#ffffff&quot;);
// uncomment next line to enable transparency
//so.addParam(&quot;wmode&quot;, &quot;transparent&quot;);
so.addVariable(&quot;tcolor&quot;, &quot;0x333333&quot;);
so.addVariable(&quot;mode&quot;, &quot;tags&quot;);
so.addVariable(&quot;distr&quot;, &quot;true&quot;);
so.addVariable(&quot;tspeed&quot;, &quot;100&quot;);
so.addVariable(&quot;tagcloud&quot;, &quot;<tags><b:loop values='data:labels' var='label'><a expr:href='data:label.url' style='12'><data:label.name/></a></b:loop></tags>&quot;);
so.addParam(&quot;allowScriptAccess&quot;, &quot;always&quot;);
so.write(&quot;flashcontent&quot;);
</script>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

Sıra geldi etiket bulutunun genişliğine ve rengine


var so = new SWFObject("http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf", "tagcloud", "240", "300", "7", "#ffffff");

240 ve 300 genişlik için temanıza göre ayarlamanız lazım.


var so = new SWFObject("http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf", "tagcloud", "240", "300", "7", "#ffffff");

Kırmızı işaretli yer reng kodu ,etiket bulutunun arkaplan rengini burdan değiştiriyorsunuz

Ve bunları yaptıkdan sonra temamızı kaydediyoruz.Daha sonra sayfa öğesi ekle kısmından etiketler i uygun bir yere sürüklüyoruz.Bitti bu kadar.Hayırı olsun.

Not: Her temada olmuyor,yapılabilmesi için temanızda ilk aramanız için verdiğim kodun olması lazım.Kendi bloğuma yapmaya çalıştım yapamadım.Bende şuraya yaptım. :)

Blogger Buster'da ayrıntılı olarak anlatılmış.Daha detaylı bilgi için oraya bakın.

Page Navigation Menu Blogger için Widget

2008-08-30T17:56:00.004+03:00

Şu adresteki blogda yukarıda gördüğünüz gibi blog yazıları sayfalama widgeti anlatılmış.Yalız birinci sayfadan ikinci sayfaya geçince birden fazla yazı değil bir sonraki yazıyı gösteriyor.

Yapmanız gereken aşağıda verilen kodu kopyalıp sayfa öğesi ekle kısmından HTML/JAVASCRİPT'i şeçip oraya yapıştırmak.Ve widgeti blog yazılarının altına yerleştirmek.Kod:


<style>
.showpageArea {padding: 0 2px;margin-top:10px;margin-bottom:10px;
}
.showpageArea a {border: 1px solid #505050;
color: #000000;font-weight:normal;
padding: 3px 6px !important;
padding: 1px 4px ;margin:0px 4px;
text-decoration: none;
}
.showpageArea a:hover {
font-size:11px;
border: 1px solid #333;
color: #000000;
background-color: #FFFFFF;
}

.showpageNum a {border: 1px solid #505050;
color: #000000;font-weight:normal;
padding: 3px 6px !important;
padding: 1px 4px ;margin:0px 4px;
text-decoration: none;

}
.showpageNum a:hover {
font-size:11px;
border: 1px solid #333;
color: #000000;
background-color: #FFFFFF;

}
.showpagePoint {font-size:11px;
padding: 2px 4px 2px 4px;
margin: 2px;
font-weight: bold;
border: 1px solid #333;
color: #fff;
background-color: #000000;

}

.showpage a:hover {font-size:11px;
border: 1px solid #333;
color: #000000;
background-color: #FFFFFF;

}
.showpageNum a:link,.showpage a:link {
font-size:11px;
padding: 2px 4px 2px 4px;
margin: 2px;
text-decoration: none;
border: 1px solid #0066cc;
color: #0066cc;
background-color: #FFFFFF;}

.showpageNum a:hover {font-size:11px;
border: 1px solid #333;
color: #000000;
background-color: #FFFFFF;
}
</style>

<script type=”text/javascript”>

function showpageCount(json) {
var thisUrl = location.href;
var htmlMap = new Array();
var isFirstPage = thisUrl.substring(thisUrl.length-14,thisUrl.length)==”.blogspot.com/”;
var isLablePage = thisUrl.indexOf(”/search/label/”)!=-1;
var isPage = thisUrl.indexOf(”/search?updated”)!=-1;
var thisLable = isLablePage ? thisUrl.substr(thisUrl.indexOf(”/search/label/”)+14,thisUrl.length) : “”;
thisLable = thisLable.indexOf(”?”)!=-1 ? thisLable.substr(0,thisLable.indexOf(”?”)) : thisLable;
var thisNum = 1;
var postNum=1;
var itemCount = 0;
var fFlag = 0;
var eFlag = 0;
var html= ”;
var upPageHtml =”;
var downPageHtml =”;

var pageCount=5;
var displayPageNum=3;
var firstPageWord = ‘First’;
var endPageWord = ‘Last’;
var upPageWord =’Previous’;
var downPageWord =’Next’;

var labelHtml = ‘<span class=”showpageNum”><a href=”/search/label/’+thisLable+’?&max-results=’+pageCount+’”>’;

for(var i=0, post; post = json.feed.entry[i]; i++) {
var timestamp = post.published.$t.substr(0,10);
var title = post.title.$t;
if(isLablePage){
if(title!=”){
if(post.category){
for(var c=0, post_category; post_category = post.category[c]; c++) {
if(encodeURIComponent(post_category.term)==thisLable){
if(itemCount==0 (itemCount % pageCount ==(pageCount-1))){
if(thisUrl.indexOf(timestamp)!=-1 ){
thisNum = postNum;
}

postNum++;
htmlMap[htmlMap.length] = ‘/search/label/’+thisLable+’?updated-max=’+timestamp+’T00%3A00%3A00%2B08%3A00&max-results=’+pageCount;
}
}
}
}//end if(post.category){

itemCount++;
}

}else{
if(title!=”){
if(itemCount==0 (itemCount % pageCount ==(pageCount-1))){
if(thisUrl.indexOf(timestamp)!=-1 ){
thisNum = postNum;
}

if(title!=”) postNum++;
htmlMap[htmlMap.length] = ‘/search?updated-max=’+timestamp+’T00%3A00%3A00%2B08%3A00&max-results=’+pageCount;
}
}
itemCount++;
}
}

for(var p =0;p< htmlMap.length;p++){
if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){
if(fFlag ==0 && p == thisNum-2){
if(thisNum==2){
if(isLablePage){
upPageHtml = labelHtml + upPageWord +’</a></span>’;
}else{
upPageHtml = ‘<span class=”showpage”><a href=”/”>’+ upPageWord +’</a></span>’;
}
}else{
upPageHtml = ‘<span class=”showpage”><a href=”‘+htmlMap[p]+’”>’+ upPageWord +’</a></span>’;
}

fFlag++;
}

if(p==(thisNum-1)){
html += ‘&nbsp;<span class=”showpagePoint”><u>’+thisNum+’</u></span>’;
}else{
if(p==0){
if(isLablePage){
html = labelHtml+’1</a></span>’;
}else{
html += ‘<span class=”showpageNum”><a href=”/”>1</a></span>’;
}
}else{
html += ‘<span class=”showpageNum”><a href=”‘+htmlMap[p]+’”>’+ (p+1) +’ </a></span>’;
}
}

if(eFlag ==0 && p == thisNum){
downPageHtml = ‘<span class=”showpage”> <a href=”‘+htmlMap[p]+’”>’+ downPageWord +’</a></span>’;
eFlag++;
}
}//end if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){
}//end for(var p =0;p< htmlMap.length;p++){

if(thisNum>1){
if(!isLablePage){
html = ‘<span class=”showpage”><a href=”/”>’+ firstPageWord +’ </a></span>’+upPageHtml+’ ‘+html +’ ‘;
}else{
html = ”+labelHtml + firstPageWord +’ </a></span>’+upPageHtml+’ ‘+html +’ ‘;
}
}

html = ‘<div class=”showpageArea”><span style=”padding: 2px 4px 2px 4px;margin: 2px 2px 2px 2px;color: #000000;border: 1px solid #333; background-” class=”showpage”>Page ‘+thisNum+’ of ‘+(postNum-1)+’: </span>’+html;

if(thisNum<(postNum-1)){
html += downPageHtml;
html += ‘<span class=”showpage”><a href=”‘+htmlMap[htmlMap.length-1]+’”> ‘+endPageWord+’</a></span>’;
}

if(postNum==1) postNum++;
html += ‘</div>’;

if(isPage isFirstPage isLablePage){
var pageArea = document.getElementsByName(”pageArea”);
var blogPager = document.getElementById(”blog-pager”);

if(postNum <= 2){
html =”;
}

for(var p =0;p< pageArea.length;p++){
pageArea[p].innerHTML = html;
}

if(pageArea&&pageArea.length>0){
html =”;
}

if(blogPager){
blogPager.innerHTML = html;
}
}

}
</script>

<script src=”/feeds/posts/summary?alt=jso
n-in-script&callback=showpageCount&max-results=99999″ type=”text/javascript”></script>
<div style=”text-align:right;font-size:10px;color:000000;margin-top:15px;display:none;”> <a href=”http://www.techieblogger.com/2008/07/page-navigation-hack-for-blogger.html”>
Grab this Widget ~ Blogger Accessories
</a></div>

Blogger Sağ Tarafta Kayan Banner

2008-08-16T03:46:00.010+03:00

Bir çok websitesinde görmüş olduğunuz sağ tarafta bulunan siz hareket ettikçe aynı doğrultuda hareket eden kayan bannerların blogger için nasıl yapıldığını bu yazıda bulabilirsiniz.
Birçok arkadaş biliyordur belki ama ben yinelemekte fayda buluyorum herkes kaynak sayfasından bu kodları bulmakla uğraşmasın burada elinin altında bulunsun.Bu kod ile reklamlarınızı kayan banner olarak yayınlayabilir ziyaretçinizin ilgisini biraz daha çekebilirsiniz bu ne kadar faydalı olur hiç bilemiyorum test etme imkanım olmadı.Neyse gelelim uygulama aşamasına;

Sayfanın herhangi bi yerine HTML/JavaScript ile eklemeniz gereken kod:


<style type="text/css">

#topbar{
position:absolute;
border: 0px solid black;
padding: 0px;
background-color: white;
width: 111px;
visibility: hidden;
z-index: 0;
}

</style>

<script type="text/javascript">
var persistclose=1 //set to 0 or 1. 1 means once the bar is manually closed, it will remain closed for browser session
var startX = 10 //set x offset of bar in pixels
var startY = 5 //set y offset of bar in pixels
var verticalpos="fromtop" //enter "fromtop" or "frombottom"

function iecompattest(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}

function get_cookie(Name) {
var search = Name + "="
var returnvalue = "";
if (document.cookie.length > 0) {
offset = document.cookie.indexOf(search)
if (offset != -1) {
offset += search.length
end = document.cookie.indexOf(";", offset);
if (end == -1) end = document.cookie.length;
returnvalue=unescape(document.cookie.substring(offset, end))
}
}
return returnvalue;
}

function closebar(){
if (persistclose)
document.cookie="remainclosed=1"
document.getElementById("topbar").style.visibility="hidden"
}

function staticbar(){
barheight=document.getElementById("topbar").offsetHeight
var ns = (navigator.appName.indexOf("Netscape") != -1) || window.opera;
var d = document;
function ml(id){
var el=d.getElementById(id);
if (!persistclose || persistclose && get_cookie("remainclosed")=="")
el.style.visibility="visible"
if(d.layers)el.style=el;
el.sP=function(x,y){this.style.right=x+"px";this.style.top=y+"px";};
el.x = startX;
if (verticalpos=="fromtop")
el.y = startY;
else{
el.y = ns ? pageYOffset + innerHeight : iecompattest().scrollTop + iecompattest().clientHeight;
el.y -= startY;
}
return el;
}
window.stayTopright=function(){
if (verticalpos=="fromtop"){
var pY = ns ? pageYOffset : iecompattest().scrollTop;
ftlObj.y += (pY + startY - ftlObj.y)/8;
}
else{
var pY = ns ? pageYOffset + innerHeight - barheight: iecompattest().scrollTop + iecompattest().clientHeight - barheight;
ftlObj.y += (pY - startY - ftlObj.y)/8;
}
ftlObj.sP(ftlObj.x, ftlObj.y);
setTimeout("stayTopright()", 0);
}
ftlObj = ml("topbar");
stayTopright();
}

if (window.addEventListener)
window.addEventListener("load", staticbar, false)
else if (window.attachEvent)
window.attachEvent("onload", staticbar)
else if (document.getElementById)
window.onload=staticbar
</script>


<div id="topbar">
Reklam kodunuzu buraya ekleyin
</div>

Görmüş olduğunuz kodu eklerken en alt kısımda "Reklam kodunuzu buraya ekleyin" ibaresine dikkat edip gereken düzenlemeyi yapınız.
Daha sonra sayfanızda bir yere ekleyin ve Kaydettikten sonra reklamınız yayınlanıcaktır.İşte hepsi bu kadar basit.
Örnek görebilmek isteyen arkadaşlar için buyrun demo

Vibrant Blogger XML Template

2008-08-16T02:46:00.008+03:00

Gosublogger kısa tatil döneminde ki sessizliğini güzel bir xml tema ile bozmuş herşeyi devletten beklemeden bu sefer onun yapmış olduğu bu hoş temayı ben sizlere tanıtıyorum.

Not: Bu yazı BloggerDestek Tema bloguna taşınmıştır.
http://tema.bloggerdestek.com/2009/08/vibrant-blogger-xml-template.html