Dokumentasi: Versi Template Blogger (XML)

February 19, 2026

Penjelasan

Setiap template/tema Blogger memiliki versi yang ditentukan langsung pada tag <html> paling atas dalam kode XML. Versi ini sangat penting karena menentukan fitur, tag, dan sintaks apa saja yang bisa kamu gunakan di dalam template tersebut.

Dua atribut utama yang menentukan versi template adalah:

Atribut	Fungsi
`b:layoutsVersion`	Menentukan versi tata letak (layout) yang digunakan. Mengatur bagaimana section, widget, dan struktur halaman bekerja.
`b:defaultwidgetversion`	Menentukan versi widget default yang digunakan. Mengatur bagaimana data di dalam widget diakses dan dirender.

Cara Membaca Versi Template

Komunitas Blogger biasanya menyebut versi template dengan format:

v{layoutsVersion}.{defaultwidgetversion}

Contoh:

`b:layoutsVersion`	`b:defaultwidgetversion`	Versi Template
Tidak ada	Tidak ada	v1
`2`	`1`	v2.1
`2`	`2`	v2.2
`3`	`2`	v3.2 (paling modern)

⚠️ Penting :
Jika kedua atribut tidak ditulis sama sekali, maka Blogger secara otomatis menganggap template tersebut menggunakan versi 1 (v1) - versi paling lama/legacy.

Sintaks

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html
  b:layoutsVersion='3'
  b:defaultwidgetversion='2'
  b:responsive='true'
  b:css='true'
  b:js='true'
  expr:dir='data:blog.languageDirection'
  expr:lang='data:blog.locale'>

  <head>
    <!-- ... -->
  </head>

  <body>
    <!-- ... -->
  </body>

</html>

Atribut pada Tag `<html>`

Berikut adalah atribut-atribut yang bisa digunakan pada tag <html> dalam template Blogger:

Atribut Versi (Inti)

Atribut	Nilai	Default	Keterangan
`b:layoutsVersion`	`'2'` atau `'3'`	`1` (jika tidak ditulis)	Versi sistem tata letak. Menentukan tag struktur apa saja yang tersedia.
`b:defaultwidgetversion`	`'1'` atau `'2'`	`1` (jika tidak ditulis)	Versi widget default. Menentukan cara data widget diakses.

Atribut Pendukung

Atribut	Nilai	Default	Keterangan
`b:responsive`	`'true'` / `'false'`	`false`	Mengaktifkan mode responsif. Jika `true`, Blogger tidak akan menyajikan tampilan mobile terpisah dan menggunakan template yang sama untuk semua perangkat.
`b:css`	`'true'` / `'false'`	`false`	Jika `true`, Blogger akan menggabungkan (bundle) semua CSS skin ke dalam satu blok untuk optimasi performa.
`b:js`	`'true'` / `'false'`	`false`	Mengontrol bagaimana Blogger menangani JavaScript bawaan. Jika `true`, memungkinkan pengelolaan JS yang lebih efisien.

Atribut Umum HTML

Atribut	Contoh Nilai	Keterangan
`expr:dir`	`data:blog.languageDirection`	Arah teks (ltr atau rtl) berdasarkan bahasa blog.
`expr:lang`	`data:blog.locale`	Kode bahasa blog (misal: id, en-US).
`xmlns`	`http://www.w3.org/1999/xhtml`	Namespace XML (opsional di versi modern).
`xmlns:b`	`http://www.google.com/2005/gml/b`	Namespace untuk tag Blogger (opsional di versi modern).
`xmlns:data`	`http://www.google.com/2005/gml/data`	Namespace untuk data Blogger (opsional di versi modern).
`xmlns:expr`	`http://www.google.com/2005/gml/expr`	Namespace untuk ekspresi (opsional di versi modern).

Perbedaan Antar Versi

🔹 Versi 1 (v1) - Legacy

Versi paling awal. Digunakan jika b:layoutsVersion dan b:defaultwidgetversion tidak ditulis.

