Mengenal dan Memahami b:attr pada Blogger

Pembaruan: Penjelasan Lengkap mengenai Tag b:attr terbaru dapat dilihat di artikel Penjelasan Tag b:attr pada Blogger.

Tag atau atribut <b:attr> adalah suatu instruksi untuk menambahkan suatu atribut kedalam elemen induk atau parent.

Contoh Penulisan <b:attr>

Penulisan pada Blogger:

<div>
    <b:attr cond='kondisi' name='nama_atribut' value='nilai'/>
</div>

.. atau dapat seperti berikut:

<div>
    <b:attr cond='kondisi' expr:name='nama_atribut' expr:value='nilai'/>
</div>

Perbedaan dari kedua contoh kode diatas adalah name='...' dengan expr:name='...' serta value='...' dengan expr:value='...'. Untuk lebih jelasnya, perhatikan keterangan berikut:

• Tag <b:attr> dapat menggunakan ekspresi prefix seperti expr: pada atribut name dan value.
• Tag <b:attr> dapat menimpa atau menghapus atribut dari elemen induk/parent yang sudah ada.
• Tag <b:attr> dapat digunakan pada elemen induk/parent berkali-kali tanpa ada batasan.
• Jika atribut dari elemen induk/parent berupa self-closing tag, maka harus diubah menjadi <b:tag>.

Contoh Penerapan <b:attr>

Menambahkan Atribut ID dan Class dengan <b:attr>

Berikut adalah contoh untuk memasukkan ID dan Class pada elemen induk/parent:

<div>
    <b:attr name='id' value='nama_id'/>
    <b:attr name='class' value='nama_class'/>
</div>

Dari contoh kode diatas, kita telah membuat sebuah atribut baru yaitu id dengan nilai nama_id dan atribut class dengan nilai nama_class. Kedua atribut tersebut akan ditambahkan kedalam elemen induk/parent yaitu <div>. Jadi, ketika di render, hasilnya akan seperti berikut:

<div id='nama_id class='nama_class'>

</div>

Menambahkan Atribut Style dengan <b:attr>

Berikut adalah contoh untuk memasukkan ID dan Class pada elemen induk/parent dengan menggunakan conditional:

<div>
    <b:attr cond='data:view.isPost' name='style' value='background: blue;'/>
</div>

Dari contoh kode diatas, ketika kita membuka halaman Post, maka secara otomatis akan menambahkan atribut style dengan nilai background: blue;. Jika di render, maka hasilnya akan seperti berikut:

<div style='background: blue;'>

</div>

Menambahkan Beberapa Atribut dengan <b:attr>

Misalnya, kita ingin menambahkan atribut class dengan nilai link pada element <a> dan menambahkan atribut class dengan nilai teks pada elemen <span> yang ada di dalam elemen <a>. Berikut adalah contohnya:

<a>
    <b:attr name='class' value='link'/>
    <span>Contoh Teks</span>
    <b:attr name='class' value='teks'/>
</a>

Jika di render, kode diatas akan seperti berikut:

<a class='link'>
    <span class='teks'>Contoh Teks</span>
</a>

Sepertinya masih ada yang kurang bukan? Ya, kurangnya adalah, kita perlu menambahkan atribut href pada elemen <a> dan memasukkan URL sebagai nilai dari atribut tersebut. Berikut contohnya:

<a>
    <b:attr name='class' value='link'/>
    <b:attr name='href' value='https://www.elcreativeacademy.com'/>
    <span>Contoh Teks</span>
    <b:attr name='class' value='teks'/>
</a>

Jika di render, kode diatas akan seperti berikut:

<a class='link' href='https://www.elcreativeacademy.com'>
    <span class='teks'>Contoh Teks</span>
</a>

Sampai disini sudah paham dan bisa bereksperimen? Jika sudah, mari kita lanjutkan dengan menggunakan suatu expresi:

<a>
    <b:attr name='href' expr:value='data:label.url'/>
    <b:attr name='target' value='_blank'/>
    <span>Contoh Teks</span>
</a>

Pada contoh kode diatas, kita telah menggunakan expr: pada atribut value yang berupa URL dari salah satu nama label. Sudah bisa membayangkan hasil rendernya? Oke, berikut adalah hasil render dari kode diatas:

<a href='URL_label' target='_blank'>
    <span>Contoh Teks</span>
</a>

Nilai URL_label akan ditentukan oleh Blogger sendiri, bukan dari kita. Mengapa? Jawabannya sangatlah jelas, karena kita telah menggunakan expr:.

Mungkin cukup sampai disini penjelasan mengenai <b:attr> dari Blogger. Jika ada yang tidak atau kurang jelas, kalian dapat menuliskannya pada kolom komentar. Terimakasih.