Lengkap Tag Conditional Blogger AMP dan Non AMP Terbaru dan Cara Menggunakannya

Lengkap Tag Conditional Blogger AMP dan Non AMP Terbaru dan Cara Menggunakannya
Andrie Kristianto - Lengkap Tag Conditional Blogger AMP dan Non AMP Terbaru dan Cara Menggunakannya. Conditional Tag adalah sebuah tag XML (XHTML) yang hanya bisa digunakan pada blogger. Di blogspot sendiri ada beberapa tag conditional yang bisa digunakan untuk kode / widget / tampilan tertentu di halaman tertentu juga. 

Jadi maksudnya dengan memasang conditional tag di blogger, kita bisa menentukan script / widget / tampilan mana saja yang ingin ditampilkan di halaman tertentu atau pada device tertentu. Contoh Widget Popular Post hanya ingin kita tampilkan di halaman postingan saja, maka ada tag conditional tertentu yang hanya menampilkan widget di halaman postingan. 

Setiap waktu kode tag conditional ini mengalami beberapa update, dan update versi terbaru ini pun terlihat lebih simple. Jika Ingin menggunakan versi terbaru atau versi lama pun tidak menjadi masalah, mungkin perbedaan mencolok hanya pada penggunaannya yang lebih simpel dan tidak dipanggil secara berulang dengan kode b:if. 

Secara umum Tag Conditional konsepnya seperti ini: 
<b:if cond='syarat_kondisi'>
<!-- kode perintah -->
</b:if>
syarat_kondisi tersebut bisa diganti dengan tag kondisional yang sudah ada di blogger saat ini, dan kode perintahnya diapit oleh tag b:if.

Nah langsung saja, berikut adalah tag conditional blogger yang dapat kamu gunakan baik versi terbaru atau versi lamanya.

1. Homepage ( Halaman Depan atau Halaman Utama )

Halaman Utama atau Halaman Depan Blog andrieid
Halaman depan atau halaman utama merupakan bagian dari halaman index yang dimana saat mengakses domain utama maka akan langsung diarahkan ke halaman ini. Biasa orang menyebutkan sebagai beranda blognya. 

Tag Conditional Versi Lama 
<b:if cond='data:blog.url == data:blog.homepageUrl'>
kode perintah / widget
</b:if>
Tag Conditional Versi Baru
<b:if cond='data:view.isHomepage'>
kode perintah / widget
</b:if>

2. Halaman Index

Lengkap Tag Conditional Blogger AMP dan Non AMP Terbaru dan Cara Menggunakannya
Halaman Index merupakan istilah yang digunakan untuk menyebutkan beberapa halaman yang berisi list daftar postingan blog. Pada halaman index ini biasanya halaman yang ditampilkan hanya berupaka summary atau ringkasan, dengan jumplink (read more atau page post number) untuk menampilkan postingan secara penuh. Ada beberapa tipe halaman index yaitu Halaman Utama, Halaman Label, Halaman Pencarian, dan Halaman Update. 

Untuk blog andrie.id sendiri hanya memiliki 2 halaman index yaitu Halaman utama dan halaman label, untuk halaman pencarian dan update tidak memiliki halaman sendiri melainkan pengunjung dapat melakukan pencarian atau melihat postingan terupdate langsung dari halaman yang ia akses. Jadi navigasi blog menjadi lebih mudah dan cepat. 

Tag Conditional Versi Lama
<b:if cond='data:blog.pageType == "index"'>
kode perintah / widget
</b:if>
Tag Conditional Versi Baru 
<b:if cond='data:view.isMultipleItems'>
kode perintah / widget
</b:if>

3. Halaman Item ( Halaman Postingan Blog )

Lengkap Tag Conditional Blogger AMP dan Non AMP Terbaru dan Cara Menggunakannya
Halaman Item merupakan nama lain untuk halaman postingan, yang tentu sudah pasti menampilkan keseluruhan artikel baik teks, gambar, tabel, serta widget tambahan lainnya. Halaman ini berbeda dengan halaman index, halaman index hanya ringkasan saja. 

Tag Conditional Versi Lama 
<b:if cond='data:blog.pageType == "item"'>
kode perintah / widget
</b:if>
Tag Conditional Versi Baru
<b:if cond='data:view.isPost'>
kode perintah / widget
</b:if>

4. Halaman Post atau Page ( Halaman Statis )

Lengkap Tag Conditional Blogger AMP dan Non AMP Terbaru dan Cara Menggunakannya
Halaman Post atau Page atau disebut sebagai halaman statis biasanya digunakan untuk menerbitkan page khusus seperti about me, contact me, privacy policy, sitemap, achievement, dan lain sebagainya. Halaman page ini tidak muncul di halaman index, namun bisa diakses dengan menuliskan URL Page khusus yang sudah ditentukan sebelumnya. 

Tag Conditional Versi Lama 
<b:if cond='data:blog.pageType == "static_page"'>
kode perintah / widget
</b:if>
Tag Conditional Versi Baru
<b:if cond='data:view.isPage'>
kode perintah / widget
</b:if>

