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
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 & 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.
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/> • 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 →</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'>← Postingan lebih baru</a> </b:if> <b:if cond='data:olderPageUrl'> <a expr:href='data:olderPageUrl'>Postingan lebih lama →</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.
- 0 comments
- 31 views
