Cara Menggunakan Conditional Tag di Blogger

Cara Menggunakan Conditional Tag  di Blogger

Conditional Tag, merupakan tag khusus yang digunakan di Blogger yang fungsinya sama seperti logika IF. Ya seperti namanya, tag ini bertugas menjalankan perintah apa saja pada kondisi tertentu. Jadi misalnya kamu bisa memasang kode CSS yang hanya berlaku pada suatu halaman yang kamu inginkan. Atau menyembunyikan/menampilkan sebuah widget hanya pada halaman tertentu.

Conditional tag salah satu topik yang paling sering dicari para pengguna blogger yang gemar melakukan modifikasi pada kode HTML blogger. Secara umum penggunaan conditional tag dalam HTML blogger seperti berikut ini:

<b:if cond='kondisi_ekspresi'>
    <!-- perintah saat kondisi terpenuhi -->
</b:if>

Bagian <!-- perintah saat kondisi terpenuhi --> adalah tempat untuk menuliskan perintah yang hanya dijalankan ketika kondisi_ekspresi terpenuhi. Selain itu berikut ini kondisi ekspresi apa saja yang bisa digunakan beserta dengan fungsinya:

Daftar tipe halaman untuk Conditional tags

Archive page

Archive page atau halaman arsip merupakan halaman yang menampilkan postingan-postingan di blog berdasarkan rentan waktu tertentu. Contohnya adalah ini atau ini.

<b:if cond='data:blog.pageType == "archive"'>
    <!-- menjalankan perintah hanya di halaman arsip -->
</b:if>

Error page (404)

404 merupakan halaman yang mewakili semua halaman yang tidak ditemukan atau tidak termasuk halaman yang spesifik.

<b:if cond='data:blog.pageType == "error_page"'>
    <!-- menjalankan perintah di semua halaman error -->
</b:if>

Index page

Halaman index merupakan istilah yang digunakan untuk menyebutkan halaman yang berisi daftar posting. Biasanya halaman ini hanya menampilkan daftar posting berupa judul dan ringkasan yang dilengkapi dengan jumplink (read more) untuk membuka posting secara lengkap. Beberapa yang termasuk halaman index adalah homepage, label, search query, dan search update.

<b:if cond='data:blog.pageType == "index"'>
    <!-- semua index page -->
</b:if>

Homepage

<b:if cond='data:blog.url == data:blog.homepageUrl'> 
    <!-- hanya di homepage -->
</b:if>

Item (post) pages

Halaman yang menampilkan sebuah postingan secara penuh, contohnya adalah halaman ini.

<b:if cond='data:blog.pageType == "item"'>
    <!-- semua halaman item (posting) -->
</b:if>

Specific post by URL

Halaman spesifik yang didefinisikan dengan URL halaman tersebut. Artinya perintah pada conditional tag ini hanya akan tampil pada halaman yang mempunyai URL tersebut.

<b:if cond='data:blog.url == data:blog.canonicalHomepageUrl + "2014/08/foo.html"'>
    <!-- menjalankan perintah di halaman (contoh) www.maringngerrang.com/2014/08/foo.html -->
</b:if>

Label page

Salah satu halaman yang termasuk index page. Halaman ini menampilkan daftar postingan berdasarkan label. Conditional tag ini berlaku untuk semua label. Contohnya adalah halaman ini.

<b:if cond='data:blog.searchLabel'>
    <!-- semua label -->
</b:if>

Spesific label page

Hampir sama seperti label page, hanya saja lebih spesifik untuk label tertentu saja.

<b:if cond='data:blog.searchLabel == "foo"'>
    <!-- hanya label 'foo' -->
</b:if>

Search page

Halaman ini merupakan daftar postingan berdasarkan kata kunci yang dimasukkan pada pencarian. Contohnya adalah halaman ini. Jika kamu menggunakan Custom Search Engine, maka conditional tag ini tidak berlaku.

<b:if cond='data:blog.searchQuery'>
    <!-- semua hasil pencarian -->
</b:if>

Specific Search Query page

Sama seperti search page hanya saja lebih spesifik untuk query tertentu.

<b:if cond='data:blog.searchQuery == "foo"'>
    <!-- hanya pencarian dengan query 'foo' -->
</b:if>

Static page

Merupakan halaman yang dibuat oleh user. Melalui blogger dengan membuat halaman baru di bagian Halaman. Contohnya adalah ini.

<b:if cond='data:blog.pageType == "static_page"'>
    <!-- semua halaman statis -->
</b:if>

Spesifi static page by URL

Sama seperti static page hanya saja spesifik berdasarkan URL tertentu

<b:if cond='data:blog.url == data:blog.canonicalHomepageUrl + "p/foo.html"'>
    <!-- halaman statis dengan alaman (contoh) www.maringngerrang.com/p/foo.html -->
</b:if>

Mobile page

Seperti yang kita ketahui bahwa sebagian besar tampilan PC dan tampilan di Mobile memiliki beberapa perbedaan, termasuk perbedaan kode. Khususnya bagi pengguna AMP HTML. Untuk mengatur mana yang tampil di mobile dan mana yang tidak bisa menggunakan conditional tag di bawah, ganti dengan true untuk tampilan mobile dan false untuk selain tampilan mobile:

<b:if cond='data:blog.isMobileRequest == &quot;true&quot;'>
    <!-- perintah ini hanya tampil pada tampilan mobile -->
</b:if>

