Menggunakan `b:tag` dan `b:attr`

b:tag

Tag <b:tag> digunakan untuk membuat tag HTML dengan nama tag yang dapat ditentukan berdasarkan kondisi tertentu. Secara default dapat dinyatakan sebagai berikut:

<b:tag name='span'>
  foo
</b:tag>

Hasil:

<span>
  foo
</span>

Menggunakan ternary operator, kita bisa membuat nama tag berdasarkan kondisi tertentu:

<b:tag expr:name='data:view.isSingleItem ? "span" : "a"'>
  foo
</b:tag>

Hasil ketika berada di halaman indeks:

<a>
  foo
</a>

Hasil ketika berada di halaman item:

<span>
  foo
</span>

Versi Lama

<b:if cond=' … '>
  <a>
    foo
  </a>
<b:else/>
  <span>
    foo
  </span>
</b:if>

b:attr

Tag <b:attr> digunakan untuk membuat atribut HTML yang akan ditambahkan kepada tag induknya hanya ketika memenuhi kondisi tertentu. Secara default dapat dinyatakan sebagai berikut:

<div>
  <b:attr cond='data:view.isHomepage' name='id' value='home'/>
</div>

Hasil ketika berada di halaman muka:

<div id='home'></div>

Hasil ketika berada di selain halaman muka:

<div></div>

Untuk atribut class, Blogger sudah memiliki API yang sesuai yaitu b:class. Kedua sintaks di bawah ini adalah identik:

<b:attr cond=' … ' name='class' value='home'/>

<b:class cond=' … ' name='home'/>

Versi Lama

&lt;div<b:if cond=' … '> class='home'</b:if>&gt;
  foo
&lt;/div&gt;

Tip

Kombinasi <b:tag> dan <b:attr> dapat meringkas beberapa markup HTML yang dulu perlu dituliskan berulang kali karena kita hanya bisa mengandalkan tag <b:if>:

Sebelum

<h3 class='post-title'>
  <b:if cond='data:blog.pageType === "item"'>
    <span>
      <data:post.title/>
    </span>
  <b:else/>
    <b:if cond='data:post.link'>
      <a expr:href='data:post.link' target='_blank'>
        <data:post.title/>
      </a>
    <b:else/>
      <a expr:href='data:post.url'>
        <data:post.title/>
      </a>
    </b:if>
  </b:if>
</h3>

Sesudah

<h3 class='post-title'>
  <b:tag expr:name='data:view.isSingleItem ? "span" : "a"'>
    <b:attr cond='data:view.isMultipleItems' name='href' value='data:post.link ?: data:post.url'/>
    <b:attr cond='data:view.isMultipleItems and data:post.link' name='target' value='_blank'/>
    <data:post.title/>
  </b:tag>
</h3>