Kumpulan Tag Conditional Blogger dan Fungsinya

Kumpulan Tag Conditional Blogger dan Fungsinya - Kode tag kondisional ini memiliki fungsi untuk menampilkan dan menyembunyikan widget tertentu yang ada pada blogger. Misalnya, Anda ingin menampilkan widget popular post di homepage blog tetapi ketika berada di halaman postingan widget popular post tidak ditampilkan atau disembunyikan. Hal ini dapat Anda lakukan dengan cara menambahkan kode tag conditional pada bagian popular post atau widget lainnya.

Dalam dunia pemrogramman ada banyak jenis tag conditional, namun disini saya akan menjelaskan beberapa kumpulan tag conditional untuk platform blogspot. Dalam pembuatan template blogger kode tag kondisional ini sangat membantu untuk mengatur beberapa elemen yang nantinya akan ditampilkan atau disembunyikan, oleh karena itu bagi Anda yang ingin membuat template blog sendiri atau yang suka edit template blog wajib mengetahui fungsi dasar dari tag conditional blogger ini.

Fungsi Tag Conditional

Tag Kondisional atau Conditional Tag adalah tag yang digunakan untuk mengatur elemen-elemen tertentu yang berfungsi untuk menampilkan atau menyembunyikan elemen pada kondisi tertentu.

Cara Membaca Tag Conditional

Kode tag kondisional selalu diawali dengan tag <b:if> dan ditutup dengan tag </b:if>. Setiap kode tag <b:if> memiliki atribut cond, dimana atribut cond ini memiliki berbagai jenis nilai yang berfungsi untuk menunjukan suatu kondisi. Kita ambil salah satu contoh tag conditional yang paling umum digunakan.

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

Dari contoh diatas kita lihat bahwa atribut cond memiliki nilai data:blog.url == data:blog.homepageUrl yang menunjukan kondisi yang diinginkan.

Kode data:blog.url adalah pernyataan untuk mewakili keadaan sebuah halaman URL, sedangkan kode data:blog.homepageUrl adalah perwakilan dari halaman homepage blog Anda. Kita ambil contoh kembali misalnya Anda memiliki blog dengan alamat URL https://www.caramanual.com, maka kode data:blog.homepageUrl dapat diartikan sebagai https://www.caramanual.com.

Menampilkan Elemen Tertentu Menggunakan Tag Conditional

Kita ambil contoh dari kode diatas, misalnya saya ingin menampilkan sebuah objek hanya di halaman beranda atau homepage blog saja dan akan hilang atau tidak tampil pada halaman lainnya. Maka kode tag conditional yang digunakan adalah seperti dibawah ini.

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

Menyembunyikan Elemen Tertentu Menggunakan Tag Conditional

Kebalikan dari cara sebelumnya, misalnya saya ingin menghilangkan atau menyembunyikan sebuah objek pada halaman beranda atau homepage blog dan akan muncul atau tampil pada halaman lainnya. Maka kode tag conditional yang digunakan adalah seperti dibawah ini.

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

Perhatikan baik-baik kedua contoh diatas hanya memiliki perbedaan antara == dan !=. Dimana arti dari == adalah sama dengan atau menyetujui kondisi. Sedangkan != adalah tidak sama dengan atau tidak menyetujui kondisi. Cukup mudah bukan, untuk menampilkan atau menyembunyikan suatu elemen pada blog Anda hanya perlu mengetahui kondisi tag dan menggunakan kedua pembanding diatas untuk mengatur keadaan atau kondisi.

Cara Menerapkan Tag Conditional

Ada dua cara penerapan kode tag conditional, yang pertama yaitu dengan menerapkannya secara langsung pada sasaran atau objek tertentu, yang kedua yaitu dengan menerapkannya secara tidak langsung dengan memanfaatkan kemampuan CSS.

Penerapan Kondisi Secara Langsung

Penerapan tag conditional secara langsung ini sangat mudah, Anda cukup mengapit sebuah objek atau sasaran dengan tag conditional, contohnya seperti dibawah ini.

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

Artinya:
Jika keadaan halaman saat ini sama dengan URL halaman homepage, maka OBJEK akan ditampilkan atau difungsikan.

Penerapan Kondisi Secara Tidak Langsung

Penerapan tag conditional secara tidak langsung dapat dilakukan dengan cara mengapitkannya pada kode CSS selektor objek yang menjadi sasarannya. Untuk menghilangkan objek sasaran, kita gunakan deklarasi display:none pada bagian CSS seperti dibawah ini.

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

...

<div id='obyek'>OBJEK</div>

