Kunjungi Blog terbaru saya corkismet - Coretan Kang Ismet - dan tinggalkan jejak sobat disana.

Tag Kondisional Halaman Tertentu pada AMP HTML

Pengunaan Tag Kondisional pada halaman tertentu pada AMP HTML Blogger.
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.

Logika sederhana untuk membuat halaman tertentu dengan style berbeda, yaitu buat CSS untuk halaman tersebut kemudian buat pengecualian pada CSS static page.

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...

Untuk mendapatkan update terbaru di Dasbor Blogger, silahkan ikuti Blog ini

Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
Oops!
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
Site is Blocked
Sorry! This site is not available in your country.