LarhTech – Selamat! Jika Anda sudah mengikuti Part 1 dari seri ini, Anda kini telah memiliki fondasi tema XML Blogger yang valid dan bebas error. Namun, fondasi tersebut ibarat rumah yang baru jadi tiangnya saja, belum ada dinding, sekat ruangan, atau catnya.
Sebuah website yang ideal membutuhkan tata letak (layout) yang terstruktur. Pembaca mengharapkan adanya Header di bagian atas untuk logo, Sidebar di sisi kanan atau kiri untuk widget (seperti profil atau artikel populer), area Main Content di tengah untuk membaca artikel, dan Footer di bagian paling bawah.
Di Part 2 ini, kita akan merakit kerangka HTML untuk ruangan-ruangan tersebut dan menyusunnya menggunakan CSS Flexbox. Hebatnya lagi, setiap “ruangan” yang kita buat dengan tag <b:section> ini nantinya bisa Anda atur langsung melalui menu visual “Tata Letak” (Layout) di dasbor Blogger tanpa perlu menyentuh kode lagi!
Langkah 1: Merancang Struktur Ruangan (HTML)
Mari kita bedah struktur standar sebuah blog. Kita akan membungkus setiap <b:section> di dalam tag HTML standar seperti <header>, <main>, <aside>, dan <footer> agar tema kita ramah SEO (SEO Friendly).
Baca Juga: Cara Backup Website Otomatis ke Google Drive
Buka kembali editor HTML tema uji coba Anda. Hapus semua kode di antara tag <body> dan </body>, lalu ganti dengan kerangka berikut:
<body>
<div id='outer-wrapper'>
<header id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Judul Blog' type='Header'/>
</b:section>
</header>
<div id='content-wrapper'>
<main id='main-wrapper'>
<b:section class='main' id='main' showaddelement='yes'>
<b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'/>
</b:section>
</main>
<aside id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' showaddelement='yes'>
<b:widget id='Profile1' locked='false' title='Tentang Saya' type='Profile'/>
</b:section>
</aside>
</div> <footer id='footer-wrapper'>
<b:section class='footer' id='footer' showaddelement='yes'>
<b:widget id='Text1' locked='false' title='Hak Cipta' type='Text'/>
</b:section>
</footer>
</div> </body>Penjelasan Singkat:
- Setiap tag <b:section> wajib memiliki atribut id yang unik (tidak boleh ada yang sama).
- Atribut showaddelement=’yes’ berarti nanti Anda bisa menambahkan widget baru di area tersebut melalui menu “Tata Letak”.
Langkah 2: Menyusun Tata Letak dengan CSS (Flexbox)
Jika Anda langsung menekan tombol “Simpan” sekarang, Sidebar Anda akan berada di bawah artikel. Kita harus memberitahu browser untuk meletakkan Sidebar di sebelah kanan artikel.
Cari tag <b:skin><![CDATA[ di bagian atas kode Anda. Hapus CSS lama dari Part 1, dan ganti dengan CSS baru yang mengatur tata letak (Grid/Flexbox) ini:
<b:skin><![CDATA[
/* --- RESET & DASAR --- */
body {
background-color: #f3f4f6;
font-family: 'Segoe UI', Arial, sans-serif;
color: #333;
margin: 0;
padding: 0;
line-height: 1.6;
}
/* --- KOTAK UTAMA (Tengah Layar) --- */
#outer-wrapper {
max-width: 1100px;
margin: 0 auto; /* Membuat web berada di tengah */
background-color: #ffffff;
box-shadow: 0 0 10px rgba(0,0,0,0.05);
}
/* --- HEADER --- */
#header-wrapper {
background-color: #2563eb; /* Warna Biru */
color: #ffffff;
padding: 30px 20px;
text-align: center;
}
#header-wrapper h1 {
margin: 0;
font-size: 2em;
}
/* --- AREA KONTEN TENGAH (FLEXBOX AJAIB) --- */
#content-wrapper {
display: flex; /* Membagi elemen anak menjadi bersebelahan */
flex-wrap: wrap; /* Jika layar kecil, elemen akan turun ke bawah */
padding: 20px;
}
/* Main Content ambil porsi 70% */
#main-wrapper {
width: 70%;
padding-right: 20px;
box-sizing: border-box;
}
/* Sidebar ambil porsi 30% */
#sidebar-wrapper {
width: 30%;
box-sizing: border-box;
background-color: #f9fafb;
padding: 15px;
border-radius: 8px;
}
/* --- FOOTER --- */
#footer-wrapper {
background-color: #1f2937; /* Warna Gelap */
color: #ffffff;
text-align: center;
padding: 20px;
margin-top: 20px;
}
/* --- RESPONSIVE (Untuk Layar HP) --- */
@media (max-width: 768px) {
#main-wrapper, #sidebar-wrapper {
width: 100%; /* Di HP, Sidebar akan turun ke bawah artikel */
padding-right: 0;
}
#sidebar-wrapper {
margin-top: 20px;
}
}
]]></b:skin>
Langkah 3: Simpan dan Lihat Keajaibannya!
- Klik ikon Simpan (gambar disket) di pojok kanan atas editor HTML Anda.
- Klik menu Lihat Blog di tab baru.
Bagaimana hasilnya? Website Anda kini sudah terlihat seperti blog profesional! Ada warna biru di bagian Header, area artikel di sebelah kiri, area Sidebar (yang berisi profil Anda) di sebelah kanan, dan Footer gelap di bagian bawah. Jika Anda membuka blog tersebut dari HP, Sidebar akan otomatis berpindah ke bawah artikel berkat kode Responsive (@media) di atas. Untuk lihat hasilnya bisa klik ini -> DEMO Hasil.
Langkah 4: Cek Menu Tata Letak (Layout)
Ada satu keajaiban lagi yang perlu Anda ketahui. Kembali ke dasbor Blogger Anda, lalu klik menu Tata Letak (Layout) di bilah kiri.
Anda akan melihat kotak-kotak visual bernama header, main, sidebar, dan footer persis seperti kode <b:section> yang kita buat! Anda kini bisa mengeklik “Add a Gadget” di area Sidebar untuk memasukkan label, teks, atau HTML tambahan tanpa perlu menulis kode apa pun lagi.
Kesimpulan
Selamat! Anda baru saja naik level dari sekadar penulis kode XML menjadi seorang Web Designer. Memahami konsep pembagian ruang (layouting) menggunakan Flexbox adalah salah satu keterampilan paling berharga dalam mendesain website.
Lanjut Part 3: Custom Post Loop & Includable
Struktur tema kita sekarang sudah rapi, namun jika Anda perhatikan, tampilan artikel yang muncul dari bawaan Blogger masih sangat standar dan kurang estetik. Nah, di Part 3 nanti, kita akan membongkar tag <b:includable> untuk merombak total desain “Daftar Artikel” (Post Loop) agar terlihat modern seperti situs berita kekinian. Jangan lewatkan!
Last Updated on Maret 25, 2026 by larhtechBro
