RBarut33: 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.

:

Lütfen yorumlarınızda saygılı bir dil kullanmaya ve konuyla ilgili kalmaya özen gösterin. Topluluk kurallarımıza aykırı (örneğin; nefret söylemi, taciz, spam) içerikler tespit edildiğinde kaldırılacaktır. Davranış politikaları hakkında daha fazla bilgi için Google'ın İçerik Politikası sayfasını inceleyebilirsiniz.

RBarut33

Site İstatisliği

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