Tag Kondisional Halaman Blogger 2017

Tabel Konten
  1. Tag Kondisional Halaman Muka 
    1. Versi Baru 
    2. Versi Lama 
  2. Tag Kondisional Halaman Indeks 
    1. Versi Baru 
    2. Versi Lama 
  3. Tag Kondisional Halaman Item 
    1. Versi Baru 
    2. Versi Lama 
    3. Tag Kondisional Halaman Posting 
      1. Versi Baru 
      2. Versi Lama 
    4. Tag Kondisional Halaman Statis 
      1. Versi Baru 
      2. Versi Lama 
  4. Tag Kondisional Halaman Label 
    1. Versi Baru 
    2. Versi Lama 
  5. Tag Kondisional Halaman Arsip 
    1. Versi Baru 
    2. Versi Lama 
  6. Tag Kondisional Halaman Pencarian 
    1. Versi Baru 
    2. Versi Lama 
  7. Tag Kondisional Halaman Kesalahan 
    1. Versi Baru 
    2. Versi Lama 
  8. Tag Kondisional Halaman Pratinjau 
    1. Versi Baru 
    2. Versi Lama 
  9. Terkait 
  10. Lain Lain 

Blogger memperkenalkan beberapa tag kondisional halaman baru yang semua propertinya bersarang pada grup view. Di sini Saya tidak akan menjelaskannya secara panjang lebar karena tag kondisional ini sebenarnya sangat mudah untuk dipahami.

Tag Kondisional Halaman Muka 

Versi Baru 

<b:if cond='data:view.isHomepage'> … </b:if>

Versi Lama 

<b:if cond='data:blog.url == data:blog.homepageUrl'> … </b:if>

Tag Kondisional Halaman Indeks 

Versi Baru 

<b:if cond='data:view.isMultipleItems and !data:view.isArchive'> … </b:if>

Versi Lama 

<b:if cond='data:blog.pageType == "index"'> … </b:if>

Tag Kondisional Halaman Item 

Versi Baru 

<b:if cond='data:view.isSingleItem'> … </b:if>

Versi Lama 

<b:if cond='data:blog.pageType in ["item", "static_page"]'> … </b:if>

Tag Kondisional Halaman Posting 

Versi Baru 

<b:if cond='data:view.isPost'> … </b:if>

Versi Lama 

<b:if cond='data:blog.pageType == "item"'> … </b:if>

Tag Kondisional Halaman Statis 

Versi Baru 

<b:if cond='data:view.isPage'> … </b:if>

Versi Lama 

<b:if cond='data:blog.pageType == "static_page"'> … </b:if>

Tag Kondisional Halaman Label 

Versi Baru 

<b:if cond='data:view.isLabelSearch'> … </b:if>

Versi Lama 

<b:if cond='data:blog.searchLabel'> … </b:if>

Tag Kondisional Halaman Arsip 

Versi Baru 

<b:if cond='data:view.isArchive'> … </b:if>

Versi Lama 

<b:if cond='data:blog.pageType == "archive"'> … </b:if>

Tag Kondisional Halaman Pencarian 

Versi Baru 

<!-- Termasuk halaman pencarian label -->
<b:if cond='data:view.isSearch'> … </b:if>

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

Versi Lama 

<b:if cond='data:blog.searchQuery'> … </b:if>

Tag Kondisional Halaman Kesalahan 

Versi Baru 

<b:if cond='data:view.isError'> … </b:if>

Versi Lama 

<b:if cond='data:blog.pageType == "error_page"'> … </b:if>

Tag Kondisional Halaman Pratinjau 

Versi Baru 

<b:if cond='data:view.isPreview'> … </b:if>

Versi Lama 

 

Terkait 


Lain-Lain 

  • data:view.urldata:blog.url
  • data:view.search.querydata:blog.searchQuery
  • data:view.isLayoutMode → ?

Tulis masukan dan saran di bawah! ↓↓↓

