XHTML Blogger, Widget Label

Sebuah widget Blogger bertipe Label dapat dinyatakan dalam kerangka seperti ini:

<b:widget id='Label1' locked='false' title='Category List' type='Label'>
  <b:includable id='main'>
    <b:if cond='data:title'>
      <h2><data:title/></h2>
    </b:if>
    <div expr:class='&quot;widget-content &quot; + data:display + &quot;-label-widget-content&quot;'>
      <b:if cond='data:display == &quot;list&quot;'>
        <ul>
          <b:loop values='data:labels' var='label'>
            <li>
              <b:if cond='data:blog.url == data:label.url'>
                <span expr:dir='data:blog.languageDirection'><data:label.name/></span>
              <b:else/>
                <a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
              </b:if>
              <b:if cond='data:showFreqNumbers'>
                <span dir='ltr'>(<data:label.count/>)</span>
              </b:if>
            </li>
          </b:loop>
        </ul>
      <b:else/>
        <b:loop values='data:labels' var='label'>
          <span expr:class='&quot;label-size label-size-&quot; + data:label.cssSize'>
            <b:if cond='data:blog.url == data:label.url'>
              <span expr:dir='data:blog.languageDirection'><data:label.name/></span>
            <b:else/>
              <a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
            </b:if>
            <b:if cond='data:showFreqNumbers'>
              <span class='label-count' dir='ltr'>(<data:label.count/>)</span>
            </b:if>
          </span>
        </b:loop>
      </b:if>
      <b:include name='quickedit'/>
    </div>
  </b:includable>
</b:widget>

Saat Anda mencoba mengedit atau baru pertama kali menambahkan widget label di blog Anda, maka Anda akan menemukan dua opsi utama untuk menentukan tampilan widget yaitu model widget bertipe list dan cloud. Kode di atas sebenarnya juga sudah menunjukkan markup XML kedua model tersebut. Saya akan pisahkan bagian-bagiannya agar bisa lebih mudah dimengerti:

Judul Widget 

Bagian ini menunjukkan markup judul widget. Kondisional yang mengelilinginya berfungsi untuk membatasi agar elemen <h2> pada widget ini hanya muncul jika formulir judul tidak kosong:

<b:if cond='data:title'>
  <h2><data:title/></h2>
</b:if>

Kondisional Tipe Widget 

Bagian ini menunjukkan kondisional yang berfungsi untuk memisahkan tampilan model list dan cloud:

<b:if cond='data:display == &quot;list&quot;'>
  <!-- Markup widget bertipe `list` -->
<b:else/>
  <!-- Markup widget bertipe selain `list` -->
</b:if>

Markup Widget dengan Tipe List 

<ul>
  <b:loop values='data:labels' var='label'>
    <li>
      <b:if cond='data:blog.url == data:label.url'>
        <span expr:dir='data:blog.languageDirection'><data:label.name/></span>
      <b:else/>
        <a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
      </b:if>
      <b:if cond='data:showFreqNumbers'>
        <span dir='ltr'>(<data:label.count/>)</span>
      </b:if>
    </li>
  </b:loop>
</ul>

Markup Widget dengan Tipe Cloud 

<b:loop values='data:labels' var='label'>
  <span expr:class='&quot;label-size label-size-&quot; + data:label.cssSize'>
    <b:if cond='data:blog.url == data:label.url'>
      <span expr:dir='data:blog.languageDirection'><data:label.name/></span>
    <b:else/>
      <a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
    </b:if>
    <b:if cond='data:showFreqNumbers'>
      <span class='label-count' dir='ltr'>(<data:label.count/>)</span>
    </b:if>
  </span>
</b:loop>

Ikon Edit Cepat 

<b:include name='quickedit'/>

Contoh Markup Widget Label Hasil Modifikasi 

Berikut ini adalah contoh markup XML yang akan mengubah tampilan widget label menjadi berbentuk tabel:

<b:widget id='Label1' locked='false' title='Category List' type='Label'>
  <b:includable id='main'>
    <b:if cond='data:title'>
      <h2><data:title/></h2>
    </b:if>
    <div class='widget-content'>
      <table>
        <thead>
          <tr><th>Label</th><th>Total Posting</th></tr>
        </thead>
        <tbody>
          <b:loop values='data:labels' var='label'>
            <!--
              Kondisional `data:blog.url == data:label.url` tidak efektif dan tidak tepat sasaran!
              Gunakan cara Saya yang ini untuk menciptakan kondisional halaman label yang stabil.
            -->
            <b:if cond='data:blog.searchLabel == data:label.name'>
              <tr><td><strong><data:label.name/></strong></td><td><data:label.count/></td></tr>
            <b:else/>
              <tr><td><a expr:href='data:label.url'><data:label.name/></a></td><td><data:label.count/></td></tr>
            </b:if>
          </b:loop>
        </tbody>
      </table>
      <b:include name='quickedit'/>
    </div>
  </b:includable>
</b:widget>