12 Macam Serta Kebergunaan Conditional Tags Pada HTML

Apa itu tag conditional? Tag conditions sering kita jumpai didalam sebuah template, dan tag yang satu ini memang sangatlah wajib dan berguna, apa sih fungsi condition tag? Tag cond adalah untuk memfilter sebuah objek didalam HTML agar dapat ditampilkan pada sebuah halaman yang telah ditentukan. Sebagai contoh saya ingin menampilkan widget A hanya tampil pada halaman statis atau postingan saja, maka tag conditional inilah yang kita gunakan.

Penting untuk memfilter sebuah objek didalam sebuah situs, agar web / blog terlihat rapi. Misal pada halaman sitemap / daftar isi saya ingin menghilangkan semua widget, seperti artikel terbaru, label, archive, dan lain-lain, karena sitemap tersebut sudah menampilkan seluruh artikel di situs kita, jadi akan terlihat indah jika menyembunyikan widget yang menampilkan artikel juga. Maka, kita dapat menggunakan tag cond untuk sebuah Url.

Sebelum kita mengetahui macam-macam tag conditional, ada baiknya kita mengetahui terlebih dahulu bagaimana cara kerja tag conditional. Saya tidak akan panjang-panjang menjelaskanya, silahkan sobat lihat dibawah ini, saya berikan sebagai contoh.

Cara Kerja Tag conditional Didalam HTML

Kondisi 1
<b:if cond='data:blog.url == data:blog.homepageUrl'>
....Elemen Disini....
</b:if>

Kondisi 2
<b:if cond='data:blog.url != data:blog.homepageUrl'>
....Elemen Disini....
</b:if>

Apakah perbedaan dari kedua kondisi diatas? mungkin terlihat jelas perbadaanya, yaitu perintah == dan != . Fungsi dari kedua perintah tersebut adalah sebagai berikut:

1. Apapun yang dibungkus oleh Kondisi 1 maka hanya akan tampil di homepageUrl (Halaman Utama Web / Blog). Sedangkan,

2. Apapun yang dibungkus oleh Kondisi 2 maka elemen/objek tersebut akan disembunyikan dari homepageUrl (Halaman Utama Web / Blog)

Sekarang kita akan membahas apa saja tag conditional yang dapat digunakan, serta apa fungsinya.

Berikut Adalah 12 Macam Tag Conditional

#1 Tag condition Halaman Utama Blog

<b:if cond='data:blog.url == data:blog.homepageUrl'>
....Elemen Disini....
</b:if>

 Fungsi nya sudah saya jelaskan sebelumnya dari contoh diatas.

#2 Tag conditional Halaman Statis

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

