Cara Membuat Template Blogspot dari Nol (Blank Template)

Adam Muiz

Diperbarui: 16 Apr, 2025 • 0 • menit membaca

Daftar Isi

Jika kamu ingin membangun template Blogspot dari awal tanpa terganggu oleh gaya bawaan Blogger, kamu bisa mulai dengan blank template. Ini cocok untuk developer atau desainer yang ingin kontrol penuh terhadap tampilan dan fungsionalitas blognya.

Kenapa Memulai dari Blank?

Menghilangkan elemen default Blogger yang sering susah diatur
Memberi fleksibilitas penuh dalam desain
Struktur lebih bersih dan ringan

Langkah-langkah Membuat Blank Template

1. Masuk ke Dashboard Blogger

Buka https://www.blogger.com dan pilih blog yang ingin kamu edit.

2. Buka Menu Tema > Edit HTML

Kamu akan melihat kode template Blogger kamu di sana. Hapus semuanya, lalu ganti dengan kode berikut:

3. Gunakan Kode Blank Template Berikut

Peringatan!!! APABILA KAMU MENGGUNAKAN GOOGLE ADSENSE, JANGAN EDIT TEMPLATE BLANK TANPA NONAKTIFKAN DARI DASHBOARD KARENA BISA DI BANNED PERMANEN DENGAN ALASAN - "More ads or paid promotional material than publisher-content"!!!

Catatan: Cache blogspot mungkin akan masih tersimpan dan iklan akan tayang, sehingga kita perlu menunggu sampai cache tersebut hilang. Jadi nonaktifkan iklan beberapa hari sebelumnya jika berencana ingin mereset tema.

<?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[
      body {
        margin: 0;
        padding: 0;
        font-family: Arial, sans-serif;
        background: #fff;
        color: #222;
      }
      .post-title {
        font-size: 20px;
        font-weight: bold;
        margin: 0.5em 0;
      }
      .post-body {
        line-height: 1.6;
        padding: 1em;
      }
      a {
        color: #1e88e5;
        text-decoration: none;
      }
    ]]></b:skin>
  </head>
  <body>
    <b:section class='header' id='header' maxwidgets='1' showaddelement='no'/>
    <b:section class='sidebar' id='sidebar' maxwidgets='' showaddelement='yes'/>
    <b:section class='main' id='main' maxwidgets='1' showaddelement='no'/>
    <b:section class='footer' id='footer' showaddelement='no'/>
  </body>
</html>

Penjelasan Struktur Kode

<head>: Tempat metadata dan style CSS
<b:skin>: Tempat khusus Blogger untuk menaruh CSS
<body>: Konten utama blog kamu
<b:section>: Bagian dinamis yang bisa kamu isi lewat menu "Tata Letak"

Perbedaan Head, Header, dan Footer

<head> bukanlah bagian visual yaitu isinya data seperti judul halaman, CSS, dan script. Sedangkan <header> (jika kamu tambahkan di dalam <body>) adalah bagian visual seperti logo dan menu. Begitu juga <footer>, yang isinya bisa berupa informasi hak cipta, navigasi tambahan, dsb.

Langkah Selanjutnya

Setelah kamu berhasil membuat blank template, kamu bisa mulai menambahkan:

Struktur HTML kamu sendiri
Custom CSS
Komponen seperti navigasi, layout postingan, dsb

Dengan pendekatan ini, kamu bebas mendesain tampilan blog kamu sesuai visi — seperti membuat website dari nol, tapi tetap dengan kemudahan Blogger.

Adam Blog