5. Halaman Label atau Kategori Post

Lengkap Tag Conditional Blogger AMP dan Non AMP Terbaru dan Cara Menggunakannya

Halaman Label merupakan sebuah halaman yang menampilkan ringkasan postingan blog berdasarkan label atau kategori yang dipilih. Misalnya pada blog andrie.id terdapat label blog Blogger, Sosial Media, Tutorial, Template Blog, Aplikasi, dan lain sebagainya. 

Tag Conditional Versi Lama 
<b:if cond='data:blog.searchLabel'>
kode perintah / widget
</b:if>
Tag Conditional Versi Baru
<b:if cond='data:view.isLabelSearch'>
kode perintah / widget
</b:if>

6. Halaman Search ( Halaman Pencarian )

Lengkap Tag Conditional Blogger AMP dan Non AMP Terbaru dan Cara Menggunakannya
Halaman pencarian merupakan halaman yang bisa pengunjung gunakan untuk mencari artikel yang sebelumnya pernah dikunjungi namun berada di page yang jauh. Dengan menggunakan halaman ini pengunjung dapat menemukan artikel yang ia cari dengan menggunakan tombol search yang sudah disediakan oleh pemilik blog.

Namun untuk blog Andrie Kristianto sendiri tidak memberikan halaman khusus untuk pencarian ini, karena blog andrie.id sudah menyediakan icon pencarian yang berada di header menu blog dan pengunjung pun bisa langsung mengetikkan di form pencarian tersebut. 

Tag Conditional Versi Lama
<b:if cond='data:blog.searchQuery'>
kode perintah / widget
</b:if>
Tag Conditional Versi Baru
<!-- Termasuk halaman pencarian label -->
<b:if cond='data:view.isSearch'>
kode perintah / widget
</b:if>

<!-- Hanya halaman pencarian -->
<b:if cond='data:view.isSearch and !data:view.isLabelSearch'>
kode perintah / widget
</b:if>

7. Halaman Archive ( Halaman Arsip )

Lengkap Tag Conditional Blogger AMP dan Non AMP Terbaru dan Cara Menggunakannya
Tidak jauh berbeda dengan halaman index sebelumnya, pada halaman arsip ini juga menampilkan ringkasan postingan blog. Namun yang menjadi pembedanya adalah pada halaman arsip hanya menampilkan postingan berdasarkan tahun atau bulan tertentu, misalnya ingin menampilkan postingan blog yang diterbitkan pada tahun 2020  atau pada tahun 2019, dan lain sebagainya. 

Tag Conditional Versi Lama
<b:if cond='data:blog.pageType == "archive"'>
kode perintah / widget
</b:if>
Tag Conditional Versi Baru 
<b:if cond='data:view.isArchive'>
kode perintah / widget
</b:if>

8. Halaman 404 ( Halaman Error atau Halaman Tidak Ditemukan )

Lengkap Tag Conditional Blogger AMP dan Non AMP Terbaru dan Cara Menggunakannya
Halaman 404 atau halaman error ini akan menampilkan semua halaman yang tidak ditemukan, halaman tidak ditemukan ini bisa jadi postingan yang masih dalam masa update sehingga disimpan sebagai draft, atau postingan yang dihapus, atau halaman error lainnya. 

Tag Conditional Versi Lama
<b:if cond='data:blog.pageType == "error_page"'>
kode perintah / widget
</b:if>
Tag Conditional Versi Baru
<b:if cond='data:view.isError'>
kode perintah / widget
</b:if>

9. Halaman Pratinjau ( Halaman Priview )

Lengkap Tag Conditional Blogger AMP dan Non AMP Terbaru dan Cara Menggunakannya
Halaman Pratinjau atau priview ini menampilkan halaman contoh simulasi atau gambaran halaman yang ingin dimuat. Halaman pratinjau ini biasanya hanya bisa dilihat atau diakses oleh pemilik blog saja, dan URL halaman pratinjau ini biasanya terdiri atas url yang tidak berurutan dan ekstensi domainnya adalah blogspot. 

Tag Conditional Versi Lama
<!-- Belum ada -->
Tag Conditional Versi Baru
<b:if cond='data:view.isPreview'>
kode perintah / widget
</b:if>

10. Halaman Post dan Page ( Halaman Postingan dan Statis )

Lengkap Tag Conditional Blogger AMP dan Non AMP Terbaru dan Cara Menggunakannya
Jika ingin menampilkan tag conditional untuk halaman postingan dan halaman page statis, dapat menggunakan tag gabungan seperti dibawah ini. Jadi widget yang ditelakkan dalam tag ini maka widget tersebut akan tampil atau muncul dalam halaman statis ataupun postingan blog. Seperti contoh saja widget yang biasa menggunakan tag conditional ini seperti Author profile blog yang berada di akhir artikel blog.

Tag Conditional Versi Lama 
<b:if cond='data:blog.pageType in ["item", "static_page"]'>
kode perintah / widget
</b:if>
Tag Conditional Versi Baru
<b:if cond='data:view.isSingleItem'>
kode perintah / widget
</b:if>

