Terinspirasi dari sahabat Blogger yang
mengingatkan Blogger TuneUp tentang conditional tag tidak ada salahnya
sekalian dibuat artikelnya supaya semua teman-teman bisa memahami
berbagai conditional tag dalam template Blogger. Sebelum mempelajari
conditional tag mari kita sepakati dulu bahwa semua bagian dalam sebuah
halaman blog terdiri dari kumpulan gadget/widget termasuk halaman
artikel, sidebar, header, footer dan lain sebagainya. Conditional Tag
atau tag kondisional adalah tag yang digunakan untuk mengatur suatu
gadget/widget atau suatu elemen tertentu untuk ditampilkan atau tidak
ditampilkan dalam halaman spesifik. Misal; pada halaman utama kita ingin
menampilkan sidebar tetapi ketika pengunjung membuka halaman demi
halaman artikel maka sidebar tersebut tidak ditampilkan. Nah, untuk
mengatur sidebar tersebut tampil dan tidak tampil maka digunakanlah
Conditional Tag.
Syntax Conditional Tag
Secara umum conditional tag dituliskan seperti dibawah ini:<b:if cond='[KONDISI]'> ... </b:if>
Conditional tag selalu diawali
dengan tag <b:if> dan di tutup dengan tag </b:if>. Kemudian
tag <b:if diikuti dengan atribut cond. Atribut cond diartikan sebagai
condition atau kondisi yang digunakan sebagai subjek suatu kondisi, dan
[KONDISI] adalah atribut objek atau yang menjelaskan maksud dari
kondisi/condition.
Kumpulan Conditional Tag
Dibawah ini kumpulan kondisional tag yang umum digunakan untuk menyesuaikan halaman spesifik.
1. Halaman Index<b:if cond='data:blog.pageType == "index"'> ... </b:if>
Contidional tag ini digunakan
untuk mengecek/membandingkan kondisi halaman blog dengan halaman index.
Halaman index (index page) didalamnya termasuk halaman depan (homepage),
halaman label/kategori dan halaman arsip. Jika kita baca maka
conditional tag diatas kurang lebih berbunyi "jika kondisi 'halaman blog
sama dengan index' maka kode yang ada diantara conditional tag akan
ditampilkan".
2. Halaman Artikel (item)
<b:if cond='data:blog.pageType == "item"'> ... </b:if>
Contidional tag ini digunakan
untuk mengecek/membandingkan kondisi halaman blog dengan halaman item.
Halaman item (item page)adalah halaman artikel per artikel dan bukan
keseluruhan kumpulan artikel. Jika kita baca maka conditional tag diatas
kurang lebih berbunyi "jika kondisi 'halaman blog sama dengan halaman
artikel (item)' maka kode yang ada diantara conditional tag akan
ditampilkan". Biasanya halaman artikel (item) menggunakan URL yang
terkandung hurup bulan, tahun, dan judul artikel diantaranya, misal;
http://namablog.blogspot.com/2010/09/judul_artikel.html.
3. Halaman Statis (static)
<b:if cond='data:blog.pageType == "static_page"'> ... </b:if>
Contidional tag ini digunakan
untuk mengecek/membandingkan kondisi halaman blog dengan halaman statis.
Halaman statis (static page) adalah halaman lain artikel atau halaman
yang berdiri sendiri dan isinya tidak mengambil dari database artikel.
Jika kita baca maka conditional tag diatas kurang lebih berbunyi "jika
kondisi 'halaman blog sama dengan halaman statis' maka kode yang ada
diantara conditional tag akan ditampilkan". Biasanya halaman statis
menggunakan URL yang terkandung hurup "p" diantaranya, misal;
http://namablog.blogspot.com/p/halaman_statis.html.
4. Halaman Arsip (archive)
<b:if cond='data:blog.pageType == "archive"'> ... </b:if>
Contidional tag ini digunakan
untuk mengecek/membandingkan kondisi halaman blog dengan halaman arsip.
Halaman arsip (archive page) adalah halaman yang menampilkan sekumpulan
artikel yang diambil database blog. Jika kita baca maka conditional tag
diatas kurang lebih berbunyi "jika kondisi 'halaman blog sama dengan
halaman arsip' maka kode yang ada diantara conditional tag akan
ditampilkan". Biasanya halaman arsip menggunakan URL yang terkandung
bulan dan tahun diantaranya, misal;
http://namablog.blogspot.com/2010_01_01_archive.html.
5. Halaman Depan (Homepage)
<b:if cond='data:blog.url == data:blog.homepageUrl'> ... </b:if>atau :
<b:if cond='data:blog.homepageUrl == data:blog.url'> ... </b:if>
Contidional tag ini digunakan
untuk mengecek/membandingkan kondisi halaman blog dengan URL halaman
depan. Jika kita baca maka conditional tag diatas kurang lebih berbunyi
"jika kondisi 'halaman blog sama dengan URL halaman depan' maka kode
yang ada diantara conditional tag akan ditampilkan". Biasanya halaman
depan merupakan halaman utama dari blog kita dan URL yang digunakan
adalah URL utama blog kita, misal; http://namablog.blogspot.com/.
6. Halaman URL Tertentu
<b:if cond='data:blog.url == "[URL]"'> ... </b:if>
Contidional tag ini digunakan
untuk mengecek/membandingkan kondisi URL halaman blog. Jika kita baca
maka conditional tag diatas kurang lebih berbunyi "jika kondisi 'URL
halaman blog sama dengan URL halaman blog (yang kita maksud atau kita
masukan dalam [URL]' maka kode yang ada diantara conditional tag akan
ditampilkan". Conditional tag ini digunakan jika kita ingin mengatur
suatu gadget/widget atau elemen yang hanya akan ditampilkan atau tidak
ditampilkan pada halaman yang lebih spesifik (artikel tertentu). misal;
kita akan menampilkan banner iklan di-sidebar hanya pada halaman
blogroll (kumpulan link teman). Maka penggunaan conditional tag-nya
seperti dibawah ini:
<b:if cond='data:blog.url == "http://namablog.blogspot.com/2010/09/blogroll.html"'> [disini kode gadget atau elemen yang akan ditampilkan] </b:if>
7. Halaman 404 Not Found
<b:if cond='data:blog.pageType == "error_page"'> ... </b:if>
Conditional tag ini digunakan
untuk mengecek/membandingkan kondisi URL 404 Not Found atau tidak
tersedianya suatu halaman. Contidional tag ini digunakan untuk
mengecek/membandingkan kondisi URL halaman blog. Jika kita baca maka
conditional tag diatas kurang lebih berbunyi "jika kondisi 'URL halaman
blog tidak tersedia (error_page), maka kode yang ada diantara
conditional tag akan ditampilkan". Conditional tag ini biasanya
digunakan saat menjaga kemungkinan halaman yang dihapus namun masih
terindex oleh mesin pencari. Ketika pengunjung membuka halaman tersebut
maka pemberitahuan ketidaktersediaan halaman (404 Not Found) akan ditampilkan. Biasanya halaman ini disertai dengan link yang menuju ke halaman utama, halaman arsip atau about.
8. Meta Description
<b:if cond='data:blog.metaDescription != ""'> ... </b:if>
Conditional tag ini
sebenarnya tidak tampak pada broswer tapi sangat bermanfaat seiring
perubahan kebijakan mesin pencari yang menghapuskan meta keyword.
Conditional tag ini digunakan untuk mengecek/membandingkan kondisi data
blog, jika deskripsi meta blog tidak kosong (artinya memiliki meta
description) maka yang ada diantara tag akan ditampilkan.
Penggunaan Conditional Tag
Dibawah
ini adalah penjelasan sederhana untuk menggunakan conditional tag
didalam template blogger dan penempatan kode gadget atau elemen, lebih
lanjutnya silahkan implementasikan sendiri. sederhananya untuk
menempatkan kode gadget atau elemen dalam conditional tag seperti contoh
dibawah ini:
1). Penggunaan Conditional Tag Satu Gadget atau Elemen
<b:if cond='data:blog.pageType == "item"'> Gadget atau Elemen [akan ditampilkan jika bernilai benar (true)] </b:if>
Gadget atau Elemen yang terletak
diantara conditional tag akan ditampilkan jika hasil
pengecekan/perbandingan dalam atribut cond (yaitu 'data:blog.pageType ==
"item"') adalah benar (true). Atau lebih spesifiknya; jika halaman blog
yang sedang kita lihat/tampil pada alamat browser merupakan URL suatu
item (misal; http://namablog.blogspot.com/2010/09/artikelku.html) maka
Gadget atau Elemen yang ada diantara tag kondisional akan ditampilkan
jika tidak maka Gadget atau Elemen tidak akan ditampilkan.
2). Penggunaan Conditional Tag Dua Gadget atau Elemen
<b:if cond='data:blog.pageType == "item"'> Gadget atau Elemen [akan ditampilkan jika bernilai benar (true)] <b:else/> Gadget atau Elemen [akan ditampilkan jika bernilai salah (false)] </b:if>Ini lebih rumit lagi... Hmmmm tarik napas dulu sambil putar kepala eh... otak...
Misal; saya memiliki dua buah "laptop"
yang terdiri dari 2 merk, "merk A" dan "merk B", suatu hari saya diberi
pesanan editing gambar yang mengharuskan saya menggunakan software
"digital imaging" yang hanya terdapat pada laptop merk B, maka saya pun
menggunakan laptop merk B dalam mengerjakan pesanan editing gambar
tersebut. Jika saya tuliskan maka kodenya menjadi seperti dibawah ini:
<b:if cond='Laptop == "Digital Imaging"'> Merk A <b:else/> Merk B </b:if>
Laptop merk A tidak digunakan
karena ternyata hasil perbandingan cond tidak memungkinkan menggunakan
laptop merk A (tidak ada software digital imaging) atau hasil
pengecekan/perbandingan nilainya salah (false). Laptop merk B digunakan
karena hasil perbandingan/pengecekan cond bernilai salah (false).
(Sebenarnya contoh ini tidak begitu mengenai sasaran tapi bingung
memberikan contoh, ada ide?)
Peranan tag <b:else/>
digunakan sebagai alternatif jika ternyata hasil perbandingan/pengecekan
bernilai salah (false) dan kita ingin menampilkan suatu gadget atau
elemen jika hasilnya bernilai salah (false). Tetapi jika ternyata hasil
perbandingan bernilai benar (true) maka gadget atau elemen setelah tag
<b:else> tidak akan ditampikan.
3). Penggunaan Conditional Tag Lebih dari Satu Kondisi dan Lebih dari Satu Gadget atau Elemen
<b:if cond='data:blog.url == data:blog.homepageUrl'> <b:if cond='data:blog.pageType == "item"'> Gadget atau Elemen [akan ditampilkan jika bernilai benar (true)] <b:else/> Gadget atau Elemen [akan ditampilkan jika bernilai salah (false)] </b:if> </b:if>Waduh makin rumit saja... Ini sih bukan hanya putar otak tapi sampai tekan tombol power... hehehe... Mau mencoba menjelaskan? Silahkan tinggalkan pada kotak komentar....
Operator Conditional Tag
Operator
conditional tag merupakan alat khusus untuk membandingkan dua buah
nilai. Operator conditional tag terdiri dari 2 jenis yaitu:
1. Operator "sama dengan"==atau dalam bahasa script-nya dibaca "is equal to"
Contoh Kasus 1
Seseorang memberikan teka-teki untuk
menebak isi telur dalam sebuah kotak, jika saya menjawab benar maka saya
diberi uang Rp. 10.000,- jika saya menjawab salah saya tidak diberi
uang. Sedangkan didalam kotak itu terdapat 10 telur, kemudian saya
menjawab 10 telur. Maka conditional tag ditulis sebagai berikut:
<b:if cond='10 telur == 10 telur'> Saya diberi uang Rp. 10.000,- </b:if>Jawabannya : maka saya diberi uang Rp. 10.000,-
Contoh Kasus 2
Seseorang memberikan teka-teki untuk
menebak isi telur dalam sebuah kotak, jika saya menjawab benar maka saya
diberi uang Rp. 10.000,- jika saya menjawab salah maka saya harus
membayar Rp. 10.000,- . Sedangkan didalam kotak itu terdapat 10 telur,
kemudian saya menjawab 5 telur. Maka conditional tag ditulis sebagai
berikut:
<b:if cond='10 telur == 10 telur'> Saya diberi uang Rp. 10.000,- <b:else/> Saya membayar Rp. 10.000,- </b:if>Jawabannya : maka saya membayar Rp. 10.000,-
2. Operator "tidak sama dengan"
!=atau dalam bahasa script-nya dibaca "is not equal to"
Ini adalah operator kebalikan dari
"sama dengan" dan sepertinya tidak harus dijelaskan lagi. (Atau mau ikut
menjelaskan? Silahkan tinggalkan pada kotak komentar)