Tag Kondisional Blogger Terbaru Dan Fungsinya

Apa itu Tag Kondisional?. Tag kondisional atau biasa disebut dengan Conditional tags adalah sebuah bahasa pemrograman HTML yang memeberi perintah untuk memuat atau memunculkan widget, CSS, JS atau HTML sesuai dengan perintah pada tag kondisional tersebut.

Tag kondisonal memudahkan HTML memuat file tertentu didalamnya. Sebagai contoh, jika kita ingin menampilkan widget hanya pada halaman statis maka otomatis widget tersebut tidak akan muncul pada halaman lain selain di static page. Maka dengan kata lain, tag kondisonal adalah perintah yang membolehkan dan tidak membolehkan file dalam HTML untuk tampil.

Conditional tags pada HTML jika dibahasakan dalam bahasa sehari-hari maka bisa diartikan sebagai kata "Jika". Contoh penerapannya misalnya <b:if cond='data:view.isHomepage'> ,maka tag kondisonal ini bisa kita artikan kurang lebih seperti  ini, "jika data yang terlihat adalah pada halaman utama".

Untuk selengkapnya, mari kita ulas lebih lanjut tentang beberapa tag kondisonal penting pada blogger, penerapan, fungsinya dan dampak yang ditimbulkan setelah pemasangan kondisi tag tersebut.

Tag Kondisional Terbaru, Fungsi dan Penggunaannya

Dibawah ini merupakan tag kondisional terbaru yang bisa Anda terapkan pada blog jika Anda ingin mengganti tag kondisonal lama di template Anda. Tag kondisional versi baru ini lebih sederhana. Terlihat lebih diperpendek dari tag kondisional sebelumnya.

1. Tag Kondisional Homepage (Halaman Utama)
Menampilkan data CSS, Widget, Js dll hanya di halaman Utama saja
Contoh : https://dewaplokis.blogspot.com/
Versi Baru

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

Versi Lama

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

2. Tag Kondisional Halaman Index
Menampilkan widget,css,html,js hanya di halaman index saja. Beberapa contoh halaman index yang mudah untuk ditemukan adalah homepage, halaman label, halaman archive, dan halaman search query.
Versi Baru

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

Versi Lama

<b:if cond='data:blog.pageType == "index"'>

3. Tag Kondisional Halaman Item
Menampilkan widget,css,html,js hanya di halaman item, Halaman item adalah tipe halaman yang akan selalu berakhir pada nama berkas, seperti ini:

penggunaanya ; merujuk tipe halaman item, bisa diubah menjadi static_page, index, dan lainnnya
Versi Baru

<b:if cond='data:view.isSingleItem'> 

Versi Lama

<b:if cond='data:blog.pageType in ["item", "static_page"]'>

4. Tag Kondisional Halaman Posting
Menampilkan widget,css,html,js hanya di halaman postingan saja
Contoh : https://dewaplokis.blogspot.com/2018/01/cara-memasang-artikel-terkait-dibawah-postingan.html
Versi Baru

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

Versi Lama

<b:if cond='data:blog.pageType == "item"'>

5. Tag Kondisional Halaman Statis (Page)
Menampilkan widget,css,html,js hanya di halaman statis saja. Untuk penggunaannya secara umum, halaman statis sering dimanfaatkan untuk membuat halaman about, privacy policy, terms of service, dan lain sebagainya.
Contoh : https://dewaplokis.blogspot.com/p/sitemap.html
Versi Baru

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

Versi Lama

<b:if cond='data:blog.pageType == "static_page"'>

6. Tag Kondisional Halaman Label
Menampilkan widget,css,html,js hanya di halaman label saja,
Contoh : https://dewaplokis.com/search/label/
Versi Baru

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

Versi Lama

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

7. Halaman dengan label tertentu
Hanya memunculkan jenis label tertentu sesuai command conditional tags.
Versi Baru

<b:if cond='data:view.search.label == &quot;Suatu-Label&quot;'></b:if> 

Versi Lama

<b:if cond='data:blog.searchLabel == &quot;Suatu-Label&quot;'></b:if>

8. Tag Kondisional Halaman Pencarian
Menampilkan widget,css,html,js hanya di halaman label saja,
Contoh : https://dewaplokis.blogspot.com/search?q=dewaplokis-results=8
Versi Baru

<!-- Termasuk halaman pencarian label -->
<b:if cond='data:view.isSearch'>
<!-- Hanya halaman pencarian -->
<b:if cond='data:view.isSearch and !data:view.isLabelSearch'> 

Versi Lama

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

9. Tag Kondisional Halaman Arsip
Menampilkan widget,css,html,js hanya di halaman Arsip saja
Versi Baru

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

Versi Lama

<b:if cond='data:blog.pageType == "archive"'>

10. Tag Kondisional Halaman Error 404 (Page Not Found)
Menampilkan widget,css,html,js hanya di halaman erorr saja, atau biasanya jika suatu permintaan/Request halaman tertentu tidak memehuni maka akan langsung direct ke error page
Versi Baru

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

Versi Lama

<b:if cond='data:blog.pageType == "error_page"'>

11. Tag Kondisional Halaman Pratinjau (Preview)
Menampilkan widget,css,html,js hanya di halaman pratinjau saja, tidak asing lagi pasti jika sobat sering menulis di editor blogger dengan halaman pratinjau.
Versi Baru

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

Versi Lama

<!-- Belum ada -->

Tag Kondisional di Luar Kondisi (Pengecualian)

Conditional Tags sebelumnya berfungsi untuk meletakkan kode elemen (HTML,CSS, JS, Widget dll) di dalam suatu kondisi. Agar menjadi tags berada di luar suatu kondisi, maka cukup dengan mengganti kode == menjadi != Contoh:

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

Halaman Index adalah halaman homepage, search, label dan arsip. Maka dengan tag di atas, akan berada di luar halaman index. Jadi halaman seperti posting dan statis page akan muncul .

Untuk versi terbaru, bisa menggunakan kode ! atau not yang penempatan kodenya diletakkan di depan. Contoh :

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

ATAU

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

Menggabungkan Tag Kondisional - Multi Tags

Cara menggabungkan 2 tags sekaligus, namun fungsinya tetap sama. Berikut Contohmya:

<b:if cond='data:blog.pageType != &quot;item&quot; or data:blog.pageType != &quot;static_page&quot;'></b:if> 

Tag di atas berarti akan tampil pada halaman di luar item dan static_page. Arti dari or adalah jika salah satunya benar maka kondisi akan ditampilkan. Jika harus pada kondisi tertentu maka menggunakan and.

Untuk menggabungkan banyak url halaman pada tag halaman tertentu atau untuk multi url:

<b:if cond='data:view.url in {&quot;Url halaman A&quot;,&quot;Url halaman B&quot;,&quot;Url halaman seterusnya&quot;}'></b:if>

Perhatikan ada koma(,). Di sisi lain bisa menggunakan and, yang artinya jika penggunann dari kedua/lebih kondisi benar maka akan ditampilkan. Jika salah satu tidak benar maka tidak akan ditampilkan.

Jika tidak benar tampilkan yang lain <b:else>

Jika menampilkan berbeda pada halaman berbeda tidak harus menggunakan dua tag kondisional.
Caranya

<b:if cond='data:blog.pageType == &quot;item&quot;'> 1 <b:else/> 2 </b:if>

akan terdapat pada halaman posting. Tapi jika halamannya tidak di postingan maka akan menggunakan 2. Jadi <b:else/> fungsinya untuk pengecualian dari kode di atasnya.

Tag <b:else /> yang penempatannya selalu seiring dengan <b:if>. <b:else> bisa diartikan sebagai perintah "dan juga" atau "bisa juga". Maka contoh penerapannya bisa seperti ini:

<b:if cond='data:view.isHomepage'>  
[...content1...]  
<b:else />  
[...content2...]
</b:if>

Mungkin pada gambaran diatas sudah bisa memberi sedikit bayangan pada Anda tentang bagaimana penempatan tag kondisional dan b:else beserta fungsinya.

Conditional Tags Khusus Halaman Mobile Atau /?m=1

Menampilkan tampilan CSS, JSS, Khusus untuk versi mobile
Contoh : https://dewaplokis.blogspot.com/2019/11/memasang-gambar-di-atas-judul.html?m=1
Versi Baru

<b:if cond='data:mobile'>

Versi Lama

<b:if cond='data:blog.isMobileRequest'></b:if>

Saya tambahkan tag untuk mengatur tampilan mobile. Yang membuat berbedaan antara tampilan di komputer dan smartphone.


Tag kondisional dengan versi kedua atau versi terbaru, proses pemanggilan akan lebih cepat sekalipun terlihat sama saja (tidak terasa). Di versi satu yang menggunakan == terdapat 2 proses yaitu memanggil data dan membandingkan data. Sedangkan pada versi kedua (terbaru) hanya memanggil saja. Di blog ini menggunakan yang paling baru dan dengan meminimalkan proses se-sedikit mungkin.


Sebenarnya masih ada beberapa tag kondisonal yang lain. Namun hal ini sudah termasuk dasar-dasar penggunaan tag kondisonal yang umum digunakan dalam template blog dan sudah valid HTML5.

Demikian ulasan singkat tentang tag kondisonal terbaru beserta fungsi dan penerapannya pada blog. Semoga bisa diterapkan dengan baik

Sumber :

• https://www.dte.web.id/2017/09/tag-kondisional-halaman-blogger-2017.html
• https://www.mankoin.com/2017/01/tag-konditional-cara-penggunaannya.html

Share