Conditional Tag Blogger, Fungsi Dan Cara Menggunakan

Tag Conditional Blogger, Fungsi Dan Cara Menggunakan - Secara keseluruhan tag conditional adalah tipe data boolean yang dapat digunakan dalam kode template blog untuk mengubah tampilan konten pada kondisi yang cocok dengan halaman tersebut

Daftar isi

Baca Juga

Conditional Tag Blogger, Fungsi Dan Cara Menggunakan - Secara keseluruhan conditional tag adalah tipe data boolean yang dapat digunakan dalam kode template blog untuk mengubah tampilan konten pada kondisi yang cocok dengan halaman tersebut. Artinya, kode tag kondisional ini memiliki fungsi yang digunakan untuk menampilkan atau menyembunyikan tampilan suatu widget (kolom) tertentu yang ada pada halaman blog

Fungsi Tag KondiSional
Tag Kondisional atau Conditional Tag digunakan untuk mengatur untuk menampilkan atau menyembunyikan semua elemen pada kondisi tertentu di setiap halaman blog yang diinginkan. Misalnya, Anda hanya ingin menampilkan widget popular post di halaman postingan artikel (Single post), maka di halaman beranda (Homepage) widget popular post tidak ditampilkan atau disembunyikan dan hanya tampil di halaman artikel, halaman statis, halaman error, halaman arsip, halaman search dan sebagainya kecuali Homepage

Cara Membaca Kode Tag Kondisional
Kode tag kondisional selalu diawali dengan kode tag dan ditutup dengan kode tag . Setiap kode tag memiliki atribut cond yang merupaka kependekan dari conditional, atribut cond ini memiliki berbagai jenis nilai yang berfungsi menunjukan suatu kondisi. Kami contohkan kode tag kondisional untuk Homepage seperti berikut ini:

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

Dari contoh kode diatas terdapat atribut cond memiliki nilai data:blog.url == data:blog.homepageUrl. Nilai ini merupakan kondisi yang diinginkan untuk menampilkan object pada halaman Homepage (Beranda).

Catatan: Object disini merupakan elemen atau widget atau kolom halaman atau apapun yang ingin ditampilkan atau disembunyikan.

Jadi kode data:blog.url merupakan pernyataan untuk mewakili keadaan sebuah halaman URL yang diinginkan, sedangkan kode data:blog.homepageUrl merupakan perwakilan dari halaman yang akan menampilkan suatu object, dalam contoh diatas halaman yang diinginkan adalah Homepage blog. Dari contoh diatas, kode tag hanya menampilkan object pada halaman yang dinginkan, bagaimana cara menyembunyikan object dengan menggunakan tag kondisional?

Untuk menampilkan dan menyembunyikan object tertentu menggunakan tag kondisional yang sama dengan dengan tag pembagi yang berbeda. Berikut penjelasannya:

Menampilkan Object Tertentu Menggunakan Tag Kondisional
Seperti yang telah kami jelaskan pada contoh diatas, untuk menampilkan object pada halaman tertentu secara khusus menggunakan conditional tag seperti berikut ini:

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

Menyembunyikan Object Tertentu Menggunakan Tag Kondisional
Sedangkan untuk menyembunyikan object pada halaman tertentu menggunakan tag seperti berikut ini:

<b:if cond='data:blog.url != data:blog.homepageUrl'>OBJECT</b:if>

Kedua contoh kode tag kondisional digunakan untuk halaman Homepage dan perhatikan kedua kode tag diatas, ada perbedaan penggunaan tanda == dan !=.

Arti dari tanda == adalah sama dengan yang memiliki makna menyetujui kondisi. Sedangkan tanda != adalah tidak sama dengan alias tidak menyetujui kondisi. Jadi kuncinya adalah ketika Anda menggunakan tag kondisional perhatikan kedua tanda ini.

Cara Menerapkan Dan Menggunakan Tag Conditional
Sebenarnya ada 2 cara dalam menggunakan conditional tag pada blog Anda, yaitu dengan menggunakan tag kondisional ini secara langsung seperti yang telah dicontohkan diatas atau cukup menggunakan kode CSS pada masing-masing kode elemen.

