Membuat Template Blogger Mulai dari Nol

Tujuan: Membangun template Blogger dari kerangka kosong secara bertahap — mulai dari header, footer, sidebar, hingga area postingan — sehingga pemula bisa melihat langsung perubahan yang terjadi di blog mereka.

Prasyarat

Akun Google & blog Blogger yang sudah dibuat
Akses ke Tema → Edit HTML di dashboard Blogger
Browser (disarankan Chrome/Firefox)
Semangat belajar

Cara Mengganti Template di Blogger

Login ke blogger.com
Pilih blog Anda → klik Tema di menu kiri
Klik tombol Edit HTML (ikon pensil)
Hapus semua kode yang ada
Tempel kode baru dari tutorial ini
Klik Simpan tema
Buka blog Anda di tab baru untuk melihat hasilnya

💡 Tips: Buka blog Anda di tab terpisah, lalu setiap selesai menyimpan, refresh tab tersebut untuk melihat perubahannya langsung.

Tahap 1 — Kerangka Dasar (Hanya Tulang)

Kita mulai dari kerangka paling sederhana: hanya struktur HTML tanpa konten apapun. Ini untuk memastikan template terbaca oleh Blogger tanpa error.

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html b:css='false' b:layoutsversion='3'
  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>
  <meta charset='utf-8'/>
  <meta content='width=device-width,initial-scale=1' name='viewport'/>
  <title><data:view.title.escape/></title>

  <b:skin><![CDATA[
    body {
      font-family: sans-serif;
      margin: 0;
      padding: 0;
      background-color: #f4f4f4;
      color: #333;
    }
    .wrapper {
      max-width: 1200px;
      margin: 0 auto;
      padding: 20px;
    }
  ]]></b:skin>
</head>

<body>
  <div class='wrapper'>
    <p>Blog saya sedang dibangun...</p>
  </div>
</body>

</html>

Apa yang terjadi?

Simpan dan refresh blog Anda. Anda akan melihat halaman putih dengan tulisan "Blog saya sedang dibangun..."

Ini artinya:

Blogger menerima template Anda
Judul tab browser sudah menggunakan nama blog Anda (lihat <data:view.title.escape/>)
CSS dasar sudah aktif

Penjelasan Kode Penting

Kode	Fungsi
`b:css='false'`	Mematikan CSS bawaan Blogger agar kita pakai CSS sendiri
`b:layoutsversion='3'`	Menggunakan versi layout Blogger terbaru
`xmlns:b`, `xmlns:data`, `xmlns:expr`	Namespace yang dibutuhkan agar tag Blogger (`b:section`, `data:`, dll) bisa dibaca
`<data:view.title.escape/>`	Tag Blogger untuk menampilkan judul halaman secara otomatis
`<b:skin><![CDATA[ ... ]]></b:skin>`	Tempat menulis CSS utama template

Tahap 2 — Menambahkan Header

Sekarang kita tambahkan header — bagian paling atas blog yang biasanya berisi nama blog dan deskripsi.

Ganti seluruh kode dengan yang berikut:

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html b:css='false' b:layoutsversion='3'
  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>
  <meta charset='utf-8'/>
  <meta content='width=device-width,initial-scale=1' name='viewport'/>
  <title><data:view.title.escape/></title>

  <b:skin><![CDATA[
    * { box-sizing: border-box; }
    body {
      font-family: sans-serif;
      margin: 0;
      padding: 0;
      background-color: #f4f4f4;
      color: #333;
    }
    .wrapper {
      max-width: 1200px;
      margin: 0 auto;
      padding: 20px;
    }

    /* === HEADER === */
    header {
      background: #2c3e50;
      color: #fff;
      padding: 30px 20px;
      margin-bottom: 20px;
      border-radius: 6px;
    }
    header a {
      color: #fff;
      text-decoration: none;
    }
  ]]></b:skin>
</head>

<body>
  <div class='wrapper'>

    <header role='banner'>
      <b:section class='header-section' id='header-section' maxwidgets='1' showaddelement='yes'/>
    </header>

  </div>
</body>

</html>

Cara Menambahkan Widget Header

Setelah menyimpan dan refresh blog, Anda akan melihat area gelap di atas (header). Tapi masih kosong! Sekarang:

Kembali ke dashboard Blogger → Tata Letak
Anda akan melihat kotak bertuliskan "header-section"
Klik tombol Tambah Widget di kotak header
Pilih widget Header → Simpan
Refresh blog Anda

