Dokumentasi Tag <b:class> dalam Template Blogger

February 20, 2026

Penjelasan

Apa itu <b:class>?

Bayangkan kamu punya sebuah kartu identitas untuk setiap postingan di blog. Secara default, semua kartu itu memiliki tulisan "postingan" (yaitu class='postingan').

Sekarang, kamu ingin menambahkan stiker khusus pada kartu tersebut, tapi hanya jika memenuhi syarat:

Jika postingan itu "Populer" → tempel stiker "Populer"
Jika postingan itu "Baru" → tempel stiker "Baru"

Yang penting di sini adalah: kamu menambahkan stiker baru tanpa menghapus tulisan "Postingan" yang sudah ada.

Inilah fungsi utama dari <b:class>.

<b:class> adalah tag khusus di Blogger untuk menambahkan sebuah nama class CSS secara dinamis ke sebuah elemen HTML, berdasarkan sebuah kondisi, tanpa menghapus class yang sudah ada sebelumnya.

Ini adalah cara yang lebih bersih dan modern dibandingkan harus menulis di dalam atribut class.

Perbedaan `<b:class>` vs `<b:attr name='class'>`

Ini adalah perbedaan yang sangat penting untuk dipahami:

Aspek	`<b:attr name='class'>`	`<b:class>`
Perilaku	⚠️ Menimpa/mengganti seluruh isi atribut `class`	✅ Menambahkan class baru di samping yang sudah ada
Risiko	Class awal bisa hilang	Class awal tetap aman
Penggunaan	Ketika ingin mengontrol penuh isi `class`	Ketika ingin menambah class secara kondisional

Ilustrasi:

<!-- ❌ Menggunakan b:attr - class awal 'card' akan HILANG -->
<div class='card'>
  <b:attr cond='data:post.featuredImage' name='class' value='has-image'/>
</div>
<!-- Hasil jika true:  <div class='has-image'>  → 'card' HILANG! -->
<!-- Hasil jika false: <div class='card'>       → tetap, karena b:attr tidak dijalankan -->


<!-- ✅ Menggunakan b:class - class awal 'card' TETAP ADA -->
<div class='card'>
  <b:class cond='data:post.featuredImage' name='has-image'/>
</div>
<!-- Hasil jika true:  <div class='card has-image'>  → 'card' TETAP! -->
<!-- Hasil jika false: <div class='card'>            → tetap utuh -->

Sintaks

Tag <b:class> ditempatkan di dalam elemen HTML yang ingin diberi class tambahan dan merupakan tag yang menutup sendiri (self-closing).

Sintaks Dasar (dengan kondisi)

<div class='kelas-awal'>
  <b:class cond='sebuah_kondisi' name='nama-kelas-baru'/>
</div>

Hasil jika kondisi true:

<div class='kelas-awal nama-kelas-baru'> ... </div>

Hasil jika kondisi false:

<div class='kelas-awal'> ... </div>

Sintaks Tanpa Kondisi (selalu ditambahkan)

<div class='kelas-awal'>
  <b:class name='kelas-tambahan'/>
</div>

Hasil (class selalu ditambahkan):

<div class='kelas-awal kelas-tambahan'> ... </div>

Sintaks dengan Nama Class Dinamis

<div class='post'>
  <b:class expr:name='data:variabel_yang_berisi_nama_class'/>
</div>

Beberapa `<b:class>` Sekaligus

Kamu bisa menempatkan lebih dari satu <b:class> di dalam satu elemen:

<div class='post-card'>
  <b:class cond='kondisi_pertama' name='kelas-a'/>
  <b:class cond='kondisi_kedua' name='kelas-b'/>
  <b:class cond='kondisi_ketiga' name='kelas-c'/>
</div>

Hasil jika semua kondisi true:

<div class='post-card kelas-a kelas-b kelas-c'> ... </div>

Menambahkan beberapa class dalam 1 `<b:class>`

<div class='post-card'>
  <b:class name='kelas-a kelas-b kelas-c'/>
</div>

Hasil HTML di browser:

<div class='post-card kelas-a kelas-b kelas-c'> ... </div>

Atribut

Tag <b:class> hanya memiliki dua atribut, membuatnya sangat mudah diingat:

