Cara Membuat Template Blogger dari Nol hingga Jadi

Desember 02, 2025 Posting Komentar

Diagram elemen template Blogger yang menampilkan struktur dasar, kode XML, homepage, post page, dan sidebar.

Cara Membuat Template Blogger dari Dasar (Lengkap & Teknis)

Bikin template Blogger dari nol itu sebenarnya tidak serumit yang dibayangkan. Selama paham struktur dasar HTML, tahu fungsi tag XML di Blogger, dan ngerti pola layout yang logis, kamu bisa membangun tema sendiri tanpa bergantung pada template gratisan yang kodingannya sering berantakan.

Artikel ini membahas seluruh prosesnya secara runtut: mulai dari fondasi file, struktur widget, layout, hingga optimasi kecil yang sering luput oleh pemula. Fokusnya bukan sekadar teori, tapi langkah teknis yang benar-benar bisa kamu praktikkan.

Memahami Cara Kerja Template Blogger

Diagram layout sederhana yang menampilkan posisi header, main content, sidebar, dan footer pada template Blogger.

Template Blogger sebenarnya bukan “HTML murni”

Blogger menggunakan format XML sebagai kerangka utama. Di dalamnya kamu bisa menulis HTML, CSS, dan JavaScript, tetapi semua dibungkus dalam logika XML seperti:

<b:section>
<b:widget>
<data:post>

Sederhananya, XML mengatur bagaimana komponen ditampilkan, sedangkan HTML/CSS mengatur bentuknya.

Elemen otomatis yang dikelola Blogger

Ada beberapa bagian yang tidak perlu kamu buat dari nol karena platform sudah menyediakannya:

Mesin posting (judul, isi, gambar, tanggal, label)
Pagination bawaan
Komentar (jika tidak memakai custom script)
Feed JSON & Atom
Widget standar seperti Arsip, Label, HTML-JS Custom

Tugasmu adalah mengatur struktur & penampilan element-element ini.

Membuat Template Kosong sebagai Titik Awal

Tangkapan layar kode XML dasar Blogger yang berisi struktur <b:html>, <b:skin>, dan section utama.

Agar lebih rapi, mulai dengan template kosong. Cara termudah:

Masuk ke Blogger > Tema.
Klik Edit HTML.
Hapus seluruh isi template.
Gantikan dengan struktur dasar berikut:

<?xml version="1.0" encoding="UTF-8" ?>
<b:html xmlns:b='http://www.google.com/2005/gml/b'>
  <head>
    <meta charset='UTF-8'/>
    <title><data:blog.pageTitle/></title>
    <b:skin><![CDATA[
      /* CSS akan diletakkan di sini nanti */
    ]]></b:skin>
  </head>

  <body>
    <header>
      <b:section id='header' showaddelement='yes'/>
    </header>

    <main>
      <b:section id='main' showaddelement='yes'/>
    </main>

    <footer>
      <b:section id='footer' showaddelement='yes'/>
    </footer>
  </body>
</b:html>

Template ini memang sangat polos, tetapi inilah fondasi yang akan kamu kembangkan.

Struktur Layout yang Ideal untuk Template Modern

Blogger membagi komponen dengan sistem section → widget. Satu section bisa berisi beberapa widget.

Contoh layout umum:

Header (logo/navigasi)
Hero atau banner
Body (konten & sidebar)
Footer

Membuat navigasi custom

Navigasi tidak perlu memakai widget bawaan. Kamu bisa membuat menu manual agar lebih fleksibel:

<nav class='nav'>
  <ul>
    <li><a href='/'>Beranda</a></li>
    <li><a href='/search/label/Teknologi'>Teknologi</a></li>
    <li><a href='/search/label/Tutorial'>Tutorial</a></li>
  </ul>
</nav>

Kalau ingin navigasi dapat di-edit dari dashboard, jadikan dia widget HTML:

<b:section id='nav'>
  <b:widget type='HTML' id='navwidget' title='Navigasi'/>
</b:section>

Membangun Tampilan Halaman Depan (Homepage)

Preview layout halaman depan blog yang menampilkan daftar posting, judul, tanggal, dan excerpt.

Homepage biasanya berisi daftar posting. Blogger akan memanggil data posting otomatis menggunakan tag:

<b:loop values='data:posts' var='post'>

Contoh layout daftar artikel:

<article class='post-item'>
  <a class='thumbnail' expr:href='data:post.url'>
    <img expr:src='data:post.thumbnailUrl'/>
  </a>

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

  <p class='snippet'><data:post.snippet/></p>
</article>

Kunci penting agar layout tidak rusak

Selalu pakai prefix data: dan expr: saat memanggil variable.
Foto thumbnail tidak selalu tersedia, jadi beri fallback.
Snippet panjangnya bisa kacau kalau tidak dikontrol, jadi batasi via CSS.

Mendesain Halaman Postingan (Post Page)

Ini bagian paling penting karena pengunjung biasanya datang untuk membaca artikel.

Struktur dasarnya:

<b:if cond='data:blog.pageType == "item"'>
  <article class='post'>
    <h1 class='post-title'><data:post.title/></h1>
    <div class='post-meta'>
      <span><data:post.author.name/></span>
      <span><data:post.dateHeader/></span>
    </div>
    <div class='post-body'>
      <data:post.body/>
    </div>
  </article>
</b:if>

Hal-hal kecil yang bikin tampilan lebih profesional

Tambahkan area share button custom (bukan dari Blogger).
Gunakan CSS untuk mengatur jarak antar elemen.
Berikan style khusus untuk tabel, blockquote, dan gambar.

Contoh blockquote simpel:

.post-body blockquote {
  border-left: 4px solid #333;
  padding: 10px 15px;
  background: #f7f7f7;
}

Sidebar dan Widget Tambahan

Sidebar sebaiknya tidak diisi sembarangan. Paling umum:

Pencarian
Kategori/Label
Postingan Terbaru
Widget HTML berisi promo, banner, atau info

Contoh struktur:

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

Widget bawaan Blogger biasanya menghasilkan HTML berantakan, jadi kamu bisa override stylenya dengan CSS yang lebih ketat.

Menata CSS agar Template Tidak Berat

Tampilan editor kode berisi HTML, CSS, dan JavaScript yang digunakan untuk mengatur gaya dan fungsi dalam template Blogger.

Karakter template modern: cepat, ringan, minim blocking.

Tips penting:

1. Pisahkan komponen besar

Jangan masukkan CSS terlalu panjang dalam <b:skin>. Lebih baik:

Komponen global
Typography
Layout (grid, flex)
Komponen khusus seperti card, tombol, navbar

2. Hindari animasi berlebihan

Selain bikin berat, animasi bisa bikin loading terasa lambat.

3. Gunakan sistem warna konsisten

Banyak template pemula kacau karena tidak ada palet warna. Gunakan variable CSS:

:root {
  --primary: #2563eb;
  --text: #333;
}

Optimasi Kecepatan Template Blogger

Kecepatan template itu separuh dari kualitas SEO. Beberapa poin kritis:

Lazy load gambar

Blogger otomatis memberi loading="lazy" pada sebagian gambar, tetapi tidak selalu konsisten. Kamu bisa override:

<img expr:src='data:post.thumbnailUrl' loading='lazy'>

Minify CSS bawaan Blogger

Blogger menambahkan CSS internal yang cukup panjang. Kamu bisa merapikan dengan:

body { margin:0; padding:0; }

dan menimpa style bawaan.

Optimasi JavaScript

Gunakan async:

<script src='script.js' async></script>

Membuat Struktur Footer yang Rapi

Footer biasanya hal terakhir yang diperhatikan pemula. Padahal, struktur footer yang jelas bikin blog lebih mudah dinavigasi.

Isi standar:

Tentang blog singkat
Navigasi kecil
Disclaimer
Copyright

Contoh:

<footer class='footer'>
  <div class='footer-about'>
    Blog ini membahas teknologi, internet, dan tips harian.
  </div>

  <div class='footer-nav'>
    <a href='/about'>Tentang</a>
    <a href='/contact'>Kontak</a>
    <a href='/privacy-policy'>Privasi</a>
  </div>

  <p>© 2025 Nama Blog</p>
</footer>

Menambahkan Structured Data (LD-JSON) untuk SEO

Template profesional wajib punya schema terstruktur, terutama Artikel.

Contoh minimal:

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "BlogPosting",
  "headline": "<data:post.title/>",
  "datePublished": "<data:post.timestamp/>",
  "author": {
    "@type": "Person",
    "name": "<data:post.author.name/>"
  }
}
</script>

Schema ini meningkatkan peluang tampil di rich result.

Mempublish Template dan Mengujinya

Sebelum template dianggap selesai, lakukan hal berikut:

1. Uji tampilan

Pastikan:

Mobile responsive
Navigasi tidak pecah
Warna konsisten
Heading berurutan

2. Uji kecepatan

Gunakan:

PageSpeed Insights
GTmetrix

Kalau skor mobile buruk, culiknya biasanya CSS terlalu berat atau gambar tidak teroptimasi.

3. Uji SEO dasar

Pastikan:

Canonical benar
Title tidak duplikat
Elemen heading benar
Tidak ada script besar di atas fold

Contoh Alur Pembuatan Template dari Nol Hingga Jadi

Agar lebih mudah dipahami, berikut alur realistis yang biasa dilakukan orang saat membangun template Blogger:

Mulai dengan template kosong.
Buat header dan navigasi.
Tambahkan layout homepage (loop posting).
Desain halaman artikel.
Atur sidebar dan widget.
Buat footer minimalis.
Rapiin CSS dan typography.
Tambahkan JavaScript kecil (menu mobile, dark mode opsional).
Tambahkan schema markup.
Uji di perangkat nyata (bukan emulator doang).
Perbaiki error dan compress file.
Template siap dipakai.

Tanpa langkah terstruktur seperti ini, template biasanya berakhir berantakan dan sulit di-maintain.

FAQ (Pertanyaan Umum)

1. “Kalau saya belum jago coding, bisa nggak bikin template Blogger sendiri?”

Bisa banget. Yang penting paham struktur dasar template. Tidak perlu langsung bikin fitur berat. Mulai dari layout sederhana.

2. “Boleh nggak nyontek template premium lalu saya modifikasi?”

Secara teknis bisa, secara etika salah, dan secara legal kadang berisiko. Lebih aman belajar struktur mereka lalu buat versi kamu sendiri.

3. “Kenapa CSS saya berantakan setiap kali Blogger minify otomatis?”

Blogger kadang mengubah beberapa karakter sensitif. Biasanya karena kamu pakai tanda < atau & tanpa escape. Gunakan < dan &.

4. “Bagaimana cara bikin dark mode di template Blogger?”

Paling mudah pakai toggle yang mengganti class <body>, lalu siapkan dua set warna CSS dengan variable.

5. “Kenapa thumbnail tidak muncul di homepage?”

Blogger tidak selalu membuat thumbnail untuk gambar tertentu. Solusinya beri fallback image manual dengan expr:src menggunakan tanda ternary.

6. “Apa template Blogger bisa secepat WordPress?”

Bisa. Asal CSS-JS ringan, gambar teroptimasi, dan struktur bersih. Banyak template Blogger modern yang loadnya di bawah 1 detik.

Kesimpulan

Membuat template Blogger dari dasar itu bukan hal mustahil. Kuncinya adalah memahami struktur XML, merancang layout yang logis, dan menjaga CSS tetap sederhana. Mulailah dari template kosong, bangun komponen satu per satu, lalu optimalkan agar ringan dan SEO-friendly. Dengan pendekatan bertahap, kamu bisa membuat template yang bukan cuma enak dilihat, tapi juga cepat, rapi, dan mudah dirawat.

Go Blog