<html>
  <!-- Tidak ada atribut b:layoutsVersion atau b:defaultwidgetversion -->

Ciri-ciri:

Menggunakan namespace xmlns:b, xmlns:data, xmlns:expr secara wajib
Tidak mendukung b:elseif, b:switch
Akses data menggunakan sintaks lama
Menggunakan tag <b:if> bersarang (nested) untuk kondisi bertingkat
Widget menggunakan format data versi lama

Contoh kondisi bertingkat di v1:

<!-- Tidak ada b:elseif, harus nesting manual -->
<b:if cond='data:blog.pageType == "item"'>
  <p>Ini halaman postingan</p>
<b:else/>
  <b:if cond='data:blog.pageType == "static_page"'>
    <p>Ini halaman statis</p>
  <b:else/>
    <p>Ini halaman lainnya</p>
  </b:if>
</b:if>

🔹 Versi 2 (v2.x) - Transisi

<html b:layoutsVersion='2' b:defaultwidgetversion='2'>

Peningkatan dari v1:

Namespace (xmlns:...) menjadi opsional
Mendukung expr: prefix dengan sintaks yang lebih fleksibel
Widget v2 mengubah cara akses data (struktur data lebih rapi)
Beberapa tag lama mulai deprecated

🔹 Versi 3 (v3.2) - Modern / Terkini

<html b:layoutsVersion='3' b:defaultwidgetversion='2' b:responsive='true' b:css='true' b:js='true'>

Peningkatan signifikan:

✅ Mendukung b:elseif - tidak perlu nesting b:if lagi
✅ Mendukung b:switch, b:case, b:default - untuk kondisi multi-cabang
✅ Mendukung lambda expression - untuk operasi data yang lebih kompleks
✅ Mendukung b:attr, b:class - untuk manipulasi atribut HTML secara dinamis
✅ Mendukung operator ternary (? :) di dalam expr:
✅ Dukungan responsif penuh dengan b:responsive='true'
✅ Optimasi performa CSS dan JS

Contoh fitur baru di v3:

<!-- b:elseif - kondisi bertingkat jadi bersih -->
<b:if cond='data:blog.pageType == "item"'>
  <p>Halaman Postingan</p>
<b:elseif cond='data:blog.pageType == "static_page"'/>
  <p>Halaman Statis</p>
<b:elseif cond='data:blog.pageType == "index"'/>
  <p>Halaman Index / Beranda</p>
<b:else/>
  <p>Halaman Lainnya</p>
</b:if>

<!-- b:switch - alternatif elegan untuk banyak kondisi -->
<b:switch var='data:blog.pageType'>
  <b:case value='item'/>
    <p>Halaman Postingan</p>
  <b:case value='static_page'/>
    <p>Halaman Statis</p>
  <b:default/>
    <p>Halaman Lainnya</p>
</b:switch>

<!-- Operator ternary di dalam expr -->
<a expr:class='data:blog.pageType == "item" ? "active" : "inactive"'>
  Link
</a>

🔹 Versi Dinamis (Dynamic Views) - Versi Khusus (Sudah Jarang Digunakan)

Ini adalah jenis template khusus yang dibuat oleh Blogger dengan pendekatan berbeda:

Menggunakan JavaScript-heavy rendering - konten di-render di sisi klien, bukan server
Memiliki beberapa tampilan bawaan seperti: Flipcard, Mosaic, Sidebar, Snapshot, Timeslide, Classic, Magazine
Struktur XML-nya berbeda dari template biasa dan sangat terbatas untuk dikustomisasi
Google sudah lama tidak memperbarui versi ini, dan secara bertahap ditinggalkan

ℹ️ Catatan Penting :
Versi Dinamis tidak mengikuti sistem penomoran b:layoutsVersion / b:defaultwidgetversion seperti versi lainnya. Ini lebih merupakan "jenis template" tersendiri daripada versi dalam satu lini yang sama.

Dampak Pemilihan Versi

Ini bagian yang sangat penting untuk dipahami:

┌─────────────────────────────────────────────────────┐
│  ⚠️  VERSI MENENTUKAN TAG APA YANG BISA DIGUNAKAN  │
└─────────────────────────────────────────────────────┘

Fitur / Tag	v1	v2.x	v3.2
`b:if` / `b:else`	✅	✅	✅
`b:loop`	✅	✅	✅
`b:section` / `b:widget`	✅	✅	✅
`b:elseif`	❌	❌	✅
`b:switch` / `b:case` / `b:default`	❌	❌	✅
`b:attr` / `b:class`	❌	❌	✅
Lambda Expression	❌	❌	✅
Operator Ternary (`? :`)	❌	⚠️ Terbatas	✅
`expr:` prefix	⚠️ Dasar	✅	✅
`b:responsive='true'`	❌	✅	✅
Namespace `xmlns:` wajib	✅ Wajib	Opsional	Opsional
Widget data v2	❌	✅	✅

ℹ️ Catatan Penting :
🚨 Jika kamu menggunakan tag yang tidak didukung oleh versi template-mu, tag tersebut akan diabaikan atau menyebabkan error. Misalnya, menulis <b:elseif> di template v1 tidak akan bekerja sama sekali.

Contoh Sederhana

Template v1 (Legacy)

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html
  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[ /* CSS disini */ ]]></b:skin>
</head>
<body>
  <b:section id='main' class='main' maxwidgets='1'>
    <b:widget id='Blog1' type='Blog' locked='true'/>
  </b:section>
</body>
</html>

Template v3.2 (Modern) - ✅ Rekomendasi

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html
  b:layoutsVersion='3'
  b:defaultwidgetversion='2'
  b:responsive='true'
  b:css='true'
  b:js='true'
  expr:dir='data:blog.languageDirection'
  expr:lang='data:blog.locale'>
<head>
  <meta charset='UTF-8'/>
  <meta name='viewport' content='width=device-width, initial-scale=1'/>
  <title><data:view.title.escaped/></title>

  <b:skin><![CDATA[
    /* CSS kalian disini */
    body { font-family: sans-serif; margin: 0; }
  ]]></b:skin>
</head>
<body>

  <b:switch var='data:blog.pageType'>
    <b:case value='item'/>
      <h1>Selamat Membaca Postingan!</h1>
    <b:case value='static_page'/>
      <h1>Halaman Statis</h1>
    <b:default/>
      <h1>Selamat Datang di Blog</h1>
  </b:switch>

  <b:section id='main' class='main' maxwidgets='1' showaddelement='no'>
    <b:widget id='Blog1' type='Blog' locked='true' version='2'
              visible='true' title=''>
      <b:includable id='main' var='this'>
        <b:loop values='data:posts' var='post'>
          <article>
            <h2><data:post.title/></h2>
            <div><data:post.body/></div>
            <b:if cond='data:post.labels'>
              <ul>
                <b:loop values='data:post.labels' var='label'>
                  <li><a expr:href='data:label.url'><data:label.name/></a></li>
                </b:loop>
              </ul>
            </b:if>
          </article>
        </b:loop>
      </b:includable>
    </b:widget>
  </b:section>

</body>
</html>

💡 Tips & Rekomendasi

Selalu gunakan v3.2 untuk template baru - ini versi paling lengkap dan didukung penuh oleh Blogger saat ini.
Jangan campur referensi versi - jika template-mu v1, jangan copy-paste kode dari tutorial v3 tanpa menyesuaikan versinya terlebih dahulu.
Cek versi sebelum mengedit - sebelum memodifikasi template, selalu lihat bagian <html> paling atas untuk mengetahui versi yang digunakan.
Migrasi bertahap - jika ingin upgrade dari v1 ke v3.2, lakukan secara bertahap dan uji setiap perubahan karena banyak sintaks data widget yang berubah antara versi.
Perhatikan version='2' pada tag <b:widget> - selain versi global di <html>, setiap widget juga bisa memiliki atribut versi sendiri yang meng-override b:defaultwidgetversion.
```

<b:widget id='Blog1' type='Blog' version='2'>
```