b:attr - Blogger Tutorial

Penjelasan

<b:attr> digunakan untuk membuat atau memperbaharui sebuah attribut html yang berlaku untuk tag induk.

Attribut

• cond
• name
• value

Attribut cond

Digunakan jika suatu konsisi diperlukan.
Nilai : kondisi
Keterangan : relative, bisa disebutkan ataupun tidak

Attribut name

Digunakan untuk menuliskan nama attribut yang ingin disematkan.
Nilai : nama_attribut. Misal : class, id, data-*, href, dll.
Keterangan : wajib disebutkan, awalan expr: bisa diberlakukan.

Attribut value

Digunakan untuk menuliskan nilai dari attribut yang disematkan.
Nilai : nilai
Keterangan : Attribut wajib disebutkan, awalan expr: bisa diberlakukan.

syntax

<b:attr name='....' value='...'/>

<b:attr cond='...' name='....' value='...'/>

<b:attr cond='...' expr:name='....' expr:value='...'/>

Kumpulan contoh <b:attr>

Menambahkan class

<div>
  <b:attr name='class' value='container'/>
</div>

Hasil render HTML

<div class='container'>

</div>

Menambahkan id

<div>
  <b:attr name='id' value='container'/>
</div>

Hasil render HTML

<div id='container'>

</div>

Menambahkan banyak attribut

<div>
  <b:attr name='class' value='container'/>
  <b:attr name='data-this' value='article'/>
  <b:attr name='id' value='wrapper'/>
</div>

Hasil render HTML

<div class="container" data-this="article" id="wrapper">

</div>

Menambahkan attribut berdasarkan Kondisi

<article class='article'>
   <b:attr cond='data:view.isHomepage' name='id' value='article-home'/>
   <b:attr cond='data:view.isPost' name='id' value='article-post'/>
   <b:attr cond='data:view.isPage' name='id' value='article-page'/>
   <b:attr cond='data:view.isSearch' name='id' value='article-search'/>
</article>

Hasil yang diharapkan jika di halaman Home

<article class='article' id='article-home'>

</article>

Hasil render HTML jika di halaman post

<article class='article' id='article-post'>

</article>

Hasil render HTML jika di halaman Page statis

<article class='article' id='article-page'>

</article>

Hasil render HTML jika di halaman pencarian

<article class='article' id='article-search'>

</article>

Hasil yang diharapkan jika tidak di halaman Home, post, page dan pencarian

<article class='article'>

</article>

Menggunakan awalan expr:

<a>
   <b:attr name='href' expr:value='data:view.url'/>
   <b:attr name='target' value='_blank'/>
   <b:attr name='title' expr:value='data:view.title'/>
   Text Link
</a>

Contoh Hasil

<a href="http://triksonic.blogspot.com/" target="_blank" title="Triksonic">
   Text Link
</a>

Bagaimana jika digunakan untuk Tag HTML yang tidak mempunyai Tag penutup, seperti <img>, <input>, <link>, <meta> dll.

Untuk mengatasinya, gunakan <b:tag> dalam membuat Tag HTML, selengkapnya mengenai <b:tag>

Contoh :

<b:tag name='input'>
  <b:attr name='placeholder' value='Insert Text'/>
</b:tag>

Hasil

<input placeholder="Insert Text">

Selamat berkreasi.