Penerapan Tag Kondisional pada Template Blogger

Dalam dunia kode ada begitu banyak bentuk tag kondisional, Namun di sini Saya hanya akan menjelaskan tentang tag kondisional untuk platform blogspot.

Sebagai blogger template developer atau customizer, Anda harus tahu tentang tag kondisional blogger. Dengan menggunakan tag kondisional, Anda dapat menentukan bagian dari template Anda ke tempat tertentu dalam kondisi tertentu. Contoh: Dengan menggunakan tag kondisional, Anda dapat menyembunyikan / menampilkan konten pada postingan / halaman / label / sidebar tertentu.

Sintaks tag kondisional dimulai dengan tag <b:if> dan atribut cond. Dimana atribut cond sebagai penentu/penunjuk yang digunakan untuk menunjukkan suatu kondisi. Setiap tag pembuka <b:if> harus ditutup dengan tag penutup </b:if>.

Dibawah ini adalah tag kondisional untuk platform blogspot.

Tag Kondisional Halaman Beranda (Homepage)

Halaman beranda atau homepage adalah alamat blog kita, contoh : https://rendyruslan.blogspot.co.id/
tag kondisionalnya adalah

Versi Baru

<b:if cond='data:view.isHomepage'>
ISI KONTEN
</b:if>

Versi Lama

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

Tag Kondisional diatas, adalah ISI KONTEN akan ditampilkan apabila di Halaman Beranda.

Apabila ISI KONTEN tidak ingin di tampilkan pada Halaman Beranda maka ditulis dengan kebalikan kode tersebut seperti ini:

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

Perbedaan tag kondisional diatas terletak pada tanda == dan !=. Yang harus diingat bahwa tanda == artinya sama dengan != artinya kecuali.
Penerapan kode tersebut sama pada tag kondisonal yang lainnya di bawah ini.

Tag Kondisional Halaman Item (Postingan)

Contoh halaman posting : https://rendyruslan.blogspot.com/2017/09/tag-kondisional-pada-template-blogger.html

Versi Baru

<b:if cond='data:view.isPost'>
ISI KONTEN
</b:if>

Versi Lama

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

Tag Kondisional Halaman Statis

Versi Baru

<b:if cond='data:view.isPage'>
ISI KONTEN
</b:if>

Versi Lama

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

Tag Kondisional Halaman Tertentu

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

Tag Kondisional Halaman Indeks

Halaman indeks semua jenis halaman selain halaman postingan

Versi Baru

<b:if cond='data:view.isMultipleItems'>
ISI KONTEN
</b:if>

Versi Lama

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

Tag Kondisional Halaman Label

Versi Baru

<b:if cond='data:view.isLabelSearch'>
ISI KONTEN
</b:if>

Versi Lama

<b:if cond='data:blog.searchLabel'>
ISI KONTEN
</b:if>

Tag Kondisional Halaman Arsip

Versi Baru

<b:if cond='data:view.isArchive'>
ISI KONTEN
</b:if>

Versi Lama

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

Tag Kondisional Halaman Pencarian

Versi Baru

<!-- Termasuk halaman pencarian label -->
<b:if cond='data:view.isSearch'>
ISI KONTEN
</b:if>

<!-- Hanya halaman pencarian -->
<b:if cond='data:view.isSearch and !data:view.isLabelSearch'>
ISI KONTEN
</b:if>

Versi Lama

<b:if cond='data:blog.searchQuery'>
ISI KONTEN
</b:if>

Tag Kondisional Halaman Kesalahan

Versi Baru

<b:if cond='data:view.isError'>
ISI KONTEN
</b:if>

Versi Lama

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

Tag Kondisional Halaman Pratinjau

<b:if cond='data:view.isPreview'>
ISI KONTEN
</b:if>

Menerapkan Beberapa Tag Kondisional

Dengan menempatkan tag <b:else/>, Anda dapat menambahkan beberapa kondisi. Artinya jika kondisi pertama tidak bekerja maka jalankan kondisi kedua ke semua halaman. Lihat contoh di bawah ini

<b:if cond='data:blog.pageType == &quot;item&quot;'>
KONTEN-1 EXECUTE IF TRUE
<b:else/>
KONTEN-2 EXECUTE IF FALSE
</b:if>

Contoh di atas berarti menjalankan KONTEN-1 di halaman postingan. Jika bukan halaman postingan maka jalankan KONTEN-2.

Ingat: Anda dapat menempatkan semua tag kondisional di manapun di dalam template HTML. kecuali pada layout blogger seperti (Add a Gadget> HTML / Javascript)

Share this post