Membuat Template Blogger: Conditional, Loops, dan Lain-Lain
Pada bagian Kedua, penulis sudah menjelaskan lebih dalam tentang tag Widget. Pada bagian ini, penulis akan menjelaskan komponen penting dari Template atau Tema Blogger seperti tag data dengan pengulangan (Loop) dan tag Kondisional (Conditional).
Daftar Isi
Conditional - If/Else
Sama seperti Conditional if/else pada bahasa pemrogramman lainnya. Conditional ini dapat kita gunakan untuk menampilkan beberapa komponen atau data berdasarkan kondisi yang dibutuhkan. Contoh:
<b:if cond='KONDISI'>
[Konten akan ditampilkan disini jika nilai Condition adalah true/benar]
<b:else/>
[Konten akan ditampilkan disini jika nilai Condition adalah false/salah]
</b:if>
Bagian b:else
adalah Opsional. Jika tidak ada b:else
, maka hasilnya dapat diambil dari tag b:if
dimana nilai dari KONDISI-nya adalah true.
Untuk menggunakan Conditional, Kalian harus meletakkan elemen jika hasilnya true atau false (Seperti tipe Boolean). Contoh:
<b:if cond='data:post.numComments > 1'>
- True, jika postingan tersebut memilki lebih dari satu komentar.<b:if cond='data:blog.pageType == "item"'>
- True, jika postingan tersebut merupakan halaman konten.
Atau kalian juga dapat menggabungkan kedua nilai:
<b:if cond='data:post.numComments > 1'>
[Jika terdapat komentar]
<b:else/>
[Jika tidak ada komentar]
</b:if>
Loops
b:loop
merupakan pengulangan dari Section. Tag ini sangat berguna untuk menampilkan list/daftar.
Contoh:
<b:loop var='IDENTIFIER' values='SET_DATA'>
[Konten yang akan ditampilkan berulang-ulang]
</b:loop>
Atribut value merupakan data yang akan dilewati. Kemudian setiap item data pada List akan diulang beberapa kali. Data item pada Loop dapat dikenali dengan memasukkan atribut var
.
Contoh:
<b:loop var='post' values='data:posts'>
<h2>
<data:post.title/>
</h2>
</b:loop>
Kode diatas akan menampilkan semua judul postingan.
data:
data:
merupakan salah satu element terpenting dalam Template Blogger. data:
merupakan tempat dimana semua konten blog berasal seperti Judul, URL, Postingan, dll.
Contoh:
<b:widget id='PopularPosts1' locked='false' title='Postingan Populer' type='PopularPosts'>
<data:title/>
</b:widget>
expr:
Expr:
digunakan untuk menghitung Ekspresi dan menetapkan nilai atribut pada tag dan dapat digunakan untuk menentukan nilai kedalam atribut dari data:
Contoh:
<namaTag expr:attribute='EKSPRESI'></namaTag>
Contoh Penulisan:
<b:includable id="linkPaginasi">
<div style="display: inline">
<strong>
<a expr:href="data:olderPageUrl" expr:title="data:olderPageTitle">Postingan Lama</a>
</strong>
<strong>
<a expr:href="data:newerPageUrl" expr:title="data:newerPageTitle">Postingan Baru</a>
</strong>
</div>
</b:includable>
Contoh diatas dapat menunjukkan bagaimana expr: digunakan untuk memasukkan nilai/value kedalam atribut href dan title dari tag data.
misal ada 2 label yang tampil
A,B,
kemudian saya ingin menampilkan kode html seperti dibawah ini
div id='content-0'>A/div
div id='content-1'>B/div
code untuk menampilkannya bagaimana ya?
Setelah itu, ubah semua atribut id='content-*' jadi:
expr:id='data:i'.
Contoh:
<b:loop values="data:xxx" var="xxx" index="i">
<div expr:id="data:i">
Index Nomor <data:i />
</div>>
</b:loop>
Semoga membantu yaaa