46 Komentar

  • IRIL SAGITA

    Malam kak, saya masih bingung dengan Tag Kondisional Halaman Pratinjau itu maksutnya gimana ya, mohon penjelasannya ?

    • Giri Diwa Adam

      Setau saya Tag Kondisional Halaman Pratinjau itu untuk melihat hasil template desainan kita ketika di dalam blogger . Pratinjau itu sendiri gunanya untuk mempermudah kita jika kita membuat desgin tertentu.

    • Taufik Nurrohman

      Kemungkinan itu untuk tampilan blog saat kamu mengeklik tombol Pratinjau, baik pada editor tema ataupun editor posting. Saya sendiri belum mengetes. Coba tambahkan kode ini di bawah tag <body> untuk mengetes:

      <b:if cond='data:view.isPreview'>
      <mark>Preview Mode</mark>
      </b:if>
      • Khatami

        tapi untuk template bisa di live pratinjau juga kah? kalao yg postingan memang sejak lama sudah ada fitur pratinjaunya

    • Igoy Nawamreh

      Ya, itu bekerja di semua halaman pratinjau. Contoh pemanfaatan tag kondisional ini adalah untuk menyembunyikan atau menampilkan apapun di halaman pratinjau.

  • Detifa

    kondisi hanya untuk menampilkan atau tidak menampilan sesuatu dihalaman pertinjauan (preview) blog,

    biasanya tombolnya ada disaat lagi dihalaman nulis misalnya liat pertinjauan, atau pada saat edit tema dihalaman bloggernya langsung itu biasanya kondisinya berfungsi.

    biasanya kodenya dipakai untuk hanya menampilkan atau menghilangkan widget dihalaman pertinjauan agar lebih cepat loadingnya mungkin soalnyakan kalau kita nulis kadang dilihat dulu tulisannya rapih atau tidak hehe mungkin itu yang saya tau..

  • Igoy Nawamreh

    Untuk data:view.isLayoutMode menurut Saya ini sangat berguna sekali, terutama untuk menyembunyikan widget di halaman beranda (bukan hanya menyembunyikan widget-nya saja, tapi menyembunyikan <b:section></b:section>).

    Seperti yang kita ketahui jika kita menyembunyikan <b:section></b:section> di halaman beranda, maka bagian ini tidak akan tampil di halaman Dashboard => Layout. Bisa kita atasi dengan menggunakan tag kondisional data:view.isLayoutMode.

    Berikut adalah contoh untuk menampilkan bagian widget hanya di halaman posting:

    <b:if cond='data:view.isPost or data:view.isLayoutMode'>
    <b:section></b:section>
    </b:if>
    • Taufik Nurrohman

      Oh, jadi ini fungsinya untuk mempertahankan tampilan blok penambah widget di halaman Tata Letak meskipun sudah dikondisikan dengan tag kondisional front-end ya mas?

      data:view.isPost or data:view.isLayoutMode → hanya tampil di halaman posting, atau di halaman Tata Letak.

      • Igoy Nawamreh

        Hanya tampil di halaman posting, atau di halaman Tata Letak. :-bd

      • Igoy Nawamreh

        :yaya: "Untuk mempertahankan tampilan blok penambah widget di halaman Tata Letak meskipun sudah dikondisikan dengan tag kondisional front-end" :yaya:

        Dengan hadirnya tag-tag baru, seperti tag kondisional halaman ini dan lainnya, seharusnya kita sudah bisa untuk membuat template yang super keren, lebih menarik, lebih kompleks, mudah digunakan.

        • Taufik Nurrohman

          Bukan cuma dari sisi front-end tapi juga dari sisi back-end. Para pembuat tema komersial Blogger sepertinya akan mulai memperhatikan tag kondisional ini ;)

      • Riedayme

        ini permasalahn saya waktu menghilangkan beberapa widget dihalaman homepage, ternyata menggunakan ini toh, makasih banyak mas hehe jadi nambah ilmu lagi nih

  • Iwan Efendi

    Makasih banyak mas, sudah lama gak mampir ada artikel baru rupanya. :p

  • Soma Anggoro

    lalu untuk membedakan == sama != gimana mas taufik?

    • Taufik Nurrohman

      Ini positif:

      <b:if cond='data:view.isArchive'> … </b:if>

      Ini negatif:

      <b:if cond='!data:view.isArchive'> … </b:if>
      <b:if cond='not data:view.isArchive'> … </b:if>
  • Miras Tampan

    Kak kalo misal kita mencampur tag kondisional baru dengan yang lama apa ada kesalahan yang serius?

    • Taufik Nurrohman

      Menuliskan sintaks lama ke templat versi baru tidak masalah karena untuk ukuran platform dengan begitu banyak pengguna pasti memiliki mekanisme backward compatibility tersendiri. Tapi menuliskan sintaks baru pada templat versi lama akan menimbulkan kesalahan, karena sintaks di zaman dahulu belum mengenal sintaks yang sekarang. Istilah mudahnya, manusia tidak bisa menerapkan teknologi masa depan ke teknologi masa lalu, tapi manusia bisa menerapkan teknologi masa lalu ke teknologi masa depan dengan beberapa penyesuaian.

  • Arief Ghozaly

    Mas izin bertanya :D
    kalau di dalam template blogger masih menggunakan tag kondisional versi lama, nggak masalah kan?

    kebetulan saya lagi bikin template untuk pribadi, gayanya simple, putih nan bersih, rencananya sih mau di jual juga :D

    • Muhammad Nur Fuad

      Ngak masalah kok, mau dicampur juga bisa. Btw lebih indah jika jangan dicampur. Biar rapi

  • Kupang tech news

    Sangat bermanfaat,akhirnya dapat tempat yang cocok buat belajar desain template blogspot, untuk para master salam kenal.

  • Unknown

    Kak Ajarin Buat Tools Web Mini Kak Aku Gak Tau Script Nya

  • Kardinata

    Nice mas. Tambahan sedikit. data:view.isMultipleItems disini mewakili untuk halaman index dan arsip(bukan hanya halaman index).

  • Kardinata

    Tepat mas. Tag kondisional lama data:page.type == 'index' tidak termasuk arsip (hanya index). Sedangkan data:view.isMultipleItems , ini termasuk index dan arsip. Bisa diupdate postnya untuk bagian "Tag Kondisional Halaman Indeks". Bisa pake value data:view.type == 'feed' atau data:view.isMultipleItems and !data:view.isArchive.

  • Aqshal Tata

    Kalau untuk halaman mobile ada ga tag kondisionalnya yang baru?

  • Kiddy Dot ID

    apa perbedaan item dan posting ?

    • Taufik Nurrohman

      Posting itu item, tapi item tidak selalu posting. Bisa juga halaman statis.

  • Anam

    Jika digunakan berdasarkan tahun postinga bisa ya? Postingan Tahun 2017 akan beda dg tahun 2018

    • Taufik Nurrohman

      Saat ini cuma bisa dengan selektor atrubut di CSS:

      <article class='post' expr:data-url='data:post.url'> … </article>
      .post[data-url*="/2018/"] {
      background-color:#b4d455;
      color:#f5f5f5;
      }
  • Pulung

    Mas ada tag khusus ngga untuk menyembunyikan bebarapa gambar postingan agar tidak ikut terindex di mesin pencarian? maturnuwun

  • Yuli Akbar

    kang,ada gak tag kondisional hanya admin yang bisa melihat tetapi pembaca gak bisa liat. seperti icon quickedit pada template version lama? saya lagi nyari tag kondisional ini

    • Taufik Nurrohman

      Saya coba carikan caranya kalau ada waktu. Harusnya nggak akan lebih rumit dari ini:

      <b:if cond='data:blog.adminClass'> … </b:if>
  • Unknown

    Bang, mau nanya nih..
    Untuk tag kondisional yang menggunakan Lambda seperti dibawah ini :
    <b:if cond='data:post.labels any (label => label.name == "Entry")'>

    Apakah sudah tidak berfunsi lagi?

  • Mas Iwan

    Mas, mau tanya, saya kan ingin menghilangkan (menyembunyikan) beberapa artikel di hasil pencarian blog, apakah bisa mas..?

    • Taufik Nurrohman

      Coba pakai lambda filter pak…

      <b:if cond='data:view.isSearch and !data:view.isLabelSearch'>
      <b:include data='posts filter (post => post.id != 123)' name='asdf'/>
      <b:else/>
      <b:include data='posts' name='asdf'/>
      </b:if>
      • Mas Iwan

        Dengan kode itu kita bisa filter by label aja gak mas yah..? atau url artikel yah..?

        Saya kepengennya bisa filter by label saja, jadi maksud saya beberapa posting dengan label tertentu tidak muncul di hasil pencarian blog.

        • Taufik Nurrohman

          Kalau sudah paham konsepnya, tinggal pilih properti yang disuka:

          <b:include data='posts filter (post => post.url not in [
          "URL 1",
          "URL 2",
          "URL 3"
          ])' name='asdf'/>
          <b:include data='posts filter (a => a.labels any (b => b.name not in [
          "Label 1",
          "Label 2",
          "Label 3"
          ]))' name='asdf'/>
  • Mas Iwan

    Maaf mas, saya tidak berhasil menererapkannya.
    Saya mencoba memasukkannya langsung di form searchnya.
    Namun tidak berhasil juga mas, saya coba pakai langsung kode yang mas berikan juga gak berhasil mas. :'(

    saya kurang paham cara kerja kodenya mas.

    • Taufik Nurrohman

      Sebelumnya Saya sarankan mas untuk minum air bening yang banyak terlebih dahulu kemudian duduk bersandar di atas kasur. Untuk berjaga-jaga agar kalau nanti mas-nya pingsan, setidaknya mas-nya jatuh di tempat yang empuk.

      Kode ini Saya ambil dari tema Simple Bold, yang di dalamnya terdapat bagian yang kurang lebih tampak seperti ini:

      <b:includable id='main' var='top'>
      <b:if cond='!data:mobile'>
      <!-- posts -->
      <div class='blog-posts hfeed'>
      <b:include data='top' name='status-message'/>
      <b:loop values='data:posts' var='post'>
      …
      </b:loop>
      …
      …

      Kuncinya ada di data:posts. Cukup tambahkan lambda filter di situ untuk menyaring hasil akhirnya. Tapi karena pengulangan pada kode tema di atas tidak masuk di dalam elemen <b:includable> khusus, maka kita perlu menyalinnya menjadi dua bagian, satu digunakan untuk tampilan daftar biasa dan satu lagi untuk tampilan pencarian seperti ini:

      <b:if cond='data:view.isSearch && !data:view.isLabelSearch'>
      <b:loop values='data:posts filter ( … )' var='post'>
      …
      </b:loop>
      <b:else/>
      <b:loop values='data:posts' var='post'>
      …
      </b:loop>
      </b:if>

      Hasilnya akan jadi terlalu banyak duplikasi. Sehingga akan membingungkan diri sendiri kalau suatu saat nanti ingin mengubah tampilan daftar artikel. Saran Saya kalau bisa keluarkan itu semua kode pengulangan artikel kemudian jadikan sebagai elemen <b:includable> seperti ini:

      <b:includable id='posts' var='posts'>
      <b:loop values='data:posts' var='post'>
      …
      </b:loop>
      </b:includable>
      <b:includable id='main' var='top'>
      <b:if cond='!data:mobile'>
      <!-- posts -->
      <div class='blog-posts hfeed'>
      <b:include data='top' name='status-message'/>
      <b:include data='posts' name='posts'/>
      …
      …

      Supaya bisa menerapkan kondisi tanpa harus menyalin keseluruhan kode pengulangan:

      <b:if cond='data:view.isSearch && !data:view.isLabelSearch'>
      <b:include data='posts filter ( … )' name='posts'/>
      <b:else/>
      <b:include data='posts' name='posts'/>
      </b:if>

      Atau kalau mau menggunakan cara lama juga bisa, cukup menambahkan tag <b:if> di dalam kode pengulangan seperti ini:

      <b:loop values='data:posts' var='post'>
      <b:if cond='!(data:view.isSearch && !data:view.isLabelSearch) || data:post.labels any (label => label.name not in ["Label 1", "Label 2", "Label 3"])'>
      …
      </b:if>
      </b:loop>

      !(data:view.isSearch && !data:view.isLabelSearch) → Kondisi ini bernilai true bila kita sedang berada di selain halaman pencarian.
      data:post.labels any (label => label.name not in ["Label 1", "Label 2", "Label 3"]) → Kondisi ini bernilai true bila label item posting saat itu tidak mengandung data Label 1, Label 2, dan Label 3.

      Kalau logika di atas disusun sebagai kalimat biasa, maka akan berbunyi seperti ini:

      “Lakukan pengulangan pada data:posts sebagai data:post, tampilkan data:post bila tidak sedang berada di halaman pencarian atau sedang berada di halaman pencarian dengan syarat tidak terdapat Label 1, Label 2, dan Label 3 di dalam data:post.labels.”






Semua kode HTML akan dihapus kecuali kode-kode HTML yang dituliskan sebagai contoh. Gunakan sintaks Markdown untuk memberi gaya pada komentar.


Batal