Fungsi NOT, OR, AND, dan ELSE

NOT

Fungsi NOT bisa dibilang sebagai fungsi "pengecualian" atau fungsi "kebalikan". Conditional tag ini akan menjalankan perintah kecuali pada kondisi yang disebutkan. Bagian yang menandakan NOT adalah penggunaan == diganti dengan !=.

<b:if cond='data:blog.pageType != "item"'>
    <!-- perintah untuk semua halaman kecuali halaman item (posting) -->
</b:if>

atau

<b:if cond='data:blog.url != data:blog.homepageUrl'>
    <!-- semua halaman kecuali homepage -->
</b:if>

OR

Fungsi OR adalah sesuai artinya yaitu "atau". Jadi perintah hanya dijalankan salah satunya saja, jika salah satu kondisi terpenuhi, maka kondisi lainnya diabaikan.

<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>

AND

Fungsi AND adalah untuk kondisi berganda. Jadi perintah akan dijalankan jika dan hanya jika semua kondisi terpenuhi. Contoh kasus berikut ini, perintah akan dijalankan pada semua index_page (homepage, label, search query, dan search update) DAN terkecuali sebuah halaman label, yaitu halaman label 'foo'. Jadi perintah hanya berlaku jika kedua kondisi tersebut terpenuhi.

<b:if cond='data:blog.pageType == "index"'>
    <b:if cond='data:blog.searchLabel != "foo"'>
        <!-- perintah dijalankan di semua index_page (termasuk label), kecuali label 'foo' -->
    </b:if>
</b:if>

ELSE

Fungsi Else adalah untuk menjalankan perintah jika semua kondisi yang disebutkan tidak terpenuhi. Atau dengan kata lain, selain semua kondisi yang disebutkan.

<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>

Contoh Pengaplikasian

Conditional tags dapat diaplikasikan untuk menjalankan perintah tertentu pada Blogger, seperti:
  • Menampilkan widget pada halaman tertentu
  • Menggunakan kode CSS hanya pada halaman tertentu
  • Menambahkan meta tag Facebook dan tag kartu Twitter
  • Load JavaScript pada halaman tertentu saja (bisa mempercepat loading blog pada halaman yang tidak perlu load JS tersebut)
  • Menampilkan tag 'title' sesuai jenis halaman (Optimasi tag Title SEO)

Misalnya, saya akan menghilangkan widget HTML2 pada tampilan seluler (HTML2 merupakan ID widget tersebut, pelajari lebih lanjut cara mengetahui ID widget di blogger)

Pertama-tama buka Tema pada Blogger lalu klik Edit HTML, kemudian temukan ID blog yang dicari - dalam contoh ini adalah HTML2 -, kamu bisa klik tombol Lompat ke widget pada bagian atas menu Edit HTML. Kode widget tersebut kurang lebih seperti ini:

<b:widget id='HTML2' locked='false' title='' type='HTML'>
  <b:widget-settings>
    <b:widget-setting name='content'>...</b:widget-setting>
  </b:widget-settings>
  <b:includable id='main'>
    <!-- only display title if it's non-empty -->
    <b:if cond='data:title != &quot;&quot;'>
      <h2 class='title'><data:title/></h2>
    </b:if>
    <div class='widget-content'>
      <data:content/>
    </div>

    <b:include name='quickedit'/> <!-- hilangkan ini bagi pengguna AMP HTML -->
  </b:includable>
</b:widget>

Setelah itu tambahkan kode conditional cond='data:blog.isMobileRequest == &quot;true&quot;' sebagai atribut pada tag b:widget. Lalu kodenya akan terlihat seperti ini:

<b:widget cond='data:blog.isMobileRequest == &quot;true&quot;' id='HTML2' locked='false' title='' type='HTML'>

Kamu bisa mengganti nilai true menjadi false. True berarti widget tersebut tampil di ponsel dan tidak tampil jika dibuka di PC, sedangkan false adalah sebaliknya.

Selain itu untuk menghindari kode AMP HTML, kamu juga perlu menghapus <b:include name='quickedit'/> pada setiap widget yang ada di HTML blog kamu.

Tips dan Peringatan

Tips

Saat kamu menyalin conditional tag di atas ke dalam HTML blog kamu di Blogger, secara otomatis editor akan mengkonversi semua simbol kutip ganda " menjadi &quot;. Oleh karena itu sebelum memasukkan conditional tag di atas ke blog kamu, ganti semua kutip ganda " menjadi &quot;. Anda bisa mengaturnya dengan mudah di sini.

Peringatan

Mungkin dengan salah satu contoh kondisi untuk widget blog di atas, kamu bisa lebih mengerti tentang peletakan conditional tag pada HTML blogger beserta fungsi penggunaannya. Selalu ingat untuk memperhatikan dengan baik pemberian kode penutup pada conditional tag yaitu kode </b:if> yang menandakan akhir perintah conditional tag tersebut. Pastikan tidak ada tag yang saling berseberangan akibat meletakkan tag penutup yang tidak pada tempatnya.

Penutup

Itulah beberapa hal yang bisa kamu pelajari tentang Conditional Tag di Blogger beserta fungsi dan cara penggunannya. Dengan demikian kamu bisa mencoba belajar memodifikasi HTML blogger sesuai kebutuhan dan keinginan kamu. Jangan lupa tinggalkan komentar terbaik kamu di bawah atau di halaman contact blog ini. Terima kasih, semoga bermanfaat dan sampai jumpa!

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel