Cara Membuat Template Blogspot dari Nol (Blank Template)
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
<?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.
Posting Komentar