conditional diatas berfungsi untuk menampilkan apapun yang dibungkus oleh tag tersebut hanya akan tampil pada halaman statis (Laman: www.urlblog.com/p/***.html).

#3 Tag conditional Halaman Posting

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

conditional ini berfungsi untuk menampilkan apapun yang dibungkus oleh tag tersebut hanya akan tampil pada halaman posting / artikel saja,

#4 Tag conditional Halaman Statis dan Artikel Blog

<b:if cond='data:blog.url == data:post.url'>
....Elemen Disini....
</b:if>

conditional diatas jika sobat ingin menampilkan objek contoh nya widget hanya pada Halaman Statis dan Halaman Posting saja. Selain dua halaman ini, maka widget tidak akan tampil.

#5  Tag conditional Halaman Arsip

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

conditional diatas untuk menampilkan apapun yang dibungkus oleh tag tersebut hanya akan tampil pada halaman Arsip, bagi yang bingung halaman Arsip itu yang mana, lihat gambar dibawah ini.

#6 Tag conditional Halaman Pencarian

 <b:if cond='data:blog.searchQuery'>
....Elemen Disini....
</b:if>

Conditional searchQuery adalah untuk menampilkan objek hanya di halaman pencarian. Halaman pencarian adalah yang terlihat seperti www.namablog.com/search?q=...... Untuk kondisi diatas adalah hanya menampilkan apapun yang dibungkus dengan tag condition tersebut hanya pada searchpage.

#7 Tag conditional Halaman Label

 <b:if cond='data:blog.searchLabel'>
....Elemen Disini....
</b:if>

 Hampir sama dengan tag condition pencarian, searchLabel adalah untuk menampilkan apapun yang dibungkus dengan tag tersebut pada halaman Label, Url halaman Label terlihat seperti ini info44ryou.blogspot.com/search/label/Tips%20Blog

#8 Tag conditional Post Pertama

 <b:if cond='data:blog.isFirstPost'>
....Elemen Disini....
</b:if>

condition isFirstPost adalah gabungan dari homepageUrl, searchQuery, searchLabel dan archive. Jadi, objek apapun yang dibungkus denga tag cond isFirstPost maka, objek tersebut hanya akan tampil pada Halaman Utama, Halaman Label, Halaman Pencarian dan Halaman Arsip saja. Ini sangat berguna jika sobat tidak ingin menampilkan sesuatu misalnya widget di Halaman Statis sekaligus Postingan Blog.

#9 Tag conditional Index

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

Tag cond Index hampir sama dengan isFirstPost sebelumnya, dengan Tag ini sobat dapat menampilkan atau menyembunyikan widget di Halaman Utama, Halaman Label dan Halaman Pencarian saja. Perintah tag diatas adalah apapun yang dibungkus oleh tag conditional index maka hanya akan tampil pada Homepage, Halaman Label dan Halaman Pencarian Saja, jika ingin menyembunyikan apapun dari ke tiga Halaman tersebut, sobat hanya perlu mengganti == menjadi != seperti yang sudah saya jelaskan sebelumnya.

#10 Tag conditional Error Page

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

conditional tag diatas memerintahkan untuk menampilkan apapun yang dibungkus oleh tag tersebut pada Halaman Error, Halaman error adalah dimana halaman yang tidak terdapat sebuah artikel (missing page) atau sering dikenal dengan error 404.

#11 Tag conditional Halaman Tertentu

<b:if cond='data:blog.pageType == &quot;PASTE URL DISINI&quot;'>
....Elemen Disini....
</b:if> 

Jika sobat ingin menampilkan sebuah objek contohnya widget hanya pada halaman/artikel tertentu saja, silahkan gunakan tag conditional ini, sobat dapat menentukan Halaman manapun dengan mengganti PASTE URL DISINI dengan Url halaman yang sobat tentukan.

#12 Tag conditional Mobile

<b:if cond='data:blog.isMobileRequest == &quot;true&quot;'>
....Elemen Disini....
</b:if>

Tag condition yang satu ini akan menampilkan objek apapun yang dibungkus hanya tampil pada versi mobile, jika ingin sebaliknya (menyembunyikan objek apapun pada versi mobile) sobat dapat mengganti true menjadi false, hal ini sangat berguna, contohnya pada template yang saya gunakan ini, tombol back to top menutupi beberapa tulisan di bagian footer pada versi mobile, maka saya menyembunyikanya pada versi mobile.

Sebelumnya sudah saya jelaskan dan saya beri contoh, tapi akan saya katakan lagi untuk mengingatkan, perintah == adalah dimana objek/widget tersebut hanya ditampilkan pada halaman dengan kondisi yang ditentukan, sedangkan perintan != adalah dimana widget tersebut akan disembunyikan dari kondisi yang ditentukan.

Silahkan Kembali Keatas untuk melihat lagi contoh dan cara kerja tag conditional.

Lanjutan: 2 Trik Mudah Menyembunyikan Widget Pada Halaman Tertentu Blog

Berakhir sudah artikel saya kali ini, semoga dapat bermanfaat buat sobat sekalian. Sampai jumpa.

Info4You Info4You Update Pada: February 09, 2017