Artinya:
Seluruh elemen yang memiliki ID obyek akan disembunyikan atau tidak akan ditampilkan apabila keadaan halaman saat ini tidak sama dengan URL halaman homepage.

Perlu Anda Ketahui:
- Dalam kode HTML untuk memanggil kode css selektor menggunakan atribut id atau class.
- Dalam kode CSS id ditandai dengan tanda pagar atau (hastag) sedangkan class ditandai dengan titik (dot).

Baca juga: Kumpulan Kode Tag HTML Lengkap Dengan Fungsinya

Kumpulan Tag Conditional Blogger

Berikut beberapa kode tag kondisional yang dapat Anda gunakan untuk menampilkan atau menyebunyikan sebuah objek tertentu.

Tag Conditional Halaman Homepage

Halaman homepage adalah halaman murni yang tidak memiliki cabang atau folder, contohnya seperti ini.

https://www.caramanual.com

Tag conditionalnya seperti ini:

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

Tag Conditional Halaman Item

Halaman item adalah tipe halaman yang akan selalu berakhir pada nama berkas atau folder, contohnya seperti ini.

https://www.caramanual.com/2018/02/kumpulan-tag-conditional-blogger-dan-fungsinya.html

Tag conditionalnya seperti ini:

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

Tag Conditional Halaman Arsip

Ciri khusus pada halaman arsip adalah halaman homepage yang diikuti oleh cabang URL tahun, bulan, dan tanggal, namun tidak sampai kepada nama berkas halaman item, ciri khusunya yaitu pada akhir URL memiliki cabang archive.html, contonya Seperti ini.

https://www.caramanual.com/2018_01_01_archive.html

Tag conditionalnya seperti ini:

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

Tag Conditional Halaman Statis

Halaman statis adalah jenis halaman spesial dari blogger yang berakhir pada nama berkas dan tidak akan masuk dalam daftar arsip blog, contohnya seperti ini.

https://www.caramanual.com/p/about.html

Tag conditionalnya seperti ini:

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

Tag Conditional Halaman Indeks

Halaman indeks adalah semua jenis halaman yang bukan halaman item.

https://www.caramanual.com
https://www.caramanual.com/p/about.html
https://www.caramanual.com/2018/02/kumpulan-tag-conditional-blogger-dan-fungsinya.html

Tag conditionalnya seperti ini:

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

Tag Conditional Halaman Label

Halaman label adalah tipe halaman hasil sortir dari label item atau postingan, halaman ini diawali dengan cabang atau folder search/label/ kemudian diakhiri dengan nama label, contohnya seperti ini.

https://www.caramanual.com/search/label/Blogger

Tag conditionalnya seperti ini:

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

Tag Conditional Halaman Label Tertentu

Sama saja dengan halaman label, hanya saja ini lebih spesifik pada nama label tertentu, contohnya seperti ini.

https://www.caramanual.com/search/label/Blogger

Tag conditionalnya seperti ini:

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

Tag Conditional Halaman Pencarian

Halaman pencarian adalah tipe halaman hasil dari pencarian atau penelusuran didalam blog Anda, halaman pencarian diawali dengan search/?q= dan diakhiri oleh kata kunci pencarian, contohnya seperti ini.

https://www.caramanual.com/search/?q=Blogger

Tag conditionalnya seperti ini:

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

Tag Conditional Halaman Pencarian Tertentu

Sama saja dengan halaman pencarian, hanya saha ini lebih spesifik pada kata kunci pencarian tertentu, contohnya seperti ini.

https://www.caramanual.com/search/?q=Blogger

Tag conditionalnya seperti ini:

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

Tag Conditional Halaman Tertentu (Custom)

Anda dapat membedakan halaman tertentu dengan halaman pada umumnya yang ada di blog Anda dengan menggunakan tag conditional.

Tag conditionalnya seperti ini:

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

Tag Conditional Halaman Kesalahan (Error Page)

Halaman kesalahan atau error page adalah halaman yang tidak ditemukan pada blog Anda, halaman ini ditandai dengan kode error 404 not found. Halaman ini disebabkan oleh penulisan URL yang salah atau bisa disebabkan karena item atau postingan yang Anda buat sudah dihapus.

Tag conditionalnya seperti ini:

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

Itulah kumpulan tag conditional blogger dan fungsinya, kode tag kondisional diatas dapat Anda susuaikan dengan kebutuhan Anda, jika memiliki pertanyaan atau masukkan silahkan menghubungi kami melalui halaman kontak atau dengan memberikan komentar dibawah ini.

Cara Manual

Cuman hobi nulis tentang tutorial blog jadi deh blog cara manual.

Bagikan Artikel ini