Conditional tag di Blogger.Com

Kode untuk kondisional page dalam fungsi logika di blogger.com yang sering dipakai saat membuat template seringkali lupa, jadi saya catat disini. Karena meskipun blog gratisan tapi fiturnya bagus. Memiliki framework sendiri dalam otak-atik kodenya yang menggunakan XML. Beda dengan misalnya wordpress yang menggunakan PHP.

Sebenarnya banyak sekali tag kondisionalnya, tapi yang berikut ini yang sering dibutuhkan karena kalau yang lain ngikut blogger.com aja dah, biar dibikinin.

Baiklah langsung saja dicatat dibawah ini kondisional tag dalam blogger.com.

Pada dasarnya ada 4 tag kondisi utama yang benar-benar berbeda yaitu berikut ini:

<!-- Item Page => Halaman posting artikel -->
<b:if cond='data:blog.pageType == "item"'>
  <!-- perintah di halaman item -->
</b:if>
  
<!-- Static Page => laman => "/p/about.html" -->
<b:if cond='data:blog.pageType == "static_page"'>
  <!-- perintah di halaman static -->
</b:if>
  
<!-- Error Page => 404 -->
<b:if cond='data:blog.pageType == "error_page"'>
  <!-- perintah di halaman error -->
</b:if>
  
<!-- Index Page => "/search/label/Blogging" -->
<b:if cond='data:blog.pageType == "index"'>
  <!-- perintah di halaman index -->
</b:if>
  
<!-- Archive Page => "/2017/08/" -->
<b:if cond='data:blog.pageType == "archive"'>
  <!-- perintah di halaman arsip -->
</b:if>

Sedangkan dibawah ini, sebenarnya adalah bagian dari Index Page, hanya saja lebih disaring lagi lebih spesifik. Tapi kesemuanya itu masuk dalam kriteria index.

<!-- Label Page => "/search/label/Blogging" -->
<b:if cond='data:blog.searchLabel'>
  <!-- perintah di halaman label -->
</b:if>
  
<!-- Label Page yang ditentukan => "/search/label/Blogging" -->
<b:if cond='data:blog.searchLabel== "Blogging"'>
  <!-- perintah di halaman label Blogging -->
</b:if>
  
<!-- Search Page => "/search?q=acer+v3+371" -->
<b:if cond='data:blog.searchQuery'>
  <!-- perintah di halaman pencarian -->
</b:if>
  
<!-- Search Page yang ditentukan => "/search?q=acer+v3+371" -->
<b:if cond='data:blog.searchQuery == "acer v3 371"'>
  <!-- perintah di halaman pencarian -->
</b:if>
  
<!-- First Post saat index aktif -->
<b:if cond='data:post.isFirstPost'>
  <!-- perintah di post pertama -->
</b:if>

Untuk First Post, itu menandai bahwa pada daftar index, dia adalah yang pertama, jadi maksudnya bukanlah posting pertama.

Berikut ini beberapa kondisi gabungan dan bisa menggunakan operator logika seperti AND, OR, NOT, IN dan lain-lain.

<!-- Kondisi Gabungan -->
<b:if cond='data:blog.pageType in {"static_page", "item"}'>
  <!-- perintah halaman static dan item -->
</b:if>
  
<!-- Kondisi Gabungan not -->
<b:if cond='data:blog.pageType not in {"item","static_page"}'>
  <!-- perintah jika bukan halaman static dan item -->
</b:if>

Berikut ini contoh kondisi bertingkat sederhana:

<!-- Contoh kondisi lebih kompleks -->
<b:if cond='data:blog.pageType not in {"item","static_page"}'> 
  <b:if cond='data:post.title'>
 <!-- script perintah -->
  </b:if>
  <b:if cond='data:post.isFirstPost'> 
   <!-- script perintah -->
  </b:if>
<b:elseif cond='data:blog.pageType != "static_page"'/>
  <!-- perintah -->
</b:if>

Selain ditulis seperti semua format penulisan diatas, juga bisa langsung dimasukkan pada penulisan tag, untuk menghemat pengulangan perintah, perhatikan yang berikut ini:

<!-- Inject kondisi langsung pada tag html -->
<a class='label label-info' expr:href='data:post.url + "#comments"' expr:title='(data:post.numComments == 1 ? 1 : data:post.numComments) + " komentar"'><b:if cond='data:post.numComments == 1'>1<b:else/><data:post.numComments/></b:if></a>

Nah cukup untuk catatan agar tidak lupa. Sampai jumpa lagi.

UPDATE: Untuk conditional tag terbaru ada kode lebih pendek dan lebih mudah di kombinasi seperti berikut ini:

<b:if cond='data:view.isPost'>
 <!-- perintah -->
</b:if>

Kombinasi

<b:if cond='data:view.isPost or data:view.isPage'>
 <!-- perintah -->
</b:if>

<b:if cond='data:view.isPost and data:post.isFirstPost == "false"'>
 <!-- perintah -->
</b:if>

Dimasukkan dalam tag HTML sebagai class dengan b:class

<div class='entry-content'>     
 <b:class cond='not data:view.isPage' name='entry-content'/>
 ...
</div>

Conditional tag baru selengkapnya dibawah ini:

isSingleItem post and page true
isPage page true
isPost post true
isError 404 true
isMultipleItems homepage, archive, search, label true
isHomepage homepage true
isArchive archive true
isSearch search, label, true
isLabelSearch label true

Untuk melakukan test agar yakin saat akan melakukan perubahan kode pada halaman jenis tertentu bisa langsung saja kode dibawah ini di pasang di template bagian body, ini disembunyikan agar tak terlihat, tapi kita amati source halamannya, kalau sudah selesai oprek kode buang saja lagi.

<div style="display:none!important">
   data:view.isSingleItem =&gt; <data:view.isSingleItem/>
   data:view.isPage =&gt; <data:view.isPage/>
   data:view.isPost =&gt; <data:view.isPost/>
   data:view.isError =&gt; <data:view.isError/>
   data:view.isMultipleItems =&gt; <data:view.isMultipleItems/>
   data:view.isHomepage =&gt; <data:view.isHomepage/>
   data:view.isArchive =&gt; <data:view.isArchive/>
   data:view.isSearch =&gt; <data:view.isSearch/>
   data:view.isLabelSearch =&gt; <data:view.isLabelSearch/>
</div>