Bagi kamu yang menggunakan Blogger sebagai engine untuk blog kamu, salah satu istilah yang perlu kamu ketahui adalah Conditional Tag yang merupakan sebuah tag khusus di Blogger yang fungsinya sama seperti logika if (jika). Sama seperti namanya tag ini bertugas menjalankan perintah apa saja jika sebuah kondisi tertentu terpenuhi. Logikanya seperti ini, misalnya kamu ingin agar semua teks di homepage berwarna merah dengan kode CSS color: red; oleh karena itu supaya teks di halaman lain tidak ikut berwarna merah kamu bisa menggunakan conditional tag agar kode tersebut hanya digunakan pada halaman homepage saja.
Conditional tag ini bisa dibilang salah satu topik yang cukup sering dicari oleh para pengguna blogger yang gemar melakukan modifikasi pada kode HTML Blogger. Nah, secara umum penggunaan conditional tag dalam HTML Blogger punya bentuk umum seperti berikut ini:
<b:if cond='syarat_kondisi'> <!-- perintah saat kondisi terpenuhi --> </b:if>
Bagian <!-- perintah saat kondisi terpenuhi --> adalah tempat untuk menuliskan perintah yang hanya dijalankan ketika syarat_kondisi terpenuhi. Selain itu berikut ini berbagai macam syarat kondisi yang bisa digunakan beserta dengan fungsinya masing-masing.
Jenis Kondisi Berdasarkan Halaman
Archive Page (Halaman Arsip)
Archive page atau halaman arsip merupakan halaman yang menampilkan semua postingan di blog berdasarkan rentang waktu tertentu. Halaman ini akan selalu di generate otomatis oleh Blogger dan dapat kamu temukan pada halaman nama-saya.blogspot.com/2021/07/. Kode yang bisa kamu gunakan adalah:
<b:if cond='data:blog.pageType == "archive"'>
<!-- menjalankan perintah hanya di halaman arsip -->
</b:if>
Error page / 404 Not Found
Mungkin kamu sudah tidak asing dengan halaman 404 not found. Ya! Halaman tersebut akan terbuka jika sebuah halaman tidak ditemukan, artinya jika kamu membuka sebuah alamat web tetapi alamat tersebut tidak mengarahkan ke halaman tertentu, maka halaman 404 akan ditampilkan. Di Blogger kamu bisa menggunakan conditional tag berikut untuk mengatur halaman 404.
<b:if cond='data:blog.pageType == "error_page"'>
<!-- menjalankan perintah di semua halaman error -->
</b:if>
Index Page (Halaman Indeks)
Di Blogger, halaman indeks bisa juga disebut sebagai halaman homepage. Pada umumnya homepage dari situs seperti blog akan menampilkan daftar artikel atau posting berupa judul dan ringakasan isi post tersebut dan dilengkapi dengan jumplink (read more) untuk menampilkan isi artikel secara keseluruhan. Akan tetapi di Blogger, yang termasuk dalam halaman indeks bukan hanya homepage, termasuk juga label, search query, dan search update. Tag kondisional yang dapat digunakan adalah:
<b:if cond='data:blog.pageType == "index"'> <!-- semua index page --> </b:if>
Homepage
Secara umum homepage merupakan bagian dari halaman indeks seperti yang sudah disebutkan di atas, tetapi secara khusus kamu juga bisa menggunakan kondisional tag untuk halaman homepage atau dalam bahasa Indonesia disebut beranda. Kode yang dapat kamu gunakan adalah sebagai berikut:
<b:if cond='data:blog.url == data:blog.homepageUrl'> <!-- hanya di homepage --> </b:if>
Item (post) pages
Halaman item atau halaman post dalam Blogger dikenal sebagai halaman yang menampilkan isi suatu postingan. Sebagai perumpamaan jika menggunakan Blogger, halaman item adalah halaman yang kamu buka saat ini tempat kamu membaca artikel ini secara lengkap. Dan conditional tag yang digunakan pada halaman item adalah sebagai berikut:
<b:if cond='data:blog.pageType == "item"'> <!-- semua halaman item (posting) --> </b:if>
Specific post by URL
Jika kamu menggunakan kode yang ada di atas, maka akan bekerja untuk setiap halaman pada semua post atau artikel yang kamu posting di blog kamu. Tetapi jika kamu ingin menggunakan conditional tag khusus yang hanya bekerja pada posting tertentu saja, kamu bisa menggunakan kode berikut ini:
<b:if cond='data:blog.url == data:blog.canonicalHomepageUrl + "2014/08/foo.html"'> <!-- menjalankan perintah di halaman (contoh) maringngerrang.com//2014/08/foo.html --> </b:if>
Kamu tinggal mengganti bagian yang ditandai dengan URL postingan dari blog kamu tanpa menggunakan alamat utama atau alamat domain.
Lagel page
Sama seperti namanya, halaman ini adalah yang menampilkan daftar postingan di blog kamu berdasarkan label tertentu, . Lagel page juga termasuk salah satu index page, dan kode berikut ini dapat kamu gunakan untuk menjalankan suatu perintah khusus pada semua label.
<b:if cond='data:blog.searchLabel'> <!-- semua label --> </b:if>
Specific label page
Jika kamu ini menggunakan tag kondisional yang hanya berjalan pada halaman label tertentu, kamu bisa menggunakan kode berikut ini:
<b:if cond='data:blog.searchLabel == "blogger"'> <!-- hanya label 'blogger' --> </b:if>
Search page
Sebagian besar halaman situs mempunyai fitur yang namanya pencarian, khususnya blog di Blogger, fitur ini memungkinkan pengunjung untuk mencari sesuatu pada blog tersebut berdasarkan kata kunci tertentu layaknya seperti mencari di mesin pencarian seperti Google, Bing, dsb.
Nah, untuk menjalankan suatu perintah yang hanya dapat berjalan pada halaman hasil pencarian di blog, kamu bisa menggunakan tag kondisional berikut ini:
<b:if cond='data:blog.searchQuery'> <!-- semua hasil pencarian --> </b:if>
Specific search query page
Halaman ini juga akan bekerja pada halaman hasil pencarian seperti pada kode di atas, tetapi kamu dapat mengaturnya lebih spesifik berdasarkan kata kunci pencarian. Jadi dengan menggunakan kode conditional tag di bawah ini, perintah hanya akan berjalan pada halaman hasil pencarian dengan kata kunci sesuai yang ditandai.
<b:if cond='data:blog.searchQuery == "game"'> <!-- hanya pencarian dengan query 'game' --> </b:if>
Static page (halaman statis)
Halaman statis merupakan halaman yang hampir sama seperti halaman posting atau artikel, tetapi tidak akan tampil pada daftar post dan biasanya menggunakan alamat URL seperti /p/judul-halaman.html. Kode berikut ini akan menjalankan sebuah perintah pada semua halaman statis.
<b:if cond='data:blog.pageType == "static_page"'> <!-- semua halaman statis --> </b:if>
Specific static page by URL
Hampir sama seperti kode untuk halaman statis di atas, hanya saja kamu bisa menentukan untuk satu static page saja dengan menggunakan URL atau alamat dari halaman tersebut. Kode conditional tag nya adalah sebagai berikut:
<b:if cond='data:blog.url == data:blog.canonicalHomepageUrl + "/p/contact.html"'> <!-- halaman statis dengan alamat 'mohpoe.com/p/contact.html' --> </b:if>
Mobile page
Mobile page merupakan semua halaman yang diakses menggunakan perangkat mobile seperti, smartphone dan tablet. Ciri utama yang menandakan suatu halaman dibuka di perangkat mobile adalah adanya query pada akhir URL berupa ?m=1 . Nah, untuk menjalankan perintah khusus yang hanya bekerja pada mobile page kamu bisa menggunakan conditional tag berikut ini:
<b:if cond='data:blog.isMobileRequest == "true"'> <!-- halaman yang dibuka melalui perangkat mobile --> </b:if>
Layout Menu (Menu Tata Letak)
Halaman yang satu ini berbeda dengan jenis halaman lain yang sudah dibahas di atas. Halaman ini hanya dapat diakses oleh admin dari sebuah blog atau yang bisa dengan mudah diakses melalui menu Layout atau Tata Letak setelah melakukan login di Blogger. Pada umumnya conditional tag untuk halaman menu Layout ini digunakan untuk menjalankan kode CSS yang mengatur tampilan dalam menu Tata Letak tersebut dengan menggunakan selector #layout. Sebenarnya tanpa tag kondisional pun sudah bisa bekerja tetapi supaya blog jadi lebih ringan bisa menggunakan kode berikut ini:
<b:if cond="data:view.isLayoutMode"> <!-- kode di sini hanya berlaku di halaman tata letak --> </b:if>
Operasi NOT, OR, AND, dan ELSE
Seperti yang sudah di bahas sebelumnya bahwa conditional tag ini bekerja layaknya fungsi if pada bahasa pemrograman dinamis yang lebih dikenal dengan fungsi logika (logical function). Dan perlu diketahui bersama bahwa setiap fungsi logika dalam bahasa pemrograman selalu disertai dengan adanya operasi logika. Jadi kalau ada pernyataan “jika” bisa ditambahkan dengan “jika tidak” atau “jika a dan b” dan sebagainya yang mungkin familiar pada bidang ilmu matematika. Oleh karena itu berikut ini beberapa operasi logika yang bisa digunakan pada conditional tag di Blogger.
Operasi NOT
Operasi ini bisa juga disebut sebagai “operasi negasi” atau kebalikan di mana apabila ada pernyataan “jika a” bisa dibalik menjadi “jika tidak a”. Operasi ini tentunya sangat penting jika suatu perintah harusnya lebih banyak digunakan pada saat suatu kondisi tidak terpenuhi daripada harus menulis setiap kondisi terpenuhi satu per satu.
Untuk menggunakan operasi NOT pada conditional tag, kamu cukup mengubah operasi == menjadi !=, contohnya seperti kode berikut ini:
<b:if cond='data:blog.pageType != "item"'> <!-- perintah untuk semua halaman kecuali halaman item (posting) --> </b:if>
Operasi OR
Sama seperti namanya, dalam conditional tag operasi “atau” ini gunanya untuk menjalankan sebuah perintah apabila salah satu dari dua atau lebih kondisi telah terpenuhi. Bentuk umumnya adalah sebagai berikut:
<b:if cond='data:blog.url == data:blog.homepageUrl'> <!-- baris perintah hanya dijalankan jika halaman ini adalah homepage --> <b:elseif cond='data:blog.pageType == "static_page"'> <!-- baris perintah hanya dijalankan jika halaman ini adalah halaman statis --> </b:if>
Operasi AND
Bisa juga disebut operasi “dan”, sama persis dengan definisi operasi ini dalam ilmu logika matematika, maka dalam conditional tag operasi AND akan menjalankan sebuah perintah apabila setiap kondisi yang dicantumkan terpenuhi. Contohnya seperti ini, sebuah kode CSS harus dijalankan pada index page kecuali halaman label bernama “wordpress”. Jadi ringkasnya pada kondisi index page DAN bukan halaman label “wordpress”, kodenya kira-kira seperti berikut ini:
<b:if cond='data:blog.pageType == "index"'>
<b:if cond='data:blog.searchLabel != "wordpress"'>
<!-- perintah dijalankan di semua index_page (termasuk label), kecuali label 'wordpress' -->
</b:if>
</b:if>
Operasi ELSE
Operasi ini bisa juga disebut sebagai operasi “pilihan terakhir”, akan tetapi secara fisik dalam bentuk kode, operasi ini lebih cocok disebut “tag” dibandingkan “operasi”. Tetapi secara umum gunanya adalah untuk menjalankan sebuah perintah apabila kondisi-kondisi lainnya tidak ada yang terpenuhi. Contohnya ada dua kondisi yang disyaratkan, jika halaman yang dibuka adalah “item page” atau halaman “static page“, maka perintah untuk halaman “jika bukan keduanya” adalah sebagai berikut:
<b:if cond='data:blog.pageType == "item"'> <!-- perintah jika halaman ini halaman posting (item) --> <b:elseif cond='data:blog.pageType == "static_page"'> <!-- perintah jika halaman ini halaman statis --> <b:else/> <!-- perintah jika ini bukan halaman posting dan bukan halaman statis --> </b:if>
Tips dan Peringatan
Sampai di sini harusnya kamu sudah mengetahui dan memahami tentang apa itu conditional tag dan bagaimana penggunaannya. Akan tetapi secara khusus ada beberapa hal yang perlu kamu perhatikan terkait penggunaan conditional tag ini yang saya bagi jadi dua bagian, yaitu tips dan peringatan berikut:
Tips
Saat kamu menyalin conditional tag di atas ke dalam HTML blog kamu di Blogger, secara otomatis sistem text editor di Blogger akan mengkonversi semua simbol kutip ganda (“) menjadi entities character seperti " oleh karena itu kamu tidak perlu heran jika kodenya nanti akan terlihat berbeda. Kamu juga bisa mengubahnya secara manual jika mau tidak bingung jika nantinya berubah sendiri.
Peringatan
Mungkin dengan adanya contoh pada setiap jenis conditional tag yang dibahas di atas akan cukup membuat kamu lebih mengerti tentang penggunaannya. Selalu ingat untuk memperhatikan bahwa ini sama seperti “tag” HTML biasa yang ada pembuka dan penutupnya, pastikan kamu selalu menggunakan </b:if> yang menandakan akhir perintah conditional tag tersebut. Pastikan tidak ada tag yang saling “berpotongan” akibat keliru meletakkan tag penutupnya.
Penutup
Itulah beberapa hal yang perlu kamu ketahui tentang conditional tag yang ada di Blogger. Dengan menggunakan fitur ini harusnya kamu bisa lebih leluasa dalam memodifikasi kode HTML yang ada di Blogger. Semoga pembahasan dalam artikel ini bisa bermanfaat untuk kamu, jika ada hal-hal yang ingin kamu tanyakan atau sampaikan, silakan tulis pada kotak komentar di bawah. Terima kasih dan sampai jumpa!
