Penggunaan expr:class untuk coding css di Blogspot
Siap 👍 ini saya buatkan contoh nyata + siap pakai untuk semua kondisi yang kamu minta:
data:view.isHomepagedata:view.isPostdata:view.isPagedata:view.isLabelSearch
Sekalian saya buat clean & scalable seperti template premium 🔥
🎯 1. CONTOH PALING LENGKAP (RECOMMENDED)
Ini bisa langsung kamu pakai di wrapper utama:
<div expr:class='
data:view.isHomepage
? "grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6"
: data:view.isPost
? "max-w-3xl mx-auto prose lg:prose-lg"
: data:view.isPage
? "max-w-4xl mx-auto"
: data:view.isLabelSearch
? "grid grid-cols-2 md:grid-cols-3 gap-6"
: "container mx-auto"
'/>
🧠 Penjelasan:
| Kondisi | Hasil |
|---|---|
| Homepage | Grid 4 kolom |
| Post | Artikel fokus (prose) |
| Page | Halaman statis lebar |
| Label | Grid tapi lebih simpel |
| Default | fallback |
🎯 2. CONTOH KHUSUS GRID (HOMEPAGE & LABEL)
Kalau kamu mau homepage & label sama-sama grid:
<div expr:class='
data:view.isHomepage || data:view.isLabelSearch
? "grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6"
: "max-w-3xl mx-auto"
'/>
🎯 3. CONTOH DI <main> (REAL CASE BLOG)
<main expr:class='
data:view.isPost
? "lg:col-span-2"
: data:view.isHomepage
? ""
: data:view.isPage
? "max-w-4xl mx-auto"
: ""
'/>
🎯 4. CONTOH UNTUK CARD (POST STYLE BERBEDA)
<article expr:class='
data:view.isHomepage
? "bg-white rounded-xl shadow p-4 hover:shadow-lg"
: data:view.isPost
? "prose max-w-none"
: data:view.isLabelSearch
? "bg-white shadow p-3"
: "p-4"
'/>
🎯 5. CONTOH BODY CLASS (PRO LEVEL)
Ini sering dipakai template mahal 👇
<body expr:class='
data:view.isHomepage ? "home" :
data:view.isPost ? "post" :
data:view.isPage ? "page" :
data:view.isLabelSearch ? "label" :
"default"
'/>
👉 Nanti kamu bisa styling via CSS:
.home { background:#f3f4f6; }
.post { background:#ffffff; }
🎯 6. CONTOH KOMBINASI GRID + SIDEBAR
<div expr:class='
data:view.isPost
? "grid grid-cols-1 lg:grid-cols-3 gap-8"
: "grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6"
'/>
⚠️ TIPS PENTING
❗ Urutan kondisi itu penting
➡️ Blogger baca dari kiri ke kanan
❗ Jangan pakai terlalu banyak nested
❌ Ribet & rawan error
❗ Gunakan fallback di akhir
: "default-class"
🚀 BONUS POLA TEMPLATE PREMIUM
Biasanya pakai ini:
<div expr:class='
data:view.isHomepage
? "home-grid"
: data:view.isPost
? "post-layout"
: data:view.isLabelSearch
? "label-grid"
: "page-layout"
'/>
👉 Lalu styling di CSS → lebih rapi & scalable
🎯 KESIMPULAN
Kamu bisa pakai:
✔ Homepage → grid
✔ Post → artikel fokus
✔ Page → lebar
✔ Label → grid juga
Semua dalam 1 expr:class
🔥 MAU NAIK LEVEL?
Kalau kamu mau, saya bisa bantu:
bikin homepage ada featured post besar
grid + slider (kayak blog berita)
layout beda tiap kategori
👉 bilang saja:
"buat homepage ala blog berita" 🚀
