Cara Membuat Tema Blogger Sendiri dari Nol (Part 1: Struktur Dasar XML)

LarhTech – Blogger (Blogspot) adalah salah satu platform blogging tertua dan paling tangguh milik Google. Gratis, hosting tak terbatas, dan kebal dari serangan hacker adalah alasan mengapa platform ini masih sangat dicintai hingga hari ini. Namun, satu kelemahan utamanya adalah: template atau tema bawaannya terlihat sangat jadul.

Bagaimana jika Anda ingin membuat tema Blogger dengan desain buatan Anda sendiri? Apakah sulit?

Jawabannya: Tidak, jika Anda memahami aturan mainnya. Berbeda dengan WordPress yang menggunakan bahasa PHP, sistem tema Blogger dibangun murni menggunakan XML (eXtensible Markup Language) yang dipadukan dengan HTML, CSS, dan Tag Data khusus milik Google.

Table of Contents

Dalam seri tutorial ini, kita akan membedah anatomi tema Blogger dan merakitnya dari nol. Pada Part 1 ini, kita akan belajar membuat “Kerangka Tulang” atau struktur XML paling dasar yang wajib ada agar tema Anda bisa disimpan dan tidak error.

Aturan Mutlak Tema Blogger

Sebelum menulis kode, Anda wajib tahu bahwa mesin pembaca Blogger sangat ketat. Jika Anda kekurangan satu tag wajib saja, tombol “Simpan” akan menolak kode Anda dan memunculkan pesan error merah.

Ada tiga elemen ajaib yang wajib ada di setiap tema Blogger:

Tag <b:skin>: Ini adalah tempat di mana Anda meletakkan semua kode CSS.
Tag <b:section>: Ini adalah kontainer atau area penempatan elemen (seperti Header, Sidebar, atau Footer).
Tag <b:widget>: Ini adalah isi dari section (seperti widget Daftar Isi, Profil, atau Daftar Artikel).

Langkah 1: Persiapan Blog Uji Coba (Dummy)

Sangat disarankan untuk tidak bereksperimen di blog utama Anda.

Masuk ke dashboard Blogger.com.
Buat sebuah blog baru (misalnya: eksperimen-tema-larhtech.blogspot.com).
Buat 2 atau 3 artikel asal-asalan beserta gambar untuk bahan pengujian nanti.
Pergi ke menu Tema (Theme).
Klik tanda panah bawah di sebelah tombol Sesuaikan, lalu pilih Edit HTML.
Hapus semua kode yang ada di kotak editor tersebut hingga benar-benar kosong!

Langkah 2: Menulis Kerangka Minimum XML

Sekarang, mari kita masukkan “nyawa” pertama ke dalam tema Anda. Copy dan paste kode HTML/XML super minimalis di bawah ini ke dalam editor Blogger Anda:

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html b:version='2' class='v2' expr:dir='data:blog.languageDirection' 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 content='width=device-width, initial-scale=1' name='viewport'/>
<title><data:blog.pageTitle/></title>

<b:skin><![CDATA[
body {
background-color: #f3f4f6;
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
h1 {
text-align: center;
color: #2563eb;
padding: 20px;
}
]]></b:skin>
</head>

<body>

<h1>Selamat Datang di Tema Buatan Sendiri!</h1>

<b:section class='main' id='main' showaddelement='yes'>
<b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'/>
</b:section>

</body>
</html>

Langkah 3: Memahami Anatomi Kode di Atas

Mari kita bedah mengapa kode pendek di atas berhasil disimpan oleh Blogger:

Tag <html> yang Panjang: Perhatikan atribut xmlns:b dan xmlns:data. Ini adalah “mantra” yang memberi tahu browser bahwa dokumen ini mengandung tag khusus buatan Google (seperti <b:…> dan <data:…>). Tanpa ini, kode Anda hanyalah HTML biasa dan tidak akan dibaca oleh Blogger.
Tag <title><data:blog.pageTitle/></title>: Ini adalah Tag Data Blogger. <data:blog.pageTitle/> akan secara otomatis memanggil nama blog yang Anda atur di menu Setelan, sehingga Anda tidak perlu menulis judulnya secara manual (statis).
Blok <b:skin><![CDATA[ … ]]></b:skin>: Semua CSS (warna, ukuran, margin) harus dimasukkan di dalam tag CDATA ini. Mesin Blogger akan memprosesnya dengan cara khusus.
Blok <b:section> dan <b:widget>: Sebuah tema minimal harus memiliki satu buah widget tipe Blog agar sistem tahu di mana harus memunculkan daftar artikel Anda. Parameter showaddelement=’yes’ memungkinkan Anda untuk menambahkan widget lain dari menu “Tata Letak” nanti.

Langkah 4: Simpan dan Lihat Hasilnya

Klik ikon Simpan (gambar disket di pojok kanan atas). Jika Anda tidak melewatkan satu huruf pun, proses penyimpanan akan berhasil.
Klik tombol Lihat Blog di menu kiri bawah.
Voila! Anda akan melihat halaman abu-abu sederhana dengan tulisan biru “Selamat Datang di Tema Buatan Sendiri!” beserta daftar artikel uji coba Anda di bawahnya.

Kesimpulan

Selamat! Anda baru saja berhasil melewati rintangan pertama. Anda telah memahami struktur mutlak XML Blogger dan berhasil membuat template Anda sendiri dari nol tanpa error.

Lanjut Part 2: Membuat Grid Layout dan CSS

Meski tampilannya saat ini masih sangat berantakan dan hanya menampilkan teks datar, ini adalah fondasi yang sangat solid. Pada Part 2 nanti, kita akan mulai merias tampilan ini menggunakan CSS agar memiliki struktur Header, Content, dan Sidebar yang rapi seperti website profesional. Sampai jumpa di bagian selanjutnya!

Untuk melihat hasil pada artikel ini bisa kunjungi halaman ini -> Demo Hasil.

Cara Membuat Tema Blogger Sendiri dari Nol (Part 1: Struktur Dasar XML)

Aturan Mutlak Tema Blogger