Hasilnya: Nama blog dan deskripsi muncul di header dengan latar belakang gelap.

Penjelasan `<b:section>`

<b:section id='header-section' maxwidgets='1' showaddelement='yes'/>

Atribut	Fungsi
`id`	Nama unik untuk section ini (wajib, tidak boleh sama)
`maxwidgets='1'`	Membatasi hanya 1 widget yang bisa ditambahkan di sini
`showaddelement='yes'`	Menampilkan tombol "Tambah Widget" di mode Tata Letak

Tahap 3 — Menambahkan Footer

Footer adalah bagian paling bawah blog. Mari kita tambahkan sekarang.

Ganti seluruh kode dengan:

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html b:css='false' b:layoutsversion='3'
  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>
  <meta charset='utf-8'/>
  <meta content='width=device-width,initial-scale=1' name='viewport'/>
  <title><data:view.title.escape/></title>

  <b:skin><![CDATA[
    * { box-sizing: border-box; }
    body {
      font-family: sans-serif;
      margin: 0;
      padding: 0;
      background-color: #f4f4f4;
      color: #333;
    }
    .wrapper {
      max-width: 1200px;
      margin: 0 auto;
      padding: 20px;
    }

    /* === HEADER === */
    header {
      background: #2c3e50;
      color: #fff;
      padding: 30px 20px;
      margin-bottom: 20px;
      border-radius: 6px;
    }
    header a {
      color: #fff;
      text-decoration: none;
    }

    /* === FOOTER === */
    footer {
      background: #2c3e50;
      color: #ccc;
      padding: 20px;
      margin-top: 20px;
      border-radius: 6px;
      text-align: center;
      font-size: 0.9em;
    }
    footer a {
      color: #aed6f1;
      text-decoration: none;
    }
  ]]></b:skin>
</head>

<body>
  <div class='wrapper'>

    <header role='banner'>
      <b:section class='header-section' id='header-section' maxwidgets='1' showaddelement='yes'/>
    </header>

    <!-- Area tengah (isi & sidebar) akan ditambahkan nanti -->
    <div style='background:#fff; padding:20px; border-radius:6px; min-height:200px; margin-bottom:20px;'>
      <p style='color:#999; text-align:center;'>[ Area Postingan &amp; Sidebar — segera hadir ]</p>
    </div>

    <footer role='contentinfo'>
      <b:section class='footer-section' id='footer-section' showaddelement='yes'/>
    </footer>

  </div>
</body>

</html>

Cara Menambahkan Widget Footer

Kembali ke Tata Letak
Di area footer-section, klik Tambah Widget
Pilih Teks → ketik "© 2025 Blog Saya. Hak cipta dilindungi." → Simpan
Refresh blog

Hasilnya: Sekarang blog Anda sudah punya header di atas, area kosong di tengah (placeholder), dan footer di bawah.

Tahap 4 — Menambahkan Sidebar

Sekarang kita bentuk layout dua kolom: konten utama di kiri dan sidebar di kanan.

Ganti seluruh kode dengan:

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html b:css='false' b:layoutsversion='3'
  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>
  <meta charset='utf-8'/>
  <meta content='width=device-width,initial-scale=1' name='viewport'/>
  <title><data:view.title.escape/></title>

  <b:skin><![CDATA[
    * { box-sizing: border-box; }
    body {
      font-family: sans-serif;
      margin: 0;
      padding: 0;
      background-color: #f4f4f4;
      color: #333;
    }
    .wrapper {
      max-width: 1200px;
      margin: 0 auto;
      padding: 20px;
    }

    /* === HEADER === */
    header {
      background: #2c3e50;
      color: #fff;
      padding: 30px 20px;
      margin-bottom: 20px;
      border-radius: 6px;
    }
    header a {
      color: #fff;
      text-decoration: none;
    }

    /* === LAYOUT TENGAH === */
    .main-container {
      display: flex;
      flex-direction: column;
      gap: 20px;
      margin-bottom: 20px;
    }
    @media (min-width: 768px) {
      .main-container {
        flex-direction: row;
      }
    }

    /* === AREA KONTEN UTAMA === */
    main {
      flex: 3;
      background: #fff;
      padding: 20px;
      border-radius: 6px;
      min-height: 300px;
    }

    /* === SIDEBAR === */
    aside {
      flex: 1;
      background: #fff;
      padding: 20px;
      border-radius: 6px;
    }
    aside h2, aside h3 {
      font-size: 1em;
      border-bottom: 2px solid #2c3e50;
      padding-bottom: 6px;
      margin-top: 0;
    }

    /* === FOOTER === */
    footer {
      background: #2c3e50;
      color: #ccc;
      padding: 20px;
      border-radius: 6px;
      text-align: center;
      font-size: 0.9em;
    }
    footer a {
      color: #aed6f1;
      text-decoration: none;
    }
  ]]></b:skin>
