Penjelasan Tag b:attr pada Blogger

Mengenal dan Memahami Tag pada Blogger.

Penjelasan Tag b:attr pada Blogger

Tag <b:attr> adalah salah satu tag instruksi pada Blogger untuk menambahkan atribut kedalam elemen parent (Elemen diatasnya). Lebih jelasnya, tag <b:attr> berfungsi untuk memasukkan atau menambahkan atribut HTML baru seperti class, id dan atribut lainnya kedalam elemen HTML yang berada diatasnya.

Contoh Penulisan Tag b:attr

Berikut adalah format penulisan tag <b:attr>:

<div>
    <b:attr cond='KONDISI' name='NAMA_ATRIBUT' value='NILAI_ATRIBUT' /> <!-- Akan menjadikan elemen <div> diatasnya menjadi <div NAMA_ATRIBUT='NILAI_ATRIBUT'> -->
</div>

Keterangan:

  • Atribut name dan value pada tag <b:attr> diatas juga dapat menggunakan Prefix Expressions (expr:). Contoh, expr:name dan expr:value;
  • Tag <b:attr> dapat menghapus atribut yang sama atau yang sudah ada;
  • Tag <b:attr> dapat digunakan beberapa kali pada elemen parent/induk yang sama;
  • Jika elemen parent/induk merupakan elemen tunggal atau Self Closing, maka tag tersebut harus diubah menjadi <b:tag>.

Contoh Kode Tag b:attr

Berikut adalah contoh kode tag <b:attr>:

<div>
    <b:attr name='id' value='namaId' /> <!-- Akan menjadikan elemen <div> diatasnya menjadi <div id='namaId'> -->
    <b:attr name='class' value='nama_class' /> <!-- Akan menjadikan elemen <div> diatasnya menjadi <div class='nama_class'> -->
</div>

Pada contoh kode diatas, atribut id yang memiliki nilai/value namaId akan ditambahkan secara otomatis pada element induk (elemen diatasnya) yang akan menjadi <div id='namaId'>. Selanjutnya, atribut class dengan nilai nama_class juga akan ditambahkan secara otomatis pada elemen induk yang akan menjadi <div class='nama_class'>. Jadi, ketika kedua tag <b:attr> tersebut digabungkan, maka elemen induk akan menjadi <div id='namaId' class='nama_class'>.

Hasil yang akan muncul ketika halaman dirender pada Browser akan terlihat seperti berikut:

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

</div>

Menggunakan Tag b:attr dengan Conditional

Berikut adalah contoh kode tag <b:attr> digabung dengan tag Conditional:

<div>
    <b:attr cond='data:view.isPost' name='style' value='background: blue' /> <!-- Akan menjadikan elemen <div> diatasnya menjadi <div style='background: blue'> HANYA pada halaman Postingan/Artikel -->
</div>

Dari contoh kode diatas, jika halaman yang dibuka adalah halaman Postingan atau halaman artikel, maka akan muncul atribut style dengan nilai background: blue sehingga elemen induk akan menjadi <div stype='background: blue'>.

Hasil yang akan muncul ketika halaman dirender pada Browser akan terlihat seperti berikut:

<div style='background: blue'>

</div>

Catatan: Atribut tersebut hanya akan otomatis ditambahkan jika halaman postingan atau artikel sedang dibuka, karena terdapat tag Conditional (cond='data:view.isPost').

Menggunakan Beberapa Tag b:attr Sekaligus

Berikut adalah contoh kode beberapa tag <b:attr> pada satu elemen HTML:

<a>
    <b:attr name='href' value='https://www.elcreativeacademy.com/'/> <!-- Akan menjadikan elemen <a> diatasnya menjadi <a href='https://www.elcreativeacademy.com/'> -->
    <b:attr name='target' value='_blank'/> <!-- Akan menjadikan elemen <a> diatasnya menjadi <a target='_blank'> -->
    <b:attr name='rel' value='noopener'/> <!-- Akan menjadikan elemen <a> diatasnya menjadi <a rel='noopener'> -->

    <span>EL Creative Academy</span>
</a>

Hasil yang akan muncul ketika halaman dirender pada Browser akan terlihat seperti berikut:

<a href='https://www.elcreativeacademy.com/' target='_blank' rel='noopener'>
    <span>EL Creative Academy</span>
</a>

Mungkin itu saja penjelasan mengenai tag <b:attr>. Jika ada yang kurang jelas, kalian dapat bertanya melalui kolom komentar. Jika artikel ini bermanfaat, silahkan dibagikan. Terimakasih telah berkunjung di EL Creative Academy.

Updated: Saturday, 17 April 2021

Diskusikan

0 Diskusi