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

Contoh Penulisan Tag <b:attr>

Berikut adalah format penulisan tag <b:attr>:

<div>
    <b:attr cond="KONDISI" name="NAMA_ATRIBUT" value="NILAI_ATRIBUT" />
</div>

Keterangan:
  • Atribut name dan value pada tag <b:attr> juga dapat menggunakan Prefix Expressions (expr:).
  • Tag <b:attr> dapat menghapus atribut yang sama atau yang sudah ada.
  • Tag <b:attr> dapat digunakan beberapa kali pada elemen parent yang sama.
  • Jika elemen parent merupakan elemen single atau self closing, maka tag tersebut harus diganti menjadi <b:tag>.

Contoh Kode Tag <b:attr>

Berikut adalah contoh kode tag <b:attr>:

<div>
    <b:attr name="id" value="namaId" />
    <b:attr name="class" value="nama_class" />
</div>


Atribut id dengan nilai namaId akan ditambahkan secara otomatis pada element parent yang akan menjadi <div id="namaId">. Selanjutnya, atribut class dengan nilai nama_class juga akan ditambahkan secara otomatis pada elemen parent yang akan menjadi <div class="nama_class">. Jadi, ketika kedua tag <b:attr> tersebut digabungkan, maka elemen parent 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 Suatu Kondisi (Conditional)

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

<div>
    <b:attr cond="data:view.isPost" name="style" value="background: blue" />
</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 parent 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 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/" />
    <b:attr name="target" value="_blank" />
    <b:attr name="rel" value="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 dari saya, jika ada yang kurang jelas, kalian dapat bertanya melalui kolom komentar dibawah ini. Jika artikel ini bermanfaat, silahkan dibagikan. Terimakasih telah berkunjung di EL Creative Academy.

Tulis Komentar

0 Komentar