Atribut	Status	Deskripsi
`name`	Wajib	Nama class CSS yang ingin ditambahkan. Contoh: `'featured'`, `'active'`, `'no-image'`.
`cond`	Opsional	Kondisi yang harus bernilai `true` agar class tersebut ditambahkan. Jika tidak ditulis, class selalu ditambahkan.

Contoh Penggunaan

Contoh 1: Menu Navigasi Aktif

Salah satu penggunaan paling populer - memberi gaya khusus pada link menu yang sesuai dengan halaman yang sedang dibuka pengunjung.

<nav class='main-menu'>
  <ul>
    <b:loop values='data:links' var='link'>
      <li>
        <a expr:href='data:link.target'>
          <!-- Tambahkan class 'active' jika URL halaman saat ini cocok -->
          <b:class
            cond='data:view.url == data:link.target
                  or data:view.url == data:blog.homepageUrl path data:link.target
                  or data:view.url == data:blog.homepageUrl path data:link.target + "?m=1"'
            name='active'/>
          <data:link.name/>
        </a>
      </li>
    </b:loop>
  </ul>
</nav>

Penjelasan kondisi cond:

┌──────────────────────────────────────────────────────────────┐
│  data:view.url == data:link.target                           │
│  ↑                   ↑                                       │
│  URL halaman         URL link menu                           │
│  yang sedang         yang sedang                             │
│  dibuka              diproses loop                           │
│                                                              │
│  → Cocok? Class 'active' ditambahkan!                        │
├──────────────────────────────────────────────────────────────┤
│                        or                                    │
├──────────────────────────────────────────────────────────────┤
│  data:view.url == data:blog.homepageUrl path data:link.target│
│                   ↑                      ↑                   │
│                   URL dasar blog         Mengambil bagian    │
│                                          "path" saja dari    │
│                                          URL link menu       │
│                                                              │
│  → Ini khusus untuk menangani link Homepage/Beranda          │
└──────────────────────────────────────────────────────────────┘

Data	Contoh Nilai
`data:view.url`	`https://blogku.blogspot.com/p/about.html`
`data:link.target`	`https://blogku.blogspot.com/p/about.html`
`data:blog.homepageUrl`	`https://blogku.blogspot.com/`

CSS pendamping:

.main-menu a {
  color: #666;
  text-decoration: none;
  padding: 8px 16px;
}

.main-menu a.active {
  color: #1a73e8;
  font-weight: bold;
  border-bottom: 3px solid #1a73e8;
}

Hasil HTML:

<!-- Jika pengunjung sedang di halaman "Tentang Kami" -->
<nav class='main-menu'>
  <ul>
    <li><a href='/'>Beranda</a></li>
    <li><a href='/p/about.html' class='active'>Tentang Kami</a></li>
    <li><a href='/p/contact.html'>Kontak</a></li>
  </ul>
</nav>

Contoh 2: Postingan Tanpa Gambar

Memberi gaya berbeda pada postingan yang tidak memiliki thumbnail agar tidak terlihat kosong.

<b:loop values='data:posts' var='post'>
  <article class='post-card'>

    <!-- JIKA postingan TIDAK punya thumbnail, tambahkan class 'no-thumbnail' -->
    <b:class cond='!data:post.thumbnailUrl' name='no-thumbnail'/>

    <!-- Tampilkan gambar jika ada -->
    <b:if cond='data:post.thumbnailUrl'>
      <img expr:src='data:post.thumbnailUrl' expr:alt='data:post.title'/>
    </b:if>

    <h2><a expr:href='data:post.url'><data:post.title/></a></h2>
    <p><data:post.snippet/></p>

  </article>
</b:loop>

Penjelasan:

Simbol	Arti
`!`	NOT (negasi/kebalikan)
`!data:post.thumbnailUrl`	"Jika URL thumbnail tidak ada"

CSS pendamping:

