Skip to main content

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-body dan entry-content ada 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

    Post a Comment

    Popular posts from this blog

    [ERROR BUG]
    ChatGPT+Gemini: TikTok → Blogger Embed Converter using Cloudflare/Online Server

    🔄 Refresh Page ERROR BUG: The connection is blocked because it was initiated by a public page to connect to devices or servers on your local network. Planning: Revise Program CODE Code USING Javascript/Online Server Code NOT USING Javascript Sample Working Code aka Already Repaired! Temporary Solution is by Asking AI Assistant to do REPAIR CODE of (Not yet Repaired) Current Conversion Program Code-Output TikTok Archive – Embedded Preview TikTok Embed ▶ View this video on TikTok ⚠️ DISCLAIMER: INPUT URL LIMITATION This program is currently restricted to processing Full Browser URLs only. It does not support TikTok’s mobile "short-link" format (e.g., vt.tiktok.com ). Required Action: Users must open the video in a web browser and copy the expanded URL from the address bar before pasting it into this program. URL Conversion Example ❌ UNSUPPORTED: https://vt.tiktok.com/ZSaXoFyov/ ✅ REQ...
    Post a Comment
    Read more

    Repost! Web-Based to Android Apps Convertion (MEDIAN.CO etc.)

    CONTOH HASIL Android APK "PROGRAM" SAMPLE: Youtube and Instagram EMBEDded to Blogger/Blogspot.com SOURCE CODE Click this box to download Contoh Sample SHORTCUT-APPs "precise" click to download : median.co R8: ronin1985.blogspot.com R2M: ronin-manu.blogspot.com Gw udah coba Median.co utk mengubah Website gw menjadi Aplikasi Android Keren bet!! Median.co Cekidot Software lain yg mirip! ChatGPT : If you're looking for tools similar to Median.co to convert websites into Android apps, here are some top alternatives, especially for no-code or low-code users: 🔧 Best Tools Like Median.co to Convert Website to Android Apps 1. WebViewGold Platform: Windows/macOS (Xcode/Android Studio) Key Feature: Converts any website into iOS/Android app via WebView. Pros: One-time purchase Custom splash screen, push notifications Can open external links in external browser Cons:  Requi...
    Post a Comment
    Read more

    REPOST: Studying WATER PUMP by ROMAN ENGINEERING

    *^ Ini yg Asli Gan! Mekanisme pada Concrete Pump: Kok ky Sistem Mekanik Romawi ya?! Tapi malah bisa HANYA pake PER aka bukan "MATA BOR look a like" Mekanisme Drill yg Cost Pembuatan bikin REPOT aka harus Tool SUPER Khusus Dari Material Besi yg digunakan terlihat langsung secara kasat mata Jauh Lebih Banyak drpd Per Biasa seperti yg ditunjukkan pd Video Alternatif dgn Penggunaan PER Video dr Instagram: Source: YouTube Rome's drainage machines #history #romanempire #engineering
    Post a Comment
    Read more