Menggunakan Conditional Tag untuk Widget di Blogger AMP


Apa itu conditional tag?

Conditional tag adalah sebuah tag XML (XHTML) yang hanya digunakan pada Blogger. Tag ini berfungsi seperti fungsi IF. Jadi dengan menggunakan conditional tag, kode di template blog bisa dijalankan pada kondisi tertentu saja. Sebagai contoh blog ini, terdapat banyak kode AMP HTML yang hanya dijalankan pada "mobile mode".

Conditional tag memungkinkan sebuah perintah dijalankan hanya pada kondisi tertentu saja. Bentuk umum conditional tag adalah:

<b:if cond='syarat_kondisi'>
  <!-- kode perintah -->
</b:if>

Tinggal mengganti syarat_kondisi dengan berbagai kondisi yang disediakan oleh Blogger. Kondisi tersebut dapat mewakili setiap halaman yang ada di blog. Untuk lebih lengkapnya kamu bisa baca di Cara Menggunakan Conditional Tag di Blogger.

Conditional tag di blog AMP

Bagi kamu pengguna blog yang AMP HTML, khususnya di Blogger, tentu jika melakukan modifikasi pada kode HTML blog, maka tentu tidak asing dengan data:blog.isMobileRequest. Kalau belum, mari berkenalan dulu.

Pada conditional tag, terdapat kondisi cond='data:blog.isMobileRequest == "true"' dimana kondisi tersebut menunjukkan bahwa jika halaman dibuka pada perangkat mobile seperti smartphone. Jadi pada kondisi tersebut, perintah yang ada dalam tag nya hanya akan dijalankan jika halaman dibuka di perangkat mobile.

Conditional tag untuk widget di blog AMP

Penggunaan conditional tag untuk widget pada Blogger yang menggunakan template AMP HTML artinya mengatur sebuah widget agar tampil/tidak tampil pada saat blog dibuka di perangkat mobile. Pertanyaannya sekarang adalah, di mana tempat meletakkan conditional tag tersebut?

Untuk mengatur conditional tag pada widget di Blogger caranya yaitu cukup dengan menambahkan atribut pada tag widget tersebut. Misalnya, secara umum kode untuk sebuah widget adalah:

<b:widget id='HTML1' 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 atribut cond='data:blog.isMobileRequest == "true"' setelah nama tag b:widget. Kemudian mengganti simbol kutip ganda " dengan &quot;. Sehingga kode di atas terlihat seperti:

<b:widget cond='data:blog.isMobileRequest == "true"' id='HTML1' 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>

Ganti nilai true dan false sesuai kebutuhan kamu. Nilai true artinya untuk perangkat mobile dan false berarti untuk perangkat non-mobile seperti PC.

Menghilangkan quickedit

Salah satu yang dapat menyebabkan error AMP HTML adalah adanya quickedit. Jadi setelah menambahkan widget baru coba periksa HTML blog kamu, cari dan hapus kode <b:include name='quickedit'/> lalu simpan hasilnya.

Itulah cara yang bisa kamu coba untuk menggunakan Conditional pada widget di Blogger. Semoga artikel ini bisa bermanfaat. Jika ada hal yang kurang jelas, maka jangan sungkan untuk menyampaikannya pada komentar di bawah. Terima kasih dan sampai jumpa!
Disqus Comments