MARGIN DAN PADDING

 Apa bedanya margin dan padding?

Coba bayangin elemen itu kayak badan kita.
Padding itu baju dalam, biar badan gak langsung kena baju luar.
Margin itu jarak antar orang — biar gak dempetan.
Simpel kan?

💥 Kena langsung ke pemahaman.

🔍 Biar Nggak Bikin Gila: Ringkasan Singkat

Properti	Fungsi	Efek Ke Layout
padding	Ruang di dalam elemen (isi ↔ border)	Membesarkan elemen
margin	Ruang di luar elemen (border ↔ elemen lain)	Dorong elemen lain

🔮 Contoh UI-nya:

+------------------------------+
| Container (padding: 20px)   |
|  +-----------------------+  |
|  | Widget (margin: 20px) |  |
|  |                       |  |
|  +-----------------------+  |
+------------------------------+

→ Kamu atur semua itu real-time via slider


.card {
  padding: 2rem;           /* Napas buat konten */
  margin-bottom: 1.5rem;   /* Jarak antar kartu */
  max-width: 700px;        /* Supaya baca nyaman */
}


====================

padding: 14px 28px;

----------

padding-top: 14px;

padding-bottom: 14px;

padding-left: 28px;

padding-right: 28px;

================

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

UPLOAD GITHUB

https://raw.githubusercontent.com/YOUR_USERNAME/ozxlabz-template/main/ozxlabz-premium.xml Download Download Download ⬇ Download Template DRIVE GOOGLE Download

LAZY LOAD

✅ Cara Lazy Load Gambar di Blogger Cukup tambahkan atribut berikut ke semua tag : html Salin Edit Atribut loading="lazy" sekarang didukung oleh semua browser modern, termasuk Chrome, Edge, Firefox, dan bahkan Android WebView. Jika kamu tidak ingin menambahkan loading="lazy" satu per satu, kamu bisa tambahkan script berikut ke footer blog (sebelum ): html Salin Edit 🛠 Tips Tambahan: Untuk blog dengan banyak thumbnail, pastikan juga gambar pakai ukuran kecil atau WebP. Gunakan agar layout tidak loncat-loncat saat lazy load.

JUALAN TEMPLATE

✅ Alasan Template Bisa Dijual Mahal: Performa PageSpeed tinggi (90+ desktop dan mobile) Google suka. Pengunjung betah karena cepat. SEO Friendly beneran Struktur heading tepat (h1, h2, h3 rapi) Meta tag lengkap alt pada gambar otomatis Schema JSON-LD (kalau bisa, untuk article/post) Tampilan modern & clean Typography enak dibaca Grid layout responsif Dark/light mode bonus point Fitur unggulan: Sticky navbar, mega menu Mode AMP/non-AMP Related posts, author box, breadcrumb Panel admin (jika premium) Dokumentasi & Support Ada halaman panduan install Support email atau WhatsApp Update berkala (opsional, tapi nilai plus) Lisensi Jelas Boleh untuk 1 domain / unlimited? Boleh dijual ulang?

TOOLS CSS / HTML

https://www.toptal.com/developers/cssminifier

https://validator.w3.org/

https://webaim.org/resources/contrastchecker/

license >::

https://creativecommons.org/chooser/

adsense ::

https://adsense.google.com/adsense/login?continue=https://adsense.google.com/adsense/&authuser=0

https://webaim.org/resources/contrastchecker/

https://webaim.org/resources/contrastchecker/

https://www.xmlvalidation.com/

https://validator.w3.org/

https://csslint.net/

🔧 Alat untuk Minify CSS:

Tools	Keterangan
https://cssminifier.com	Online minify manual
clean-css CLI	Untuk Node.js
Prepros	GUI app otomatis kompres CSS
VS Code Extension	Otomatis minify saat save

https://www.allsync.de/en_alldup.htm

https://dupeguru.voltaicideas.net/

https://freefilesync.org/

----

SPEED TEST

https://pagespeed.web.dev/