Jumat, 27 Juni 2014
Apa itu Tag Kondisional/Conditional Tag?... Bagi para web Designer pastilah tidak asing lagi dengan istilah itu. Tag Kondisional adalah tag yang digunakan untuk mengatur element-element tertentu dimana akan ditampilkan atau disembunyikan. Misal: Kita ingin menampilkan slider hanya di homepage saja, sedangkan pada halaman postingan slider ingin disembunyikan, saat itulah kita perlu menggunakan tag kondisional.
1. Memahami Tag Kondisional
Perhatikanlah contoh tag kondisional berikut ini:
<b:if cond='data:blog.url == data:blog.homepageUrl'>Element/Objek</b:if>Dari contoh diatas bisa kita lihat bahwa tag kondisional selalu diawali dengan tag <b:if> dan diakhiri dengan tag </b:if>. Setiap tag <b:if> memiliki atribut cond yang berfungsi sebagai penanda suatu kondisi. Sedangkan kode data:blog.url == data:blog.homepageUrl adalah nilai atribut yang menjelaskan maksud dari kondisi yang diinginkan.
Kita juga bisa membuat kebalikan dari fungsi tag kondisional tersebut. Bagaimana caranya?... Jika diperhatikan dalam nilai atributnya terdapat kode pembanding, yaitu == yang berarti "sama atau menyetujui". Untuk membuat kebalikannya kita hanya perlu merubah kode pembanding itu menjadi != yang berarti "tidak sama atau menolak".
Jika diartikan secara keseluruhan maka akan menjadi seperti ini:
| Tag Kondisional | Arti Kode |
|---|---|
| <b:if cond='data:blog.url == data:blog.homepageUrl'>Element/Objek</b:if> | Element/Objek akan ditampilkan/difungsikan apabila keadaan saat ini berada pada homepage. |
| <b:if cond='data:blog.url != data:blog.homepageUrl'>Element/Objek</b:if> | Element/Objek akan ditampilkan/difungsikan kecuali keadaan saat ini berada pada homepage. |
2. Jenis-Jenis Tag Kondisional
Berikut ini adalah beberapa jenis tag kondisional yang biasa di pakai:
Tag Kondisional: Halaman Muka (Homepage)
Homepage adalah halaman depan blog kita yang berupa link murni.Contoh url: http://namablog.blogspot.com
<b:if cond='data:blog.url == data:blog.homepageUrl'> Isi Kode </b:if>Ket: Tag ini berfungsi untuk menampilkan Objek hanya di homepage saja.
Tag Kondisional: Halaman Item (Halaman Posting)
Halaman item adalah halaman posting blog kita, url-nya berakhiran dengan nama berkas/post.Contoh url: http://namablog.blogspot.com/2014/05/judul-postingan.html
<b:if cond='data:blog.pageType == "item"'> Isi Kode </b:if>Ket: Tag ini berfungsi untuk menampilkan Objek hanya pada halaman posting saja.
Tag Kondisional: Halaman Statis
Halaman statis adalah halaman khusus yang tidak akan tampil pada arsip setelah diterbitkan. Umumnya halaman ini dibuat pada fitur Laman di blogger.Contoh url: http://namablog.blogspot.com/p/judul-laman.html
<b:if cond='data:blog.pageType == "static_page"'> Isi Kode </b:if>Ket: Tag ini berfungsi untuk menampilkan Objek hanya pada halaman statis saja.
Tag kondisional: Halaman Label
Halaman label adalah hasil sortir label pada postingan, biasanya url halaman label diawali dengan cabang search/label/ kemudian diakhiri dengan kata kunci label.Contoh url: http://namablog.blogspot.com/search/label/label1
<b:if cond='data:blog.searchLabel'> Isi Kode </b:if>Ket: Tag ini berfungsi untuk menampilkan Objek hanya pada halaman hasil sortir label saja.
Tag Kondisional: Halaman Label Tertentu
Sama halnya dengan tag kondisional halaman label, namu yang ini dikhususkan untuk label tertentu saja.Contoh url: http://namablog.blogspot.com/search/label/popular
<b:if cond='data:blog.searchLabel == "Popular"'> Isi kode yang akan ditampilkan pada label "Popular" </b:if>Ket: Tag ini berfungsi untuk menampilkan Objek hanya pada halaman sortir label tertentu (dalam contoh tersebut adalah label Popular).
Tag Kondisional: Halaman Arsip
Halaman arsip adalah halaman dari sekumpulan arsip postingan blog. Pada umumnya url halaman arsip diakhiri dengan archive.html.Contoh url: http://namablog.blogspot.com/2014_05_01_archive.html
<b:if cond='data:blog.pageType == "archive"'> Isi Kode </b:if>Ket: Tag ini berfungsi untuk menampilkan Objek hanya pada halaman arsip saja.
Tag Kondisional: Halaman Kesalahan (Error Page)
Error page atau bisa juga disebut error 404 adalah halaman dari url yang salah atau tidak ditemukan pada blog kita. Biasanya terjadi karena kesalahan pengetikan atau postingan telah dihapus.<b:if cond='data:blog.pageType == "error_page"'> Isi Kode </b:if>Ket: Tag ini berfungsi untuk menampilkan Objek pada saat halaman terjadi error 404.
Tag Kondisional: Halaman Pencarian
Halaman pencarian adalah halaman hasil pencarian yang berasal dari kata kunci yang diketik melalui kotak pencarian/search box.Contoh url: http://namablog.blogspot.com/search?q=template
<b:if cond='data:blog.searchQuery == "css"'> Isi kode </b:if>Ket: Tag ini berfungsi untuk menampilkan Objek pada hasil pencarian (dalam contoh tersebut saya menggunakan kata kunci "template").
Tag Kondisional: Halaman Indeks
Yang dimaksud dengan halaman indeks disini adalah semua jenis halaman selain halaman item/posting.Contoh url: http://namablog.blogspot.com , http://namablog.blogspot.com/p/judul-laman.html
<b:if cond='data:blog.pageType == "index"'> Isi Kode </b:if>Ket: Tag ini berfungsi untuk menampilkan Objek selain pada halaman posting.
Tag Kondisional: Halaman Tertentu
Yang dimaksud halaman tertentu disini adalah halaman yang dianggap spesial atau unik yang ingin diberi tampilan berbeda dari yang lain.<b:if cond='data:blog.url == "URL HALAMAN"'> Isi Kode </b:if>Ket: Tag ini berfungsi untuk menampilkan Objek tertentu pada halaman yang dianggap khusus atau spesial.
Nah, itulah tadi beberapa tag kondisional yang biasa dipakai. Bila kita ingin membuat kebalikan dari fungsi tag kondisional tersebut caranya hanyalah mengganti kode pembanding == menjadi !=, cukup mudah bukan?...
3. Penerapan Tag kondisional
Setelah memahami dan mengetahui jenis-jenis tag kondisional sekarang tinggal menerapkannya pada template kita. Bagaimana caranya?... Ada 2 cara umum yang digunakan dalam penerapan tag kondisional ini, diantaranya adalah:
Penerapan secara langsung
Penerapan secara langsung dilakukan dengan cara mengapit objek yang ingin kita beri tag kondisional. Dalam penerapan langsung ini, biasanya objek berupa kode html.Contoh penerapan:
<b:if cond='data:blog.url == data:blog.homepageUrl'> <div id='Slider'>Isi kode slider</div> </b:if>Ket: Slider (<div id='Slider'>Isi kode slider</div>) akan ditampilkan apabila keadaan saat ini berada pada homepage.
Penerapan tidak langsung
Penerapan tidak langsung dilakukan dengan cara mengapit kode css selektor objek yang ingin diberi tag kondisional.Contoh penerapan:
<b:if cond='data:blog.url != data:blog.homepageUrl'>
<style type='text/css'>
#slider {display: none;}
</style>
</b:if>
Ket: Slider (<div id='Slider'>Isi kode slider</div>) tidak akan ditampilkan apabila saat ini tidak berada pada homepage. Pada dasarnya sama saja dengan Slider akan ditampilkan pada homepage.Itulah tadi keterangan singkat mengenai penerapan tag kondisional dalam dokumen HTML. Karena hanya berupa keterangan sederhana silahkan dikembangkan sesuka sobat.
Dengan demikian selesai sudah penjelasan saya mengenai tag kondisional. Semoga artikel yang cukup banyak ini dapat bermanfaat bagi sobat sekalian.
Sumber:
http://www.dte.web.id/2011/08/pemahaman-tag-kondisional-tingkat.html
http://www.dte.web.id/2011/08/tag-kondisional-tingkat-lanjut.html
Berikanlah komentar atau saran yang membangun agar DELOGIN dapat terus berkembang.