P-E-R-B-E-D-A-A-N
.body
.post-body
.post-snippet
.post-body.entry-conten
CONTOH CODING
<style> /* Untuk H1 di artikel (baik homepage maupun halaman posting) */ .post-body h1, .post-body.entry-content h1, .post-snippet h1 { color: red; font-size: 32px; }
/* Untuk H2 di dalam .body */ .body h2 { color: blue; font-size: 24px; }</style>
<!-- Simulasi HOMEPAGE --><div class="body"> <h2>Judul di dalam .body (sidebar / layout)</h2>
<div class="post-body"> <h1>Judul Artikel (Homepage)</h1> <p>Snippet atau ringkasan isi artikel...</p> </div>
<div class="post-snippet"> <h1>Judul Artikel Lain (Homepage)</h1> <p>Ringkasan artikel kedua...</p> </div></div>
<hr />
<!-- Simulasi HALAMAN POSTING --><div class="body"> <h2>Judul di dalam .body (sidebar / layout)</h2>
<div class="post-body entry-content"> <h1>Judul Artikel (Halaman Individu Postingan)</h1> <p>Isi lengkap artikel ditampilkan di sini...</p> </div></div>
CONTOH HASIL
Judul di dalam .body (sidebar / layout)
Judul Artikel (Homepage)
Snippet atau ringkasan isi artikel...
Judul Artikel Lain (Homepage)
Ringkasan artikel kedua...
Judul di dalam .body (sidebar / layout)
Judul Artikel (Halaman Individu Postingan)
Isi lengkap artikel ditampilkan di sini...
🔑 PERBEDAAN HASIL:
-
<h2>dalam.body→ biru, 24px -
<h1>dalam.post-body(homepage) → merah, 32px -
<h1>dalam.post-snippet(homepage) → merah, 32px -
<h1>dalam.post-body.entry-content(halaman posting) → merah, 32px
P - E - N - J - E - L - A - S - A - N
1. .body
-
Bukan default Blogger, biasanya hasil custom template.
-
Selector ini berlaku untuk elemen HTML dengan class
body. -
Jangan bingung dengan
<body>→ ini elemen utama dokumen.
Jadi .body hanya dipakai jika di dalam template ada div seperti:
<div class="body"> ... </div>
2. .post-body
-
Ini standar di Blogger, membungkus isi utama sebuah postingan.
-
Semua konten artikel (teks, gambar, tabel, dsb.) ada di dalam
<div class="post-body">. -
CSS di sini akan mengatur tampilan isi postingan penuh (baik di homepage, archive, maupun halaman posting tunggal).
Contoh:
<div class="post-body">Isi artikel...</div>3. .post-snippet
-
Ini biasanya muncul di homepage atau halaman daftar postingan.
-
Berisi ringkasan (excerpt) dari artikel, biasanya beberapa kalimat pertama.
-
Jika kamu styling
.post-snippet, hanya bagian ringkasannya yang berubah, bukan seluruh isi artikel.
Contoh:
<div class="post-snippet">Cuplikan isi artikel...</div>4. .post-body.entry-content
-
Ini kombinasi dua class:
post-bodydanentry-contentada pada elemen yang sama. -
Biasanya dipakai untuk menargetkan lebih spesifik isi artikel penuh (misalnya di halaman posting individu).
-
Dipakai agar style tidak bentrok dengan
post-snippet.
Contoh:
<div class="post-body entry-content">Isi artikel penuh...</div>🔑 Kesimpulan singkat:
-
.body→ class custom, bukan standar Blogger. -
.post-body→ isi utama artikel (default Blogger). -
.post-snippet→ ringkasan artikel di homepage/arsip. -
.post-body.entry-content→ target isi artikel penuh (lebih spesifik, sering di halaman single post).
📌 The difference when on the
ACTUAL Blogger site:
Homepage / arsip →
yang aktif biasanya
.post-snippet
atau
.post-body
(jika snippet dimatikan)
Halaman artikel tunggal →
yang aktif adalah
.post-body.entry-content
Comments