Ads by Yasya El Hakim
Mengenal dan Memahami 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.

2Komentar

  1. Can you enable the translate option!

    BalasHapus
    Balasan
    1. Sorry, we can't enable translate feature at this moment. We will fix it as soon as possible. Thanks...

      Hapus

Posting Komentar

Sebelumnya Selanjutnya