NAME TAG -- CLASS

📘 Kerangka Dasar Fungsi Visual Blogger (Gloriabank Template) Jake susun berdasarkan komponen standar template modern Blogger, khusus untuk kamu. Fungsi Visual Nama Class Disarankan Penjelasan Header utama (judul blog/logo) .site-header Biasanya di paling atas Navigasi/menu utama .main-nav Bisa horizontal/vertikal Hero/banner besar .hero-banner Tampilan pembuka halaman Kotak artikel / fitur .card Umum dipakai untuk konten Judul besar bagian .section-title Digunakan di setiap bagian Konten utama .main-content Isinya postingan utama Sidebar (kanan/kiri) .sidebar Widget tambahan, arsip, dll Footer / catatan bawah .site-footer Copyright, kontak, dsb Tombol umum .btn Bisa .btn-primary, .btn-secondary Link list navigasi .nav-links Biasanya dalam

Alert atau info penting .alert Untuk notifikasi 📦 Contoh HTML-Nya: html Salin Edit

Gloriabank Edu

• Beranda
• Tentang

Selamat Datang

Solusi Blogger untuk Website Sekolah

Pengumuman

PPDB 2025 sudah dibuka.

© 2025 Gloriabank

🧭 Strategi: Sekarang kamu fokus dulu ke fungsi tiap elemen visual. Nanti setelah kamu mantap paham alurnya, penamaan class bisa kamu pertahankan, kembangkan, atau ganti. Jangan buru-buru. Bahkan developer profesional pun sering ganti nama class 2–3 kali sampai pas. 🔍 Analisa Nama Class dan ID: Nama Analisa Fungsi Catatan Jake class="section" Umum, artinya bagian. Tapi terlalu generik. Gampang bentrok sama CSS lain. Ganti dengan lebih spesifik, misalnya .hero-section, .footer-section. class="section-container" Biasanya pembungkus untuk .section agar ada margin/padding. Oke, tapi bisa disingkat jadi .container. class="container" Sudah jadi standar global (Bootstrap, Materialize) sebagai wadah layout. Bagus. Tetap dipakai, jangan diganti. class="header" Dipakai untuk bagian kepala, tapi terlalu umum juga. Kalau header utama, sebaiknya pakai .site-header. id="headerlist" Mungkin maksudnya daftar menu? Tapi kurang jelas. Bisa ganti id="mainNav" atau id="topMenu". type="bikin pusing" Ini lucu 😅 dan gak valid di elemen HTML umum. Boleh buat humor internal, tapi jangan disimpan di HTML final 😄 ✅ Rekomendasi Penamaan yang Lebih Rapi: Tujuan Nama yang Disarankan Wadah besar .container Bagian hero/banner .hero-section Header utama .site-header Daftar menu .nav-links, #mainNav Konten utama .main-content Card/kartu artikel .card Footer .site-footer 🧠 Tips dari Jake: Pakai nama berdasarkan fungsi dan konteks, bukan tampilannya. Contoh: Jangan .biru-kotak, tapi .info-box Jangan .tengah-kiri, tapi .main-nav atau .sidebar