Sebuah widget Blogger bertipe Label sanggup dinyatakan dalam kerangka ibarat 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 gres pertama kali menambahkan widget label di blog Anda, maka Anda akan menemukan dua opsi utama untuk memilih tampilan widget yaitu model widget bertipe list dan cloud. Kode di atas bekerjsama juga sudah mengatakan markup XML kedua model tersebut. Saya akan pisahkan bagian-bagiannya supaya sanggup lebih gampang dimengerti:
Judul Widget
Bagian ini mengatakan markup judul widget. Kondisional yang mengelilinginya berfungsi untuk membatasi supaya elemen <h2> pada widget ini hanya muncul bila formulir judul tidak kosong:
<b:if cond='data:title'> <h2><data:title/></h2> </b:if>Kondisional Tipe Widget
Bagian ini mengatakan kondisional yang berfungsi untuk memisahkan tampilan model list dan cloud:
<b:if cond='data:display == "list"'> <!-- 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='"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 badan 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 menurut perbandingan banyaknya jumlah posting antara label yang satu dengan label yang lainnya. Biasa dipakai sebagai akhiran nama kelas label-size-* pada item label bertipe cloud untuk mengatur besar ukuran masing-masing item melalui CSS. | 3 |
Ikon Edit Cepat
<b:include name='quickedit'/>Contoh Markup Widget Label Hasil Modifikasi
Berikut ini ialah tumpuan 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 sempurna sasaran! Gunakan cara Saya yang ini untuk membuat 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>