Blogger Tema Kodlama Rehberi (2025): Şablonun Mantığını ve Yapısını Öğren

Blogger şablon teması, aslında tek bir XML dosyası içinde HTML, CSS, JavaScript ve özel “b:” etiketleriyle tanımlanan, dinamik bir yapı içerir. Google’ın şablon motoru bu XML’i yorumlayıp ziyaretçiye standart HTML+CSS+JS olarak sunar. Aşağıda en güncel (b:layoutsVersion=2) temalarda karşınıza çıkacak temel yapı taşları ve kodlama mantığı özetlenmiştir:

1. Dosya başlığı ve kök element

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html b:version="2"
      expr:dir='data:blog.languageDirection'
      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'>

b:version="2": En güncel şablon motorunu (layoutsVersion 2) kullanır.
expr: ve data: önekleriyle dinamik ifade ve veri bağlamaları yapılır. geekthis.net

2. `<head>` Bölümü

xml
<head>
  <title><data:blog.pageTitle/></title>
  <b:include data='blog' name='all-head-content'/>
  <!-- Tema değişkenleri ve CSS -->
  <b:skin>
    <![CDATA[
      /* Tema tasarım değişkenleri */
      /* name: backgroundColor; type: color; default: #ffffff; */
      body { background: $(backgroundColor); }
      /* ... */
    ]]>
  </b:skin>
  <!-- Şablon editöründe önizleme için ayrı CSS -->
  <b:template-skin>
    <![CDATA[
      /* Sadece Theme Designer’da kullanılan CSS */
    ]]>
  </b:template-skin>
  <b:template-scripts>
    <![CDATA[
      // Tema tarafından ihtiyaç duyulan JS kodları
    ]]>
  </b:template-scripts>
</head>

<b:skin>: Tema renk/font gibi kullanıcı tarafından Theme Designer’da değiştirilebilecek değişkenleri ve CSS’i tutar bloggerbasics101.blogspot.com
<b:template-skin>: Theme Designer’ın “HTML düzenle” modunda önizleme için ek stil sağlar bloggerbasics101.blogspot.com
<b:template-scripts>: Tema seviyesinde JS kodlarını barındırır.

3. `<body>` ve Bölümler (Sections)

xml
<body>
  <!-- Başlık bölümü -->
  <b:section id='header' class='header' maxwidgets='1' showaddelement='yes'>
    <b:widget id='Header1' type='Header' locked='true' title=''>
      <b:includable id='main'>
        <h1><data:blog.title/></h1>
      </b:includable>
    </b:widget>
  </b:section>

  <!-- Gövde içeriği -->
  <b:section id='main' class='main-content' showaddelement='yes'>
    <b:widget id='Blog1' type='Blog' locked='false'>
      <b:includable id='item'>
        <article>
          <h2><data:post.title/></h2>
          <div class='post-body'><data:post.body/></div>
        </article>
      </b:includable>
      <b:includable id='archive'>
        <b:loop values='data:posts' var='post'>
          <!-- Her post için yukarıdaki şablon kullanılır -->
        </b:loop>
      </b:includable>
    </b:widget>
  </b:section>

  <!-- Alt bilgi -->
  <b:section id='footer' class='footer' maxwidgets='1'>
    <b:widget id='Footer1' type='HTML' locked='false'>
      <b:includable id='main'>
        <p>&copy; <data:blog.currentYear/> <data:blog.title/></p>
      </b:includable>
    </b:widget>
  </b:section>
</body>

<b:section>: Blogunuzun “Başlık”, “Gövde”, “Yan Çubuk”, “Altbilgi” gibi alanlarını tanımlar.
<b:widget>: Her bir bileşeni (Header, Blog, HTML, Label List vb.) ifade eder.
<b:includable>: Widget içinde farklı durumlara (ana liste, tekil öğe, arşiv modu vb.) göre ayrı şablon parçaları tanımlar. geekthis.netGoogle Yardım

4. Dinamik Koşullar ve Döngüler

Koşullu ifadeler

xml
<b:if cond='data:view.isHomepage'>
  <!-- Sadece anasayfada gösterilecek içerik -->
</b:if>

Döngü

xml
<b:loop values='data:posts' var='post'>
  <!-- data:post.title, data:post.url vb. kullanılır -->
</b:loop>

Veri etiketleri: <data:blog.title/>, <data:post.date/>, <data:post.labels/> gibi pek çok yerleşik etiket mevcuttur Google Yardım

5. Nasıl Çalışır?

Yükleme: Blogger yönetici panelinden “Tema → HTML Düzenle” yoluyla XML dosyanız kaydedilir.
Derleme: Google’ın şablon motoru, <b:…> ve <data:…> etiketlerini yorumlayarak gerçek HTML, CSS ve JS üretir.
Önizleme / Düzenleme: Theme Designer’da <b:skin> içindeki değişkenler renk/font önizlemesini anında günceller.
Sunum: Ziyaretçi sayfayı istediğinde, önceden derlenmiş standart web kaynakları (HTML/CSS/JS) tarayıcıya gönderilir.

Özet ve İpuçları

Kodlamaya başlamadan önce “basit” bir şablonu yedekleyip incelemek en kolay yol: Standart “Simple” temasını indirin ve adım adım yapısını inceleyin.
Widget ve Section yapılarını iyi kavrayın; bunlar düzeni ve ekleme-çıkarma kontrolünü belirler.
<b:skin> içindeki değişken açıklamaları—/* name: …; type: color; default: …; */—tema kullanıcılarının renk/font ayarlarını Theme Designer’da görmesini sağlar.
JavaScript eklemek için <b:template-scripts> kullanın; dış kütüphane ihtiyaçlarınız varsa <script src='…'/> etiketiyle yükleyebilirsiniz.

Bu yapıyı kullanarak, kendi blogunuz için tamamen özelleştirilmiş, responsive, SEO-uyumlu ve kullanıcı dostu bir Blogger teması geliştirebilirsiniz.

Yorumlarınız bizim için değerli! Fikirlerinizi, sorularınızı ve görüşlerinizi bizimle paylaşmaktan çekinmeyin. Lütfen yorumunuzun konuyla ilgili olduğundan emin olun ve saygı çerçebesinde kalmaya özen gösterin. Argo, küfür veya topluluk kurallarını ihlal eden yorumlar kaldırılacaktır. Teşekkürler!

✻ ✻ ✻