Blogger'da Bazı Özel Kodlar

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 == &quot;item&quot;'> (.....) </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 == &quot;item&quot;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 == &quot;item&quot;'> 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 != &quot;item&quot;'> 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...

0 yorum:

 
 
OrtayiPisletenV1 - Copyrgiht 2013 - Tüm haklarımı annem kaldırdı - Tema Yapımcısı: TanerC.