Media Anda: Cara Membuat Template Blogger dari Nol untuk Pemula

Bagi sebagian besar pengguna Blogger, urusan tampilan blog biasanya diserahkan begitu saja pada template siap pakai yang diunduh dari internet. Padahal, memahami cara kerja template Blogger dari dasar akan membuat kamu jauh lebih leluasa mengatur tata letak, menambahkan fitur, atau sekadar memperbaiki bug tanpa harus bergantung pada orang lain. Artikel ini membahas dasar-dasar membangun template Blogger dari nol, mulai dari struktur tag khususnya hingga template sederhana yang siap disimpan.

Bekal yang Perlu Disiapkan

Sebelum masuk ke bagian teknis, ada beberapa kemampuan dasar yang sebaiknya sudah kamu kuasai:

HTML — wajib, karena seluruh struktur template dibangun di atasnya.
CSS — minimal level dasar; kalau belum percaya diri menulis CSS dari nol, memakai framework seperti Bootstrap juga bukan masalah.
JavaScript — sifatnya opsional, hanya dibutuhkan kalau kamu ingin menambahkan interaksi seperti dropdown menu, slider, atau efek animasi.

Tutorial ini mengasumsikan kamu sudah familiar dengan HTML dan CSS dasar. Jika belum, ada baiknya belajar keduanya terlebih dahulu sebelum lanjut, karena hampir semua penjelasan di bawah ini akan bercampur dengan istilah-istilah HTML/CSS standar.

Mengenal Tag Khusus Blogger

Template Blogger sebenarnya adalah berkas HTML biasa yang "disisipi" beberapa tag khusus bawaan Blogger. Tag-tag ini yang membuat template bisa terhubung dengan data blog — misalnya daftar postingan, judul, arsip, dan sebagainya. Tiga elemen yang paling sering ditemui adalah skin, section, dan widget.

1. Skin — Tempat Menulis CSS

Di template biasa, CSS ditulis di dalam tag <style>. Di Blogger, penulisannya diganti dengan tag <b:skin>:

<b:skin><![CDATA[
  /* kode CSS di sini */
]]></b:skin>

2. Section — Wadah untuk Widget

<b:section> berfungsi sebagai "kontainer" yang nantinya diisi oleh widget. Setiap section wajib memiliki id yang unik — tidak boleh ada dua section dengan id yang sama dalam satu template.

<b:section id='header'></b:section>
<b:section id='main'></b:section>

Section juga punya beberapa atribut tambahan yang berguna:

Atribut	Tipe	Kegunaan
`id`	string	Identitas unik section (wajib)
`name`	string	Nama yang muncul di halaman Tata Letak
`class`	string	Class CSS untuk section
`tag`	string	Menentukan elemen HTML yang dihasilkan (mis. `main`, `aside`)
`max-widgets`	angka	Batas jumlah widget yang boleh ditambahkan
`locked`	boolean	Mengunci section agar tidak bisa ditambah/dihapus widget dari editor
`cond`	string	Menjalankan tag kondisional Blogger

Contoh, menulis:

<b:section id='header-area' class='site-header' tag='header'></b:section>

akan menghasilkan elemen <header id="header-area" class="site-header"> saat halaman dirender.

3. Widget — Konten yang Ditampilkan

Widget adalah komponen fungsional seperti daftar postingan, kolom pencarian, arsip, atau formulir kontak — jenisnya sama persis dengan pilihan yang muncul saat kamu klik "Tambah Widget" di menu Tata Letak (Blog, Header, PageList, PopularPosts, BlogSearch, HTML, dan lain-lain).

Aturan penulisannya:

Widget harus berada di dalam sebuah section.
Atribut id dan type wajib diisi, dan id untuk tipe widget yang sama harus tetap unik.

<b:section id='header'>
  <b:widget id='Header1' type='Header'/>
</b:section>

Kalau butuh dua widget bertipe sama dalam template, cukup beri nomor berbeda:

<b:widget id='HTML1' type='HTML'/>
<b:widget id='HTML2' type='HTML'/>

Praktik: Menyusun Template dari Nol

Setelah paham konsep dasarnya, saatnya masuk ke Dashboard Blogger:

Tema → panah bawah di sebelah tombol Sesuaikan → Edit HTML

Kosongkan isi editor, lalu mulai dengan kerangka HTML5 standar yang sudah disisipi atribut khusus Blogger:

<!DOCTYPE html>
<html lang='id' b:css='false' b:defaultwidgetversion='2' b:layoutsVersion='3' b:responsive='true' expr:dir='data:blog.languageDirection'>
<head>
  <meta charset='utf-8'/>
  <title><data:view.title.escaped/></title>
</head>
<body>

</body>
</html>

Tag <data:view.title.escaped/> otomatis menampilkan judul yang sesuai konteks halaman — judul blog di beranda, judul artikel saat membuka postingan tertentu, dan seterusnya.

Template belum bisa disimpan sebelum ada minimal satu b:skin, satu b:section, dan satu b:widget. Tambahkan dulu bagian skin di <head>:

<b:skin><![CDATA[
  body { margin: 0; font-family: sans-serif; }
  .container { max-width: 960px; margin: 0 auto; padding: 0 16px; }
]]></b:skin>

Lanjutkan dengan menyusun kerangka layout — header, area konten utama, dan sidebar:

<header>
  <b:section id='header' class='container'></b:section>
</header>

<div class='container'>
  <main>
    <b:section id='content'></b:section>
  </main>
  <aside>
    <b:section id='sidebar'></b:section>
  </aside>
</div>

Isi masing-masing section dengan widget yang sesuai — widget Header untuk bagian atas, dan widget Blog untuk menampilkan daftar postingan di area konten utama:

<b:section id='header' class='container'>
  <b:widget id='Header1' type='Header'/>
</b:section>

<b:section id='content'>
  <b:widget id='Blog1' type='Blog'/>
</b:section>

Sidebar bisa dibiarkan kosong dulu atau diisi widget tambahan sesuai kebutuhan, misalnya BlogArchive, Label, atau PopularPosts.

Kalau digabungkan, hasil akhirnya kurang lebih seperti ini:

<!DOCTYPE html>
<html lang='id' b:css='false' b:defaultwidgetversion='2' b:layoutsVersion='3' b:responsive='true' expr:dir='data:blog.languageDirection'>
<head>
  <meta charset='utf-8'/>
  <title><data:view.title.escaped/></title>
  <b:skin><![CDATA[
    body { margin: 0; font-family: sans-serif; }
    .container { max-width: 960px; margin: 0 auto; padding: 0 16px; }
  ]]></b:skin>
</head>
<body>

  <header>
    <b:section id='header' class='container'>
      <b:widget id='Header1' type='Header'/>
    </b:section>
  </header>

  <div class='container'>
    <main>
      <b:section id='content'>
        <b:widget id='Blog1' type='Blog'/>
      </b:section>
    </main>
    <aside>
      <b:section id='sidebar'></b:section>
    </aside>
  </div>

</body>
</html>

Klik Simpan, lalu buka pratinjau blog untuk memastikan tampilannya sudah muncul. Jika ada widget yang ditutup dengan tag mandiri (/>), Blogger biasanya otomatis melengkapi struktur tag saat template disimpan.

Langkah Berikutnya

Kerangka di atas baru fondasi paling dasar. Dari sini kamu bisa mulai bereksperimen: menambahkan lebih banyak widget, menata CSS agar lebih rapi dan responsif, atau menyisipkan tag kondisional Blogger (b:if) untuk menampilkan konten berbeda di setiap jenis halaman. Cara paling efektif untuk memahami sistem template Blogger memang lewat trial and error langsung di editor HTML — jangan takut mencoba, karena perubahan tetap bisa dibatalkan sebelum disimpan permanen.