Contoh Penerapan Tag Conditional Secara Langsung
Gunakan kode berikut ini jika Anda ingin menggunakan tag secara langsung. Kode tag dibawah ini digunakan untuk menampilkan object yang diinginkan:

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

Atau kode berikut untuk menyembunyikan object yang diinginkan:

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

Penerapan Tag Conditional Secara Tidak Langsung
Cara ini menggunakan kode CSS pada atribut selector yang digunakan pada setiap object yang diinginkan untuk ditampilkan atau tidak. Tapi penggunaan kode CSS ini hanya digunakan untuk menyembunyikan object saja yaitu dengan menggunakan deklarasi display:none. Namun kode deklarasi ini terkadang tidak menyembunyikan object secara keseluruhan jika karena adanya elemen utama pada object tersebut.

Misalkan pada bagian Sidebar blog, terkadang widget yang disembunyikan masih menampilkan kolom kosong padahal sudah menggunakan deklarasi display:none. Kenapa ada kolom kosong yang ditampilkan? Karena adanya kode CSS dari sidebar itu sendiri yang tidak bisa disembunyikan. Dan solusinya adalah dengan menggunakan kode id dari object tersebut dalam kode CSS.

Contohnya sebeagai berikut:

<b:if cond='data:blog.url != data:blog.homepageUrl'>
<style type='text/css'>
#obyek,#HTML1 {
display:none
}
</style>
</b:if>

Artinya:
Seluruh elemen dengan ID object akan disembunyikan dan ID HTML1 adalah menyembunyikan kolom pada bagian sidebar secara penuh.

Macam-Macam Tag Conditional Blogger
Berikut beberapa kode tag kondisional yang digunakan untuk menampilkan atau menyembunyikan object atau elemen tertentu didalam blog:
Tag Conditional Halaman Homepage

<b:if cond='data:blog.url == data:blog.homepageUrl'>
KODE OBJECT
</b:if>

Tag Conditional Halaman Item / Halaman Posting (Single Post)

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

Tag Conditional Halaman Arsip

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

Tag Conditional Halaman Statis

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

Tag Conditional Halaman Indeks

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

Tag Conditional Halaman Label

<b:if cond='data:blog.searchLabel'>
KODE OBJECT
</b:if>

Tag Conditional Halaman Label Tertentu

<b:if cond='data:blog.searchLabel == &quot;template&quot;'>
KODE OBJECT
</b:if>

Tag Conditional Halaman Pencarian

<b:if cond='data:blog.searchQuery'>
KODE OBJECT
</b:if>

Tag Conditional Halaman Pencarian Tertentu

<b:if cond='data:blog.searchQuery == &quot;template&quot;'>
KODE OBJECT
</b:if>

Tag Conditional Halaman Tertentu (Custom)

<b:if cond='data:blog.url == &quot;URL HALAMAN&quot;'>
KODE OBJECT
</b:if>

Tag Conditional Halaman Kesalahan (Error Page)

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

Perhatikan tanda == tanda ini untuk menampilkan pada halaman terntentu dan tanda != untuk menyembunyikan.

Selain itu kode tag kondisional bisa dikombinasikan menjadi satu seperti berikut ini:

<b:if cond='data:blog.pageType == &quot;static_page&quot; and data:blog.pageType == &quot;item&quot;'>
KODE OBJECT
</b:if>

Sedangkan untuk tag kondisional untuk ponsel seperti berikut:

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

Keterangan: true bisa diganti dengan false. Keterangan ini bisa digunakan untuk menampilkan (true) dan menyembunyikan (false).

Itulah beberapa macam tag conditional blogger dan fungsi serta cara menggunakannya. Silahkan gunakan tag tersebut sesuai kebutuhan. Sebenarnya tag kondisional ini juga ada yang terbaru namun kode diatas sudah cukup dan cara kerja juga sama. Semoga bermanfaat.