</head>

<body>
  <div class='wrapper'>

    <header role='banner'>
      <b:section class='header-section' id='header-section' maxwidgets='1' showaddelement='yes'/>
    </header>

    <div class='main-container'>

      <main id='main-content' role='main'>
        <!-- Postingan akan ditambahkan di tahap berikutnya -->
        <p style='color:#999; text-align:center;'>[ Area Postingan — segera hadir ]</p>
      </main>

      <aside id='sidebar' role='complementary'>
        <b:section class='sidebar-section' id='sidebar-section' showaddelement='yes'/>
      </aside>

    </div>

    <footer role='contentinfo'>
      <b:section class='footer-section' id='footer-section' showaddelement='yes'/>
    </footer>

  </div>
</body>

</html>

Cara Mengisi Sidebar

Buka Tata Letak di dashboard
Di kotak sidebar-section, klik Tambah Widget
Coba tambahkan:
- Arsip Blog — menampilkan arsip postingan per bulan
- Label — menampilkan semua label/kategori
- Tentang Saya — profil singkat Anda
Simpan dan refresh blog

Hasilnya: Blog Anda sekarang punya dua kolom — kiri untuk konten, kanan untuk sidebar. Di layar HP (< 768px), keduanya akan tampil berurutan ke bawah secara otomatis berkat CSS flexbox + @media.

Memahami Flexbox yang Digunakan

.main-container {
  display: flex;        /* aktifkan flexbox */
  flex-direction: column; /* default: kolom (untuk HP) */
  gap: 20px;
}
@media (min-width: 768px) {
  .main-container {
    flex-direction: row; /* di layar lebar: jadi baris (kolom-kolom berdampingan) */
  }
}

main  { flex: 3; } /* ambil 3 bagian dari ruang tersedia */
aside { flex: 1; } /* ambil 1 bagian dari ruang tersedia */

Artinya: main mendapat 75% lebar, sidebar mendapat 25% lebar.

Tahap 5 — Menambahkan Area Postingan (Blog1)

Ini tahap terakhir dan paling penting. Kita akan mengganti placeholder dengan <b:widget id='Blog1'> yang menampilkan postingan sungguhan.

⚠️ Perhatian: Widget Blog1 memang menghasilkan kode yang panjang. Tapi di tahap ini Anda sudah paham strukturnya, jadi tidak perlu khawatir.