11. Deklarasi NOT, AND, OR 

a.  NOT 
Penggunakan deklarasi not ini merupakan sebuah kondisi dimana kita tidak ingin menampilkan widget tertentu kedalam tag kondisional yang dipilih. Misalnya saja widget popular post tidak ingin saya tampilkan di Homepage blog, maka kodenya menjadi seperti ini:

Tag Conditional Versi Lama 
<b:if cond='data:blog.url != data:blog.homepageUrl'>
kode perintah / widget
</b:if>
Mengubah simbol ( == menjadi ( != ).

Tag Conditional Versi Baru
<b:if cond='!data:view.isHomepage'>
kode perintah / widget
</b:if>
Menambahkan simbol tanda seru ( ! ) pada awal tag kondisi.

b. AND 
Agar kode menjadi lebih praktis dan simpel, tag conditional blogger dapat dijadikan satu. Misalnya saja ingin menampilkan widget di beberapa halaman blog namun ingin menggunakan satu tag conditional saja, bisa! Hal ini bisa dilakukan dengan menggunakan deklarasi AND

Tag Conditional Versi Lama
<!-- belum ada --> Tag Conditional Versi Baru 
<b:if cond='!data:view.isPost and data:view.isMultipleItems'>
kode perintah / widget
</b:if>

c. OR
Kita bisa menggunakan deklarasi or untuk menggabungkan banyak syarat atau kondisi sekaligus, biasanya kan kita menambahkan kode b:if secara berulang. Misalnya saya ingin menampilkan widget hanya di halaman postingan, statis, dan homepage saja. Jadi untuk halaman lainnya tidak akan muncul widget ini, caranya:

Penggunaan Tag Conditional Cara Lama 
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
kode perintah / widget
</b:if>
</b:if>
</b:if>
Penggunaan Tag Conditional Cara Baru / Simpel 
<b:if cond='data:blog.pageType == "item" || data:blog.pageType == "static_page" || data:blog.url == data:blog.homepageUrl'>
kode perintah / widget
</b:if>

Selamat Mencoba ya. Terima kasih. 
Tambahkan Komentar

12 Komentar

  • Himawan Sant 4/22/2020 9:30 AM ?
    Keren, keren ...
    Pembahasannya memang keren.

    Dari kesemua perubahan tampilan blog amp dan non amp terbaru, aku paling suka tampilan Halaman Post atau Page.
    Begitu diakses, tetiba nongol halamn gede foto diri 😁
    • Andrie Kristianto 4/22/2020 9:53 AM ?
      Sekarang sudah di update mas, fotonya tidak akan muncul di halaman postingan atau halaman statis, untuk tidak menampilkan itu saya menggunakan tag conditional versi baru. Jadi menambahkan tanda seru di awal kondisinya heheh..
  • Azhafizah MN 4/22/2020 3:32 PM ?
    sangat details perkongsian ni. Ada kalanya pening juga tengok code code ni semua. Apapun terima kasih atas ilmunya.
  • Agus Warteg 4/23/2020 11:25 AM ?
    Kalo aku perhatikan ada tag yang harus disertakan yaitu is ya mas Andrie, contohnya tuh isHomepage, atau isError gitu.

    Tapi belum mengerti seluruhnya sih, pakai tag bawaan blogger saja deh.
  • Liputan Bungbulang 4/30/2020 8:49 AM ?
    Keren

    https://media.asro.net/
  • Arenapublik 4/30/2020 7:22 PM ?
    keren sampai se detail ini mas haha. jadi bngung kalau melihat mendalam
  • Roni 4/30/2020 9:44 PM ?
    Memang sangat bermanfaat jika menggunakan tag kondisional ini untuk menyembunyikan widget di halaman-halaman tertentu dalam blog
  • Ninda 5/01/2020 1:25 AM ?
    detail sekali...
    tapi bingung sih karena saya ngga gitu ngerti coding
  • Afriant Ishaq 5/02/2020 11:50 AM ?
    Kode perintah ini di isi dengan apa Mas?

    Kebetulan theme yang Aku gunakan adalah versi AMP.

    Aku sedikit bingung dengan penjelasan di atas.
    • Andrie Kristianto 5/05/2020 6:12 AM ?
      Blog AMP dan NON AMP sampai saat ini yang saya tahu tidak ada perbedaan untuk tag conditional ini.. Untuk kode perintahnya itu bisa diisi dengan widget yang ingin ditampilkan, misalnya widget popular-post , label, archive dan lain sebagainya.
  • Wira Wijaya 5/17/2020 8:23 AM ?
    Wah bagus banget penjelasannya mas. Tampilan blognya juga sudah berubah semenjak saya melakukan bw untuk pertama kali disini
  • Alfan Ismail 5/30/2020 9:06 AM ?
    mantap mas..sangat informatif dan detail sekali...
Cancel

Jangan Lupa follow blog ini, silahkan klik disini ya.. Terima Kasih sudah berkunjung.