Tag Kondisional Halaman Tertentu pada AMP HTML

Untuk penggunaan tag kondisional, sebenarnya tidak jauh berbeda dengan postingan saya terdahulu (Baca: Tag Kondisional dan Cara Penggunaannya). Akan tetapi ketika akan mengaplikasikan pada AMP HTM, tentunya harus memperhatikan aturan-aturan pada AMP HTML.

Diantara aturan AMP HTML adalah tidak boleh ada 2 style custom dalam 1 halaman. Artinya, ketika menggunakan tag kondisional dengan CSS seperti biasa, akan mengakibatkan error pada validasi AMP HTML.


Untuk lebih jelasnya, kita ambil sample Template AMP HTML yang saya bagikan. disana ada 3 Blok CSS. lihat screenshoot :

<b:if cond='data:blog.pageType != &quot;item&quot; and data:blog.pageType != &quot;static_page&quot;'>...</b:if>
adalah tag konisional untuk homepage 
<b:if cond='data:blog.pageType == &quot;item&quot;'>...</b:if>
adalah tag konisional untuk halaman posting (item)
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>...</b:if>
adalah tag konisional untuk halaman statis

Skenarionya, Tambahkan tag kondisonal URL tertentu, kemudian buat pengecualian pada Tag kondisional Static Page. Jadinya kurang lebih seperti ini.

<b:if cond='data:blog.pageType != &quot;item&quot; and data:blog.pageType != &quot;static_page&quot;'>...</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>...</b:if>
<b:if cond='data:blog.pageType == &quot;static_page&quot; and data:blog.url != &quot;URL-HALAMAN-STATIS&quot;'>...</b:if>
<b:if cond='data:blog.url == &quot;URL-HALAMAN-STATIS&quot;'>...</b:if>

Silahkan Edit / Costumize pada halaman Statis yang akan kita bedakan tampilannya. Sebagai contoh, ini halaman standar yang sama dengan halaman lainnya :


Ini halaman yang dimodifikasi background dengan tag kondisional :


Apabila ingin tutorial yang lebih detail, silahkan simak video dibawah ini



Semoga bermanfaat...