Ganti seluruh kode dengan versi final berikut:

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html b:css='false' b:layoutsversion='3'
  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>
  <meta charset='utf-8'/>
  <meta content='width=device-width,initial-scale=1' name='viewport'/>
  <title><data:view.title.escape/></title>

  <b:skin><![CDATA[
    * { box-sizing: border-box; }
    body {
      font-family: sans-serif;
      margin: 0;
      padding: 0;
      background-color: #f4f4f4;
      color: #333;
    }
    .wrapper {
      max-width: 1200px;
      margin: 0 auto;
      padding: 20px;
    }

    /* === HEADER === */
    header {
      background: #2c3e50;
      color: #fff;
      padding: 30px 20px;
      margin-bottom: 20px;
      border-radius: 6px;
    }
    header a {
      color: #fff;
      text-decoration: none;
    }

    /* === LAYOUT TENGAH === */
    .main-container {
      display: flex;
      flex-direction: column;
      gap: 20px;
      margin-bottom: 20px;
    }
    @media (min-width: 768px) {
      .main-container {
        flex-direction: row;
      }
    }

    /* === AREA KONTEN UTAMA === */
    main {
      flex: 3;
      background: #fff;
      padding: 20px;
      border-radius: 6px;
    }

    /* === POSTINGAN === */
    .post {
      margin-bottom: 40px;
      padding-bottom: 40px;
      border-bottom: 1px solid #eee;
    }
    .post:last-child {
      border-bottom: none;
      margin-bottom: 0;
    }
    .post-title {
      font-size: 1.5em;
      margin: 0 0 8px 0;
    }
    .post-title a {
      color: #2c3e50;
      text-decoration: none;
    }
    .post-title a:hover {
      color: #e74c3c;
    }
    .post-meta {
      font-size: 0.85em;
      color: #888;
      margin-bottom: 14px;
    }
    .post-body {
      line-height: 1.7;
    }
    .post-labels {
      margin-top: 12px;
      font-size: 0.85em;
    }
    .post-labels a {
      background: #eaf2ff;
      color: #2980b9;
      padding: 2px 8px;
      border-radius: 12px;
      text-decoration: none;
      margin-right: 4px;
    }

    /* === NAVIGASI HALAMAN === */
    .blog-pager {
      display: flex;
      justify-content: space-between;
      margin-top: 20px;
      font-size: 0.9em;
    }
    .blog-pager a {
      background: #2c3e50;
      color: #fff;
      padding: 8px 16px;
      border-radius: 4px;
      text-decoration: none;
    }
    .blog-pager a:hover {
      background: #e74c3c;
    }

    /* === SIDEBAR === */
    aside {
      flex: 1;
      background: #fff;
      padding: 20px;
      border-radius: 6px;
    }
    aside h2, aside h3 {
      font-size: 1em;
      border-bottom: 2px solid #2c3e50;
      padding-bottom: 6px;
      margin-top: 0;
    }

    /* === FOOTER === */
    footer {
      background: #2c3e50;
      color: #ccc;
      padding: 20px;
      border-radius: 6px;
      text-align: center;
      font-size: 0.9em;
    }
    footer a {
      color: #aed6f1;
      text-decoration: none;
    }
  ]]></b:skin>
</head>

<body>
  <div class='wrapper'>

    <header role='banner'>
      <b:section class='header-section' id='header-section' maxwidgets='1' showaddelement='yes'/>
    </header>

    <div class='main-container'>

      <main id='main-content' role='main'>
        <b:section class='main-section' id='main-section' showaddelement='yes'>

          <b:widget id='Blog1' locked='false' title='Postingan Blog' type='Blog' version='2'>
            <b:widget-settings>
              <b:widget-setting name='showDateHeader'>false</b:widget-setting>
            </b:widget-settings>
            <b:includable id='main' var='top'>

              <!-- Loop semua postingan -->
              <b:loop values='data:posts' var='post'>
                <article class='post' expr:id='"post-" + data:post.id'>

                  <!-- Judul postingan -->
                  <h2 class='post-title'>
                    <a expr:href='data:post.url'><data:post.title/></a>
                  </h2>

                  <!-- Meta: tanggal & penulis -->
                  <div class='post-meta'>
                    <data:post.dateHeader/> &#8226; oleh <data:post.author/>
                  </div>

                  <!-- Isi postingan -->
                  <div class='post-body'>
                    <b:if cond='data:view.isPost'>
                      <!-- Di halaman postingan tunggal: tampilkan semua isi -->
                      <data:post.body/>
                    <b:else/>
                      <!-- Di halaman beranda: tampilkan ringkasan / snippet -->
                      <data:post.snippets/>
                      <a expr:href='data:post.url'>Baca selengkapnya &#8594;</a>
                    </b:if>
                  </div>

                  <!-- Label / kategori -->
                  <b:if cond='data:post.labels'>
                    <div class='post-labels'>
                      Label:
                      <b:loop values='data:post.labels' var='label'>
                        <a expr:href='data:label.url'><data:label.name/></a>
                      </b:loop>
                    </div>
                  </b:if>

                </article>
              </b:loop>

              <!-- Navigasi halaman (Lebih Baru / Lebih Lama) -->
              <div class='blog-pager'>
                <b:if cond='data:newerPageUrl'>
                  <a expr:href='data:newerPageUrl'>&#8592; Postingan lebih baru</a>
                </b:if>
                <b:if cond='data:olderPageUrl'>
                  <a expr:href='data:olderPageUrl'>Postingan lebih lama &#8594;</a>
                </b:if>
              </div>

            </b:includable>
          </b:widget>

        </b:section>
      </main>

      <aside id='sidebar' role='complementary'>
        <b:section class='sidebar-section' id='sidebar-section' showaddelement='yes'/>
      </aside>

    </div>

    <footer role='contentinfo'>
      <b:section class='footer-section' id='footer-section' showaddelement='yes'/>
    </footer>

  </div>
