Condisi Tag | Tampilan Template Berbeda Tiap Halaman

Minggu lalu seorang sahabat mengingatkan saya tentang conditional tag, so tidak ada salahnya sekalian  saya tulis disini supaya semua teman-teman bisa memahami lebih tentang HTML / 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.

Apa Itu Conditional Tag

Conditional Tag merupakan suatu tag yang terdapat pada template blogger. Dinamakan Conditional Tag karena memiliki fungsi untuk mengkondisikan suatu elemen / widget tampil di halaman tertentu, sehingga dengan adanya Blogger Conditional Tag akan membuat sebuah template blogspot bisa menjadi lebih flexibel.

Bebera Fungsi Tag Kondisional (Kondisi) :

-Menyembunyikan Sidebar pada halaman posting

-Menyembunyikan sidebar Pada home

-Meng-costum Template supaya beda setiap halaman

-Menyembunyikan elemen/ Gadget.

-Memuat Tapilan template berbeda setiap halaman blog

-Costum Halaman statis pada blog

Syntax Conditional Tag

Umumnya Syntax Kondisi Adalah Sebagai Berikut :

<b:if cond='[KONDISI]'> ... </b:if>

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.

Contoh2 Kondisional Tag | Costum Halaman Blog

 Conditional Tag Halaman Index

<b:if cond='data:blog.pageType == &quot;index&quot;'> ... </b:if>

Contidional tag ini digunakan untuk mengecek/membandingkan kondisi halaman blog dengan halaman index. Halaman index 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".

Conditional Tag Halaman Artikel (item)

<b:if cond='data:blog.pageType == &quot;item&quot;'> ... </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.

Conditional Tag Halaman Statis (static)

<b:if cond='data:blog.pageType == &quot;static_page&quot;'> ... </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://bloggilabuanget.blogspot.com/p/halaman_statis.html.

Conditional Tag Halaman Arsip (archive)

<b:if cond='data:blog.pageType == &quot;archive&quot;'> ... </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.

Conditional Tag 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/.

Conditional Tag 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>

Conditional Tag Halaman 404 Not Found

<b:if cond='data:blog.pageType == &quot;error_page&quot;'> ... </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.

Conditional Tag Meta Description

<b:if cond='data:blog.metaDescription != &quot;&quot;'> ... </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.

Menggunakan Tag | Template  Berbeda Tiap Halaman

Lanjut ? belum Ngantuk kan? Tahan dulu deh. kita udah nyampai klimaksnya nih :D. Biar asyik coba ambil segelas kopi biar hangat...

...Mungkin anda heran, mengapa tampilan blog ini berbeda setiap halamannya. Coba perhatikan halaman Tukar link, Home, dan halaman Kategori. Pada bagian home ditampilkan sidebar lalu pada bagian halaman tidak ditampilkan. Nah Berikut Adalah Rahasia tersebut, Kita Akan menggunakan Tag Kondisi diatas untuk costum template atau menampilkan bentuk template berbeda setiap halamannya. Dengan ini kita akan bisa menyembunyikan sebagaian sidebar / widget pada halaman tertentu yang kita inginkan. Berikut Penggunaanya:

-. Penggunaan Conditional Tag Satu Gadget atau Elemen

<b:if cond='data:blog.pageType == &quot;item&quot;'>
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.

- Penggunaan Conditional Tag Dua Gadget atau Elemen

<b:if cond='data:blog.pageType == &quot;item&quot;'>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 == &quot;Digital Imaging&quot;'>
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.

- Penggunaan Conditional Tag Lebih dari Satu Kondisi dan Lebih dari Satu Gadget ataT Elemen

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
Gadget atau Elemen [akan ditampilkan jika bernilai benar (true)]
<b:else/>
Gadget atau Elemen [akan ditampilkan jika bernilai salah (false)]
</b:if>
</b:if>

Memahami Operator Conditional Tag

Operator conditional tag merupakan alat khusus untuk membandingkan dua buah nilai. Operator conditional tag terdiri dari 2 jenis yaitu:

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,-

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)

Kalimat Akhir | Conditional Tag

Selesai Belajar Conditional tag...berekspresi dan berpusing-pusing ria, jangan lupa siapkan peralatan untuk berfikir (makanan ringan, kopi dan obat sakit kepala). Selamat Belajar, Salam Blogger :)