Sunday, December 6, 2015

Conditional Tag Untuk Halaman Tertentu di Blogger

Conditional Logic

Salah satu topik paling dicari para pengguna blogger adalah tentang yang satu ini, yaitu membuat beberapa halaman berbeda dengan halaman lainnya di blog. Penggunaannya hanya menggunakan pengkodean yang disebut Conditional Tag atau tag kondisional. Tag kondisional memiliki cara kerja yang hampir sama dengan fungsi IF (fungsi logika) dalam bahasa pemrograman. Secara sederhana penggunaan conditional tag dalam HTML adalah seperti contoh berikut ini.

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

Bagian titik-titik diisi dengan kondisi yang diinginkan. Perintah diatas akan diartikan oleh mesin sebagai perintah untuk melaksanakan kondisi yang dituliskan hanya pada halaman beranda blog. Sedangkan untuk perintah melaksanakan kondisi yang dituliskan pada semua halaman blog kecuali halaman beranda hanya mengganti bagian == dari kode diatas dengan !=, maka pengkodeannya akan seperti berikut ini.

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

Kode tersebut akan berarti menjalankan pengkondisian pada semua halaman blog kecuali halaman beranda. Contoh pemasangan perintah untuk mengkondisikan sesuatu pada tag conditional adalah sebagai berikut. Perintahnya yaitu menyembunyikan bagian footer blog hanya pada halaman beranda, sedangkan jika kode != anda ganti dengan ==, maka perintahnya akan menjadi menampilkan footer blog hanya pada halaman beranda.

<b:if cond='data:blog.url != data:blog.homepageUrl'>
   <style type="text/css">
      #footer { display: none;}
   </style>
</b:if>
Apa tidak bisa untuk halaman-halaman tertentu lain selain beranda?
Tentu saja bisa, selain halaman beranda, semua halaman dapat diberi tag kondisional dengan kondisi tertentu sesuai dengan yang anda inginkan. Caranya cukup mudah, yaitu hanya dengan mengganti kode 'data:blog.url == data:blog.homepageUrl' dengan kode halaman yang di inginkan. Berikut ini tag conditional untuk halaman-halaman tertentu pada blog.

Tag Kondisional Beranda Blog
<b:if cond='data:blog.url == data:blog.homepageUrl'>
... ... ...
</b:if>

Tag Kondisional Halaman Artikel (semua artikel)
<b:if cond='data:blog.pageType == &quot;item&quot;'> 
... ... ...
</b:if>

Tag Kondisional Halaman Statis
<b:if cond='data:blog.pageType == &quot;static_page&quot;'> 
... ... ...
</b:if>

Tag Kondisional Halaman Arsip
<b:if cond='data:blog.pageType == &quot;archive&quot;'> 
... ... ...
</b:if>

Tag Kondisional Halaman Label
<b:if cond='data:blog.searchLabel'>
... ... ...
</b:if>

Tag Kondisional Halaman Indeks
<b:if cond='data:blog.pageType == &quot;index&quot;'>
... ... ...
</b:if>

Tag Kondisional Halaman URL Tertentu
<b:if cond='data:blog.url == &quot;URL-HALAMAN&quot;'>
... ... ...
</b:if>

Tag Kondisional Halaman Label Tertentu
<b:if cond='data:blog.searchLabel == &quot;LABEL&quot;'>
... ... ...
</b:if>

Tag Kondisional Ponsel
<b:if cond='data:blog.isMobile'>
... ... ...
</b:if>

Tag Kondisional Halaman Error
<b:if cond='data:blog.pageType == &quot;error_page&quot;'>
... ... ...
</b:if> 

Tag Kondisional Hasil Pencarian Tertentu
<b:if cond='data:blog.searchQuery == &quot;LABELNYA&quot;'>
... ... ...
</b:if> 

Lalu bagaimana perintah kondisionalnya untuk widget blog?
Perintah conditional tag untuk - misalnya menampilkan - widget hanya pada halaman tertentu di blog hampir sama dengan cara diatas, hanya saja penempatan kodenya yang berbeda. Penempatan kode tag kondisional untuk widget ditempatkan sesuai letak kode widget tersebut.

Misalnya, saya akan menghilangkan widget HTML2 (HTML2 merupakan ID widget tersebut, cara mengetahui ID widget silahkan pelajari lebih lanjut), pertama-tama buka editor HTML blog anda kemudian temukan ID blog yang dicari - dalam contoh ini adalah HTML2 - kode widget tersebut kurang lebih mungkin akan seperti kode berikut ini.

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

Setelah itu letakkan kode tag kondisional setelah kode <b:includable id='main'>. Tampilan kodenya akan seperti berikut ini.

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

Mungkin dengan itu anda sudah cukup mengerti tentang peletakan kode tag kondisional untuk widget blog. Selalu ingat untuk memperhatikan dengan baik pemberian kode penutup pada tag kondisional yaitu kode </b:if> yang menandakan akhir perintah tag kondisional.

Penempatan kode tag kondisional bisa dimana saja pada bagian HTML blog, namun terkadang posisinya ditentukan sesuai dengan posisi kondisi (cond) yang anda tuliskan. Misalnya pada contoh paling awal yang saya berikan, penempatan kode tag kondisional yang memiliki kode <style type="text/css"> , maka harus diletakkan didalam tag <head>.

Mungkin cukup sekian dari saya, semoga bisa bermanfaat, jika ada yang ingin sobat tanyakan silakan sampaikan pada kotak komentar dibawah atau bisa juga melalui halaman contact blog ini. Terima kasih, assalamu'alaikum warohmatullahi wabarokatuh.
Disqus Comment
Parse Tool