Logika Pengingkaran Pada Tag Kondisional

Untuk menciptakan kondisi berbeda pada postingan, komentar, homepage dll biasanya kita menggunakan tag kondisional. Dalam tag kondisional ada yang disebut dengan pengingkaran yang ditandai dengan ! (tanda seru).tanda seru

Contoh pembuka tag kondisional pada halaman posting

<b:if cond='data:blog.pageType == &quot;item&quot;'>

kode di atas artinya apabila halaman posting maka.... adapun kode seperti dibawah ini adalah sebaliknya

<b:if cond='data:blog.pageType != &quot;item&quot;'>

artinya apabila selain halaman posting... (perbedaannya terletak pada tanda seru).

Tag kondisional kadang diperlukan hanya satu saja, terkadang juga diperlukan berikut pengingkarannya. Hal ini tentunya ada beberapa tujuan seperti mempercepat loading, menyembunyikan objek tertentu dll.

Dibawah ini akan coba saya jelaskan 2 contoh penggunaan logika pengingkaran pada tag kondisional yang saya gunakan di blog ini.

Contoh 1 : Halaman Error 404

Tujuan disertakannya pengingkaran pada halaman error 404 (tidak ditemukan) adalah untuk mempercepat loading halaman. Mungkin sobat pernah mengunjungi halaman error yang lambat diakses? itu karena tidak disertakannya pengingkaran, sehingga header, navigasi, sidebar, footer, tetap dibaca oleh browser walaupun menggunakan display:none.

error 404

Untuk lebih memahaminya, dibawah ini contoh HTML blog, saya ambil dari tag <body>

<body>
  <div id='header'/>
  <div id='outer-wrapper'>
    <div id='main-wrapper'>
      <article id='post hentry'/>
      <sidebar id='sidebar'/>
    </div>
  </div>
</body>

Kemudian Anda menambahkan tag kondisional error_page sebelum </body> maka kode menjadi seperti ini

<body>
  <div id='header'/>
  <div id='outer-wrapper'>
    <div id='main-wrapper'>
      <article id='post hentry'/>
      <sidebar id='sidebar'/>
    </div>
  </div>
  <b:if cond='data:blog.pageType == &quot;error_page&quot;'>
    <div id='error-page'>
      <h1>Halaman tidak ditemukan</h1>
    </div>
  </b:if>
</body>

Walaupun Anda telah menyembunyikan beberapa elemen, tetap elemen itu akan dirender oleh browser. Maka yang terjadi adalah akses yang lambat. Untuk mempercepat loading halaman ini, maka tambahkan kode pengingkaran pada elemen yang tidak ingin ditampilkan. Hasilnya seperti ini :

<body>
  <b:if cond='data:blog.pageType != &quot;error_page&quot;'>
  <div id='header'/>
  <div id='outer-wrapper'>
    <div id='main-wrapper'>
      <article id='post hentry'/>
      <sidebar id='sidebar'/>
    </div>
  </div>
  </b:if>
  <b:if cond='data:blog.pageType == &quot;error_page&quot;'>
    <div id='error-page'>
      <h1>Halaman tidak ditemukan</h1>
    </div>
  </b:if>
</body>


Contoh 2 : Deleted Comments

Mungkin Anda pernah melihat blok merah tanda komentar telah dihapus pada blog ini.

deleted comments

Contoh di atas, tidak menyertakan avatar, isi komentar, tombol reply dsb. Ini juga menggunakan pengingkaran.

Pada kasus ini tidak menggunakan tanda seru (!) sebagai pengingkaran, tapi dengan <b:else/> karena pada tag kondisional deleted comment tidak ada tanda = atau !.

Untuk penempatannya, saya kira Anda sudah faham dengan penjelasan saya diatas. Dibawah ini saya buat gambaran HTML pada komentar beserta penempatan tag kondisionalnya.

<b:if cond='data:comment.isDeleted'>
  <b:else/>
    <div class='comment-header'/>
    <div class='comment-body'>
     <data:comment.body/>
    </div>
    <div class='comment-reply'>
</b:if>
<b:if cond='data:comment.isDeleted'>
  <span class='deleted-comment'>
    <data:comment.body/>
  </span>
</b:if>

Manipulasi deleted comment ini hanya bisa dilakukan pada Threaded Comments Hack.
Disqus Comments