Blogger XML Ders Planı

 Harika bir fikir! Blogger (Blogspot) temalarının arkasındaki gizli gücü, yani XML yapısını öğrenmek ve öğretmek, web tasarımcıları için altın değerindedir. Blogger XML, standart HTML ve CSS'i kendi dinamik etiketleriyle bağlayan, kendine has kuralları olan bir sistemdir.

Blogger XML Eğitim Serisi 

Ders 1: Giriş – Blogger XML Nedir ve Standart HTML'den Farkı Ne?

  • Konu: Blogger temalarının iskeletini anlamak.

  • İçerik: Standart bir HTML dosyası ile Blogger XML arasındaki farklar. xmlns, expr:, ve data: gibi Blogger'a özel öneklerin (namespace) mantığı.

  • Öne Çıkan: XML şablonunu kaydederken hata almamak için mutlaka olması gereken zorunlu etiketler.

Ders 2: Şablonun Anatomisi – Temel Alanlar ve Düzen (Layout)

  • Konu: <b:section> ve <b:widget> yapısını çözmek.

  • İçerik: Paneldeki "Düzen" kısmının kod tarafındaki karşılığı. Bir section (bölüm) nasıl oluşturulur, içine widget (gadget) nasıl eklenir?

  • Kritik Kural: Sayfa içinde aynı Widget ID'sinin (id='Header1', id='Blog1') neden asla yinelenmemesi gerektiği ve showaddelement='yes/no' gibi niteliklerin (attributes) kullanımı.

Ders 3: Can Damarı – Data (Veri) Etiketleri ve Çağırma Yöntemleri

  • Konu: Blogger sunucularındaki veriyi (Yazı başlığı, tarihi, yorum sayısı vb.) ekrana basmak.

  • İçerik: <data:blog.pageTitle/>, <data:post.body/>, <data:post.url/> gibi en çok kullanılan global ve yerel veri etiketleri.

  • Uygulama: Saf kod (pure code) kullanarak dinamik bir yazı başlığı alanı oluşturma.

Ders 4: Koşullu İfadeler (Blogger İf-Else Yapısı)

  • Konu: Kodları sadece belirli sayfalarda çalıştırmak (SEO ve Hız Optimizasyonu için kritik).

  • İçerik: <b:if cond='...'> ve <b:else/> kullanımı.

    • Sadece ana sayfada görünen kodlar.

    • Sadece yazı (post) sayfalarında çalışan CSS/JS alanları.

    • Hata (404) sayfasına özel tasarımlar.

Ders 5: Döngüler ve Esneklik – <b:loop> ile Listeleme

  • Konu: Yazıları, etiketleri veya popüler postları listeleme mantığı.

  • İçerik: <b:loop values='data:posts' var='post'> yapısı. Veri dizilerini (arrays) ekrana basarken dikkat edilmesi gerekenler. Index mantığı ve listeleme sınırlandırmaları.

Ders 6: Meta Etiketleri ve SEO Optimizasyonu

  • Konu: XML içine gömülü arama motoru optimizasyonu.

  • İçerik: Dinamik description (açıklama) ve title (başlık) metatag'leri. Sosyal medya paylaşım kartları (Open Graph ve Twitter Cards) için XML kodlaması.

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html b:css='false' b:defaultmessages='false' b:layoutsVersion='3' b:responsive='true' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
  <head>
    <title><data:blog.pageTitle/></title>
    <b:skin><![CDATA[
      /* Temanızın Tüm CSS ve Animasyon Kodları Buraya Gelecek */
    ]]></b:skin>
  </head>
  <body>

    <b:section id='main-core' showaddelement='yes'>
      </b:section>

  </body>
</html>

Bu Kodda Neler Var?

  • xmlns:b, xmlns:data, xmlns:expr: Blogger'ın kendi özel kodlarını (b:if, b:loop, data:post vb.) tarayıcının tanıyabilmesi için zorunlu olan kütüphane tanımlamalarıdır.

  • <b:skin>: Standart HTML'deki <style> etiketinin Blogger karşılığıdır. Tüm CSS kurallarımızı ve tasarımsal animasyonlarımızı bu alana yazarız.

  • <b:section>: Blogger düzen panelinde bir "Kutu/Bölüm" oluşturur. İçine widget ekleyebilmemiz için şablonda en az bir tane bulunması şarttır. blogger,xml,ders


Hiç yorum yok:

Yorum Gönder