.post-card {
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

/* Gaya khusus untuk postingan tanpa gambar */
.post-card.no-thumbnail {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 24px;
}

.post-card.no-thumbnail h2 a {
  color: white;
}

Hasil HTML:

<!-- Postingan DENGAN gambar -->
<article class='post-card'>
  <img src='foto.jpg' alt='Judul Post'/>
  <h2><a href='/post-1.html'>Postingan Pertama</a></h2>
  <p>Ringkasan postingan...</p>
</article>

<!-- Postingan TANPA gambar -->
<article class='post-card no-thumbnail'>
  <h2><a href='/post-2.html'>Postingan Kedua</a></h2>
  <p>Ringkasan postingan...</p>
</article>

Contoh 3: Class Dinamis pada `<body>`

Menambahkan class pada tag <body> berdasarkan tipe halaman yang sedang dibuka. Ini sangat berguna untuk mengontrol tampilan seluruh halaman lewat CSS.

<body class='no-js'>

  <!-- Class berdasarkan tipe halaman -->
  <b:class cond='data:view.isHomepage'       name='halaman-beranda'/>
  <b:class cond='data:view.isPost'           name='halaman-artikel'/>
  <b:class cond='data:view.isPage'           name='halaman-statis'/>
  <b:class cond='data:view.search.label'     name='halaman-label'/>
  <b:class cond='data:view.isArchive'        name='halaman-arsip'/>
  <b:class cond='data:view.isError'          name='halaman-error'/>

  <!-- Konten blog -->
  ...

</body>

Hasil HTML tergantung halaman yang dibuka:

┌─────────────────────┬────────────────────────────────────────────┐
│ Halaman yang Dibuka  │ Hasil Tag <body>                           │
├─────────────────────┼────────────────────────────────────────────┤
│ Homepage / Beranda   │ <body class='no-js halaman-beranda'>       │
│ Halaman Postingan    │ <body class='no-js halaman-artikel'>       │
│ Halaman Statis       │ <body class='no-js halaman-statis'>        │
│ Halaman Label        │ <body class='no-js halaman-label'>         │
│ Halaman Arsip        │ <body class='no-js halaman-arsip'>         │
│ Halaman Error (404)  │ <body class='no-js halaman-error'>         │
└─────────────────────┴────────────────────────────────────────────┘

CSS pendamping:

/* Sembunyikan sidebar hanya di homepage */
.halaman-beranda .sidebar {
  display: none;
}

/* Tampilan khusus halaman error */
.halaman-error {
  background: #1a1a2e;
  color: white;
  text-align: center;
}

/* Lebar konten penuh di halaman statis */
.halaman-statis .main-content {
  max-width: 100%;
}

💡 Tips & Catatan Penting

Posisi penulisan - <b:class> harus ditempatkan di dalam elemen HTML yang ingin diberi class, bukan di luar.

<!-- ✅ Benar -->
<div class='wrapper'>
  <b:class cond='...' name='active'/>
  <p>Konten</p>
</div>

<!-- ❌ Salah -->
<b:class cond='...' name='active'/>
<div class='wrapper'>
  <p>Konten</p>
</div>

Tidak menghapus class yang sudah ada - Ini keunggulan utamanya. Class awal di atribut class='...' akan selalu tetap ada.

Bisa digabung dengan <b:attr> - Kamu bisa menggunakan <b:class> dan <b:attr> (untuk atribut selain class) pada elemen yang sama.

<a class='btn' expr:href='data:post.url'>
  <b:class cond='data:post.isFirstPost' name='btn-primary'/>
  <b:attr cond='data:post.isFirstPost' name='title' value='Postingan Utama'/>
  Baca Selengkapnya
</a>

Gunakan untuk CSS yang kondisional - Daripada menyembunyikan/menampilkan elemen dengan <b:if>, terkadang lebih baik menambahkan class dan mengontrol tampilannya lewat CSS. Ini membuat HTML lebih bersih dan performa lebih baik.

Dokumentasi Tag <b:class> dalam Template Blogger

Penjelasan

Perbedaan <b:class> vs <b:attr name='class'>

Ilustrasi:

Sintaks

Sintaks Dasar (dengan kondisi)

Sintaks Tanpa Kondisi (selalu ditambahkan)

Sintaks dengan Nama Class Dinamis

Beberapa <b:class> Sekaligus

Menambahkan beberapa class dalam 1 <b:class>

Atribut

Contoh Penggunaan

Contoh 1: Menu Navigasi Aktif

Contoh 2: Postingan Tanpa Gambar

Contoh 3: Class Dinamis pada <body>

💡 Tips & Catatan Penting

Perbedaan `<b:class>` vs `<b:attr name='class'>`

Beberapa `<b:class>` Sekaligus

Menambahkan beberapa class dalam 1 `<b:class>`

Contoh 3: Class Dinamis pada `<body>`