Membuat template Blogger dari nol melibatkan penguasaan HTML, CSS, dan terutama XML Blogger untuk mengintegrasikan fungsionalitas backend (Tata Letak/Layout).
Berikut adalah langkah-langkah dan konsep utamanya:
1. Persiapan dan Struktur Dasar
- Platform Dasar: Template Blogger menggunakan format XML dengan elemen khusus Blogger (
<b:section>,<b:widget>,data:post.title, dll.) yang disisipi kode HTML, CSS, dan JavaScript. - Buat Blog Uji Coba: Disarankan untuk membuat blog baru khusus untuk eksperimen agar tidak merusak blog utama.
- Kosongkan Template: Masuk ke Dashboard Blogger > Tema > Edit HTML. Hapus semua kode yang ada dan ganti dengan kerangka XML dan HTML dasar yang minimal. Kerangka ini harus menyertakan deklarasi XML dan tag
<html>,<head>, dan<body>.
2. Mengintegrasikan Frontend (Tampilan)
- HTML dan CSS: Desain tampilan (frontend) menggunakan HTML untuk struktur dan CSS untuk styling (warna, tata letak, font, dll.).
- CSS: Letakkan kode CSS Anda di dalam tag
<b:skin>atau<style>di bagian<head>template. Gunakan CSS Reset untuk memastikan tampilan seragam di berbagai browser. - Tata Letak: Gunakan HTML (
<div>, class, id) dan CSS (terutama Flexbox atau Grid) untuk membuat kerangka tata letak seperti header, sidebar, main content (tempat postingan), dan footer.
- CSS: Letakkan kode CSS Anda di dalam tag
3. Menghubungkan ke Backend (Tata Letak yang Dapat Diedit)
Kunci agar tampilan mudah diedit di backend (menu Tata Letak Blogger) adalah dengan menggunakan dua elemen utama Blogger XML: Section dan Widget.
A. Section (<b:section>)
Section adalah wadah besar untuk widget (gadget) yang akan muncul di menu Tata Letak.
- Sintaks Dasar:
<b:section id='nama-section' class='nama-class-css' showaddelement='yes'> </b:section> - Atribut Penting:
id: Wajib unik. Digunakan Blogger untuk mengidentifikasi area di menu Tata Letak (misalnya,header,sidebar,footer).class: Digunakan untuk styling melalui CSS.showaddelement='yes': Memungkinkan pengguna menambahkan widget baru ke area ini dari menu Tata Letak (backend).
B. Widget (<b:widget>)
Widget adalah elemen fungsional spesifik Blogger (misalnya, Header, Daftar Tautan, Posting Blog).
Contoh Widget Postingan Blog Utama: Ini adalah inti dari blog dan tidak boleh dihilangkan.
<b:section class='main' id='main' showaddelement='no'> <b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'/> </b:section>type='Blog': Ini adalah widget Posting Blog.locked='true': Mencegah widget ini dihapus dari backend.
Contoh Widget Kustom (misalnya, Sidebar):
<b:section class='sidebar' id='sidebar' preferred='yes'> <b:widget id='Label1' locked='false' title='Label' type='Label'/> <b:widget id='Archive1' locked='false' title='Arsip Blog' type='BlogArchive'/> </b:section>- Widget di dalamnya (misalnya
Label1,Archive1) akan muncul sebagai elemen yang dapat disesuaikan di menu Tata Letak.
- Widget di dalamnya (misalnya
4. Menyesuaikan Data Postingan
Untuk menampilkan data dinamis (judul, isi, tanggal, komentar, dll.) di bagian main content, Anda akan berinteraksi dengan tag data Blogger di dalam widget utama (type='Blog'):
- Gunakan tag
data:post.titleuntuk judul postingan,data:post.bodyuntuk isi postingan, dan variabel data lain yang relevan.
Dengan menyusun tampilan Anda menggunakan kombinasi Section dan Widget yang benar, Anda memastikan bahwa sebagian besar konten dan tata letak dapat diatur tanpa menyentuh kode HTML/XML melalui menu Tata Letak (backend), sehingga mudah diedit oleh pengguna awam.
Anda dapat menonton Cara Buat Blogspot Template, buat website di blogspot dari dasar Dengan HTML, CSS, JS : Part. 1 untuk melihat langkah awal membuat kerangka template Blogger dari dasar menggunakan HTML, CSS, dan JavaScript. http://googleusercontent.com/youtube_content/0