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='"widget-content " + data:display + "-label-widget-content"'>
<b:if cond='data:display == "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>
<b:else/>
<b:loop values='data:labels' var='label'>
<span expr:class='"label-size label-size-" + 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
XMLeXtensible Markup Language 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 == "list"'>
<b:else/>
</b:if>
Markup Widget Bertipe 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 Bertipe Cloud
<b:loop values='data:labels' var='label'>
<span expr:class='"label-size label-size-" + 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>
Data | Keterangan | Tampilan/Contoh Tampilan |
---|
data:display | Elemen ini akan menampilkan tipe tampilan widget. Berguna untuk membuat kelas spesifik, terutama pada elemen tubuh widget. | list , cloud |
data:blog.url | [?] | |
data:label.url | Elemen ini akan menampilkan URL setiap item label. | http://nama_blog.blogspot.com/search/label/-/Nama Label |
data:label.name | Elemen ini akan menampilkan nama label. | Nama Label |
data:blog.languageDirection | [?] | |
data:showFreqNumbers | Kondisional untuk menyatakan apakah jumlah posting pada widget akan ditampilkan atau tidak. | true , false |
data:label.count | Elemen ini akan menampilkan jumlah posting pada label terkait. | 20 |
data:label.cssSize | Elemen ini akan menampilkan angka tingkatan berdasarkan perbandingan banyaknya jumlah posting antara label yang satu dengan label yang lainnya. Biasa digunakan sebagai akhiran nama kelas label-size-* pada item label bertipe cloud untuk mengatur besar ukuran masing-masing item melalui CSS. | 3 |
Ikon Pengeditan Cepat
<b:include name='quickedit'/>
Contoh Markup Widget Label Hasil Modifikasi
Berikut ini adalah contoh markup
XMLeXtensible Markup Language 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 border='1'>
<thead>
<tr><th>Label</th><th>Total Posting</th></tr>
</thead>
<tbody>
<b:loop values='data:labels' var='label'>
<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>