Penjelasan

Apa Itu <b:attr>?

Untuk memahami <b:attr>, mari gunakan analogi sederhana:

Bayangkan Anda punya sebuah stempel. Biasanya, stempel itu punya satu fungsi tetap - misalnya stempel "LUNAS". Dalam dunia Blogger, menggunakan expr:class='...' itu seperti mengisi satu isian di stempel tersebut.

Sekarang, bayangkan Anda punya sebuah mesin pembuat stempel yang canggih. Dengan mesin ini, Anda bisa:

• Menentukan tulisan apa saja yang akan ada di stempel (id, class, style, title, dll.)
• Mengisi isinya secara dinamis (misalnya, nomor urut postingan yang berubah-ubah)
• Memutuskan untuk menambahkan stempel tertentu hanya jika diperlukan (misalnya, stempel "PENTING" hanya untuk artikel tertentu saja)

Nah, <b:attr> adalah "mesin pembuat stempel" tersebut.

Secara teknis, <b:attr> adalah tag khusus Blogger yang berfungsi untuk menambahkan, mengubah, atau bahkan menghapus satu atau beberapa atribut HTML secara dinamis pada sebuah elemen HTML.

Mengapa <b:attr> Lebih Unggul dari expr:?

Anda mungkin sudah terbiasa dengan cara penulisan seperti expr:href='...' atau expr:class='...'. Keduanya memang bisa membuat atribut dinamis, tapi <b:attr> punya kelebihan tersendiri.

Kapan Menggunakan <b:attr>?

Gunakan <b:attr> dalam situasi berikut:

• Menambahkan beberapa atribut dinamis ke satu tag HTML sekaligus
• Menambahkan atribut secara kondisional - atribut hanya muncul jika syarat tertentu terpenuhi
• Membuat nilai atribut yang kompleks - misalnya menggabungkan beberapa data menjadi satu string

Sintak (Kode Dasar)

Tag <b:attr> selalu ditempatkan di dalam tag HTML yang ingin Anda modifikasi. Tag ini bersifat self-closing (menutup sendiri, diakhiri dengan />) .

Struktur Umum

<!-- Tag HTML yang ingin dimodifikasi -->
<div class='kelas-statis'>

  <!-- Tag b:attr ditempatkan DI DALAM elemen target -->
  <b:attr name='nama_atribut' value='nilai_atribut'/>

</div>

Banyak Atribut Sekaligus

<div class='kelas-statis'>

  <b:attr name='atribut_pertama' value='nilai_pertama'/>
  <b:attr name='atribut_kedua' value='nilai_kedua'/>
  <b:attr name='atribut_ketiga' value='nilai_ketiga'/>

</div>

Dengan Nilai Dinamis (Dari Data Blogger)

<div>

  <!-- Menggunakan expr:value untuk mengambil data dari Blogger -->
  <b:attr name='id' expr:value='data:post.id'/>

</div>

Dengan Kondisi

<div>

  <!-- Atribut HANYA ditambahkan jika kondisi bernilai true -->
  <b:attr cond='kondisi_boolean' name='nama_atribut' value='nilai'/>

</div>

Penjelasan Setiap Bagian

Atribut yang Bisa Digunakan

Berikut adalah daftar lengkap atribut yang bisa Anda tulis di dalam tag <b:attr>:

Contoh Penggunaan

Contoh 1: Menambahkan ID Dinamis ke Elemen

Tujuan: Setiap postingan dibungkus elemen <article> yang memiliki atribut id unik berdasarkan ID postingan dari Blogger.

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

    <!-- Tambahkan atribut 'id' dengan nilai dari ID postingan -->
    <b:attr name='id' expr:value='data:post.id'/>

    <h2><data:post.title/></h2>
    <p><data:post.snippet/></p>
  </article>
</b:loop>

Hasil HTML di browser:

<article class='post-entry' id='1234567890'>
  <h2>Judul Postingan Pertama</h2>
  <p>Ringkasan postingan...</p>
</article>

<article class='post-entry' id='9876543210'>
  <h2>Judul Postingan Kedua</h2>
  <p>Ringkasan postingan...</p>
</article>

Penjelasan: Setiap <article> sekarang punya id unik yang berbeda-beda. Ini berguna untuk targeting CSS atau JavaScript.

Contoh 2: Menambahkan Class Khusus Hanya untuk Postingan Pertama

Tujuan: Postingan pertama dalam daftar mendapat class tambahan post-pertama agar bisa di-styling berbeda (misalnya lebih besar).

<b:loop values='data:posts' var='post' index='i'>
  <article class='post-entry'>

    <!-- Tambahkan atribut 'id' untuk semua postingan -->
    <b:attr name='id' expr:value='data:post.id'/>

    <!-- Tambahkan class 'post-entry post-pertama' HANYA jika indeks = 0 -->
    <b:attr cond='data:i == 0' name='class' value='post-entry post-pertama'/>

    <h2><data:post.title/></h2>
  </article>
</b:loop>

Hasil untuk postingan pertama (indeks 0):

<article class='post-entry post-pertama' id='1234567890'>
  <h2>Postingan Terbaru</h2>
</article>

Hasil untuk postingan lainnya (indeks 1, 2, 3, ...):

<article class='post-entry' id='9876543210'>
  <h2>Postingan Biasa</h2>
</article>

Penjelasan:

• data:i adalah variabel indeks dari b:loop, dimulai dari 0.
• cond='data:i == 0' artinya: "jalankan ini hanya jika ini item pertama".
• Saat kondisi terpenuhi, <b:attr> untuk class akan menimpa atribut class yang sudah ada di tag <article>. Maka dari itu, value perlu ditulis lengkap: 'post-entry post-pertama' (bukan hanya 'post-pertama').

Contoh 3: Menggabungkan Beberapa <b:attr> untuk Satu Elemen

Tujuan: Membuat sebuah <div> yang sangat dinamis - punya id, class, data-title, dan style yang semuanya diambil dari data postingan.

<b:loop values='data:posts' var='post' index='i'>
  <div>

    <!-- Atribut id: gabungan string "post-" dan ID postingan -->
    <b:attr name='id' expr:value='"post-" + data:post.id'/>

    <!-- Atribut class: berbeda untuk item pertama dan lainnya -->
    <b:attr cond='data:i == 0' name='class' value='card card-featured'/>
    <b:attr cond='data:i != 0' name='class' value='card'/>

    <!-- Atribut data-title: menyimpan judul postingan -->
    <b:attr name='data-title' expr:value='data:post.title'/>

    <!-- Atribut style: background hanya jika ada thumbnail -->
    <b:if cond='data:post.thumbnailUrl'>
      <b:attr name='style'
              expr:value='"background-image: url(" + data:post.thumbnailUrl + ");"'/>
    </b:if>

    <h2><data:post.title/></h2>
  </div>
</b:loop>

Hasil untuk item pertama (punya thumbnail):

<div id='post-111222333'
     class='card card-featured'
     data-title='Postingan Unggulan'
     style='background-image: url(https://example.com/gambar.jpg);'>
  <h2>Postingan Unggulan</h2>
</div>

Hasil untuk item lainnya (tanpa thumbnail):

<div id='post-444555666'
     class='card'
     data-title='Postingan Biasa'>
  <h2>Postingan Biasa</h2>
</div>