</body>

</html>

Cara Kerja Widget Blog1

Widget ini berisi tag-tag Blogger untuk menampilkan data dari database blog Anda:

Tag	Fungsi
`<b:loop values='data:posts' var='post'>`	Mengulang (loop) untuk setiap postingan yang ada
`<data:post.title/>`	Menampilkan judul postingan
`<data:post.url/>`	URL / link ke postingan
`<data:post.dateHeader/>`	Tanggal postingan
`<data:post.author/>`	Nama penulis
`<data:post.body/>`	Isi lengkap postingan
`<data:post.snippets/>`	Ringkasan/preview postingan (untuk beranda)
`<b:if cond='data:view.isPost'>`	Kondisi: apakah ini halaman postingan tunggal?
`<b:loop values='data:post.labels'>`	Loop untuk setiap label postingan
`data:newerPageUrl`	URL halaman postingan lebih baru
`data:olderPageUrl`	URL halaman postingan lebih lama

Ringkasan

Tahap	Yang Dilakukan	Hasilnya
1	Kerangka HTML dasar	Halaman terbaca, judul dari nama blog
2	Header + b:section	Area header gelap, bisa tambah widget nama blog
3	Footer + placeholder tengah	Blog punya kepala & kaki
4	Sidebar + flexbox layout	Dua kolom: konten & sidebar
5	Widget Blog1	Postingan asli tampil lengkap

Langkah Selanjutnya

Setelah template berjalan, Anda bisa mengembangkannya lebih lanjut:

Ubah warna — ganti nilai #2c3e50 dan #e74c3c dengan warna pilihan Anda
Ganti font — tambahkan Google Fonts di dalam <head>
Sempurnakan responsif — uji di berbagai ukuran layar
Tambah SEO — tambahkan meta description dan Open Graph tags
Dark mode — tambahkan CSS @media (prefers-color-scheme: dark)
Komentar — tambahkan widget komentar di bawah <data:post.body/>

Tutorial ini dibuat untuk pemula yang ingin memahami template Blogger dari dalam. Selamat bereksperimen!

Begini cara saya membuat template blogger mulai dari nol. Anda tertarik? Silahkan ikuti langkah-langkahnya. Copy-paste saja setiap tahap untuk melihat perubahannya.

Bagaimana pendapat Anda mengenai topik ini? Mari bagikan perspektif Anda di bawah!

Atau ke forum diskusi: Membuat Template Blogger Mulai dari Nol

Membuat Template Blogger Mulai dari Nol

Prasyarat

Cara Mengganti Template di Blogger

Tahap 1 — Kerangka Dasar (Hanya Tulang)

Apa yang terjadi?

Penjelasan Kode Penting

Tahap 2 — Menambahkan Header

Cara Menambahkan Widget Header

Penjelasan `<b:section>`

Tahap 3 — Menambahkan Footer

Cara Menambahkan Widget Footer

Tahap 4 — Menambahkan Sidebar

Cara Mengisi Sidebar

Memahami Flexbox yang Digunakan

Tahap 5 — Menambahkan Area Postingan (Blog1)

Cara Kerja Widget Blog1

Ringkasan

Langkah Selanjutnya

User Feedback

Recommended Comments

Table of Contents

Account

Navigation

Search

Configure browser push notifications

Chrome (Android)

Chrome (Desktop)

Safari (iOS 16.4+)

Safari (macOS)

Edge (Android)

Edge (Desktop)

Firefox (Android)

Firefox (Desktop)

Prasyarat

Cara Mengganti Template di Blogger

Tahap 1 — Kerangka Dasar (Hanya Tulang)

Apa yang terjadi?

Penjelasan Kode Penting

Tahap 2 — Menambahkan Header

Cara Menambahkan Widget Header

Penjelasan <b:section>

Tahap 3 — Menambahkan Footer

Cara Menambahkan Widget Footer

Tahap 4 — Menambahkan Sidebar

Cara Mengisi Sidebar

Memahami Flexbox yang Digunakan

Tahap 5 — Menambahkan Area Postingan (Blog1)

Cara Kerja Widget Blog1

Ringkasan

Langkah Selanjutnya

User Feedback

Configure browser push notifications

Chrome (Android)

Chrome (Desktop)

Safari (iOS 16.4+)

Safari (macOS)

Edge (Android)

Edge (Desktop)

Firefox (Android)

Firefox (Desktop)

Penjelasan `<b:section>`