Kumpulan dan Cara Penggunaan Tag Konditional Pada Bloggspot

Hay sobat awb, thread kali ini mimin mau mengangkat macam-macam tag konditional dan bagaimana cara menerapkannya pada blogspot!. Seperti yang kita tau bahwa tag konditional ini dapat juga digunakan sebagai alternatif meningkatkan loading blog atau lebih tepatnya meringankan waktu load laman. Dengan menggunakan tag ini, kita dapat mengubah atau menentukan letak serta tampilan blog di setiap selektor page. Selain itu juga dapat menunda atau menghalangi lebih tepatnya menyembunyikan class atau element yang tidak diperlukan pada beberapa sektor page untuk dimuat.

Karena ribet saya menjelaskan jadi saya berikan contoh sederhananya saja.

Pada sebuah template terdapat laman homepage, laman statis, laman arcive, dan laman error/ error page. Pada setiap laman ini menggunakan tag konditional untuk menentukan sektor page/element  mana yang harus ditampailkan dan sektor page mana yang disembunyikan. 

Pada umumnya jika kita membuat laman error page, maka kita harus memasukan markum html kedalam tag konditional error page. nah untuk cssnya biasanya sudah ada di bagian styleshet css yang digabung dengan seluruh css template blog. Nah pada kondisi ini maka ketika browser memuat laman tersebut (error page) maka yang termuat pada seluruh bagian blog seperti seluruh css blog dan seluruh js blog. Nah pada kondisi inilah browser membutuhkan waktu untuk merreder/memuat semuanya element.

Nah pada kondisi inilah redder laman akan membaca seluruh element page, untuk mengatasinya kita optimalkan redder laman tersebut menggunakan tag konditional error page, agar yang terreder hanyalah element error page saja dan untuk laman selain error pege tidak akan terreder. peletakan tag konditional ini dapat kita letakan dibawah markup </head> atau diatas markup </body>

Nah berikut ini macam-macam tag konditional pada blogspot:

<b:if cond='data:blog.url == data:blog.homepageUrl'>
MENAMPILKAN OBJEK HOMEPAGE
CSS, HTML, SCRIPT
DISINI
</b:if>

atau

<b:if cond='data:blog.url != data:blog.homepageUrl'>
MENYEMBUNYIKAN OBJEK DARI HOMEPAGE/Selain Homepage
CSS, HTML , SCRIPT
DISINI
</b:if>

Jika dicermati pada tag diatas yang membedakan adalah tanda "==" dan tanda "!". Arti dari kedua tanda ini adalah
"==" menampilkan bagian tag dan
"!" menyembunyikan bagian atau element tag.

Untuk bentuk sederhanya adalah sebagai berikut:

<b:if cond='Jenis Tag'>
OBJEK
CSS, HTML, SCRIPT
DISINI
</b:if>

Untuk bentuk lainya adalah sebagai berikut:

Halaman Item

Halaman Item atau bisa kita sebut halaman posting atau postpage

<b:if cond='data:blog.pageType == &quot;item&quot;'>
OBJEK
CSS, HTML, SCRIPT
DISINI
</b:if>

Halaman statis

Halaman statis adalah halaman khusus dari blogger.
Halaman ini tidak akan masuk dalam arsip blog walaupun di publish. Ciri dari halaman statis adalah adanya tanda p pada url halamannya.

<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
OBJEK
CSS, HTML, SCRIPT
DISINI
</b:if>

Halaman Indeks

Semua jenis Halaman selain halaman postingan misalkan laman search, laman label dan laman arsip.

<b:if cond='data:blog.pageType == &quot;index&quot;'>
OBJEK
CSS, HTML, SCRIPT
DISINI
</b:if>

Halaman Label Tertentu

Halaman label adalah halaman hasil sortir dengan dikuti dengan search/label/nama_label. dimana anda bisa menampilkan atau bisa juga menyembunyikannya
Contoh:
https://agus-wijianto.blogspot.co.id/search/label/Tutorial

<b:if cond='data:blog.searchLabel == &quot;Tutorial&quot;'>
OBJEK
CSS, HTML, SCRIPT
DISINI
</b:if>

Halaman Kesalahan atau Error Page 404

Halaman ini adalah halaman yang tidak ada atau hilang.URL yang tidak benar dan mengarah kepada sesuatu yang tidak pernah ada pada blog kita.
Contoh: https://agus-wijianto.blogspot.co.id/blog gaul

<b:if cond='data:blog.pageType == &quot;error_page&quot;'>
OBJEK
CSS, HTML, SCRIPT
DISINI
</b:if>

Halaman Search atau Pencarian

Contoh halaman pencarian: https://blogsaya.blogspot.com/search?q=blogger

<b:if cond='data:blog.searchQuery'>
OBJEK
CSS, HTML, SCRIPT
DISINI
</b:if>

Halaman search dengan kata kunci tertentu

Bagian yang akan muncul di halaman search dengan memiliki kata kunci tertentu.

<b:if cond='data:blog.searchQuery == &quot;Kata Kunci&quot;'>
OBJEK
CSS, HTML, SCRIPT
DISINI
</b:if>

Halaman Url Tertentu (Khusus).

Fungsinya untuk menampilkan ISI OBJEK pada halaman tertentu. Dengan cara memasukkan url halamannya. Url hanya berfungsi dengan menggunakan domain blogspot.com dan protokol harus sesuai, maksudnya SSL blog diaktifkan atau tidak. Jika iya maka harus menggunakan https. Kalau menggunakannya tidak dengan blogspot.com dan protokol tidak sesuai maka tag akan gagal.

Contoh: https://agus-wijianto.blogspot.co.id/2017/01/tag-konditional-cara-penggunaannya.html.
atau gunakan /2017/01/tag-konditional-cara-penggunaannya.html

<b:if cond='data:blog.url == &quot;Url halaman&quot;'>
OBJEK
CSS, HTML, SCRIPT
DISINI
</b:if>

Untuk multi urlnya:

<b:if cond='data:blog.url in {&quot;Url halaman 1&quot;,&quot;Url halaman 2&quot;,&quot;Url halaman seterusnya&quot;}'>
OBJEK
CSS, HTML, SCRIPT
DISINI
</b:if>

Perhatikan ada tanda titik koma ";" sebagai pemisah.

Tag Konditional untuk versi mobile

Saya tambahkan tag untuk mengatur tampilan mobile. Yang membuat berbedaan antara tampilan di komputer dan smartphone.
Tag dalam mobile

<b:if cond='data:blog.isMobileRequest == &quot;true&quot;'>
OBJEK
CSS, HTML, SCRIPT
DISINI
</b:if>

Tag luar/selain mobile

<b:if cond='data:blog.isMobileRequest == &quot;false&quot;'>
OBJEK
CSS, HTML, SCRIPT
DISINI
</b:if>

Sekian semoga thread kali ini dapat bermanfaat.