Tag Kondisional Blogger
Tag kondisional di Blogger (mis. <b:if cond='...'>) memungkinkan untuk menampilkan atau menyembunyikan bagian template berdasarkan kondisi tertentu. Seperti hanya menampilkan banner di homepage, menyembunyikan widget pada halaman posting, atau menyesuaikan meta tag untuk halaman indeks. Artikel ini menjelaskan apa itu tag kondisional, fungsinya, contoh sintaks, cara menempatkannya di template Blogger, dan pedoman lengkap untuk homepage, index, post, label, search, dan halaman statis.
"DISCLAIMER: Artikel ini bukanlah tutorial, tapi hanya catatan / dokumentasi penulis dalam mengutak-atik blog platform blogger-blogspot."
Apa itu Tag Kondisional?
Tag kondisional adalah elemen template di Blogger yang menggunakan format XML dengan menggunakan (<b:if cond='...'>, <b:else/>, <b:elseif cond='...'>). Dengan tag ini, Anda dapat mengeksekusi logika sederhana pada level tampilan (template) tanpa harus menulis JavaScript atau mengubah banyak file.
Sintaks Dasar & Contoh
Contoh struktur tag kondisional:
Contoh 1:
<b:if cond='KODE HALAMAN'>
Kondisi html / css
</b:if>
Contoh 2:
<b:if cond='KODE HALAMAN'>
Kondisi html / css
<b:elseif cond='KODE HALAMAN'/>
Kondisi html / css
<b:else/>
Kondisi html / css
</b:if>
Penempatan di Template Blogger
Biasanya tag kondisional diletakkan langsung pada bagian template yang ingin dikontrol: di antara bagian <head> dan </head> atau bisa juga antara <body> dan </body>, tinggal menyesuaikan dengan bagian mana yang ingin di kontrol. Agar aman, lakukan backup template sebelum mengedit: Theme > Edit HTML > backup.
Contoh 1: Mengatur selector tertentu pada halaman homepage dan selain homepage
<b:if cond='data:view.isHomepage'>
<div class="desk">
<h4 style="color: #339966;">Jika di "Halaman Homepage" maka akan nampak kondisi 1 (tulisan ini) warna Hijau</h4>
</div>
<b:else/>
<div class="desk">
<h4 style="color: #3366ff;">Jika di "Halaman selain Homepage" maka akan nampak kondisi 2 (tulisan ini) warna Biru</h4>
</div>
</b:if>
Jika di halaman homepage, maka teks yang muncul:
Jika di "Halaman Homepage" maka akan nampak kondisi 1 (tulisan ini) warna Hijau
Jika di halaman selain homepage, maka teks yang muncul:
Jika di "Halaman selain Homepage" maka akan nampak kondisi 2 (tulisan ini) warna Biru
Contoh: Memberikan warna dan ukuran font untuk selector / class "welcome" pada halaman selain Homepage
<b:if cond='!data:view.isHomepage'>
<style>
.welcome {
color: #f2f2f2;
font-size: 2rem;
}
</style>
</b:if>
Keterangan: Untuk selector / class "welcome" pada halaman selain homepage maka font akan berwarna #f2f2f2 dengan ukuran font 2rem
Pedoman Tag Kondisional Tiap Tipe Halaman
1. Homepage (Beranda)
[Back] Gunakan data:view.isHomepage untuk tag kondisional yang berlaku khusus pada halaman homepage atau Beranda
<b:if cond='data:view.isHomepage'>
KONDISI
</b:if>Contoh Url halaman homepage / beranda:
https://www.catatanjalal.com
2. Index / Indeks
[Back]Yang termasuk dalam halaman indeks (multiple post) adalah homepage, pencarian, label, dan arsip.
<b:if cond='data:view.isMultipleItems'>
KONDISI
</b:if>
Contoh Url halaman Index:
https://www.catatanjalal.com
https://www.catatanjalal.com/search/label/Catatan
https://www.catatanjalal.com/search?q=query
https://www.catatanjalal.com/search?label=Catatan
https://www.catatanjalal.com/2020
3. Halaman Post (Posting Tunggal)
[Back]Halaman Post (Posting Tunggal) adalah halaman postingan artikel.
<b:if cond='data:view.isPost'>
KONDISI
</b:if>
Contoh Url halaman Post Tunggal:
https://www.catatanjalal.com/2025/10/dari-lombok-ke-malang-kisah-kuliahku.html
4. Halaman Statis / Page
[Back] Halaman statis seperti About, Contact dll dapat memakai kodu data:view.isPage.
<b:if cond='data:view.isPage'>
Konten atau stylesheet untuk halaman statis
</b:if>
Contoh Url halaman Statis / Page:
https://www.catatanjalal.com/p/tentang-catatan-jalal.html
5. Halaman / Url Tertentu
[Back]Untuk tag kondisional ini kita cuma perlu mengambil sebagian / potongan Url.
<b:if cond='data:view.url == data:blog.homepageUrl path "Bagian Dari Url"'>
KONDISI
</b:if>
<b:if cond='data:view.url == data:blog.homepageUrl path "/p/tentang-catatan-jalal.html"'>
KONDISI
</b:if>
Contoh diatas adalah untuk penggunaan url tertentu dari halaman:
https://www.catatanjalal.com/p/tentang-catatan-jalal.html
6. Halaman Post dan Page
[Back]Pada tag kondisional ini mencakup Halaman Artikel dan Halaman Statis
<b:if cond='data:view.isSingleItem'>
KONDISI
</b:if>Url halaman Post dan Statis seperti:
https://www.catatanjalal.com/p/tentang-catatan-jalal.html
https://www.catatanjalal.com/2025/09/led-zeppelin-nenek-moyang-rock-heavy-metal.html
7. Halaman Label
[Back]Halaman label diantaranya adalah ditandai dengan "/label/"
<b:if cond='data:view.isLabelSearch'>
KONDISI
</b:if>Url halaman Label seperti:
https://www.catatanjalal.com/search/label/Musik/
https://www.catatanjalal.com/search/label/Kisah%20Hidup/
8. Halaman Pencarian
[Back]Halaman Pencarian biasanya ditandai dengan "/search/"
<b:if cond='data:view.isSearch'>
KONDISI
</b:if>Url halaman Pencarian seperti:
https://www.catatanjalal.com/search?q=query
https://www.catatanjalal.com/search/label/Alumni
https://www.catatanjalal.com/search?label=Musik
9. Halaman Arsip
[Back]<b:if cond='data:blog.pageType == "archive"'>
KONDISI
</b:if>Url halaman Arsip seperti:
https://www.catatanjalal.com/2025
https://www.catatanjalal.com/2025/10
https://www.catatanjalal.com/2025_10_09_archive.html
10. Halaman Error 404 (page Not Found)
[Back]<b:if cond='data:view.isError'>
KONDISI
</b:if>Url halaman Error:
https://www.catatanjalal.com/404.html
Sebenarnya masih banyak hal yang terkait dengan Tag Kondisional, diantaranya adalah deklarasi "NOT, AND dan OR"
Check Sebelum di Publish
- Backup template (download XML).
- Cek tiap kondisi di beberapa halaman (homepage, single post, label, page, search).
Tag kondisional adalah alat ringan tapi sangat bermanfaat untuk membuat template Blogger lebih dinamis dan SEO-friendly. Dengan memahami ekspresi kondisi dan penempatan yang tepat, Anda bisa mengontrol tampilan dan metadata setiap tipe halaman dengan mudah.
Diskusi