Mecha versi 2.6.4 sudah dirilis!

Tag Kondisional Laman Blogger 2017

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

Blogger memperkenalkan beberapa tag kondisional laman 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 Laman 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 Laman 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 Laman 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 Laman Posting 

Versi Baru 

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

Versi Lama 

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

Tag Kondisional Laman 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 Laman Label 

Versi Baru 

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

Versi Lama 

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

Tag Kondisional Laman Arsip 

Versi Baru 

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

Versi Lama 

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

Tag Kondisional Laman Pencarian 

Versi Baru 

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

<!-- Hanya laman 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 Laman 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 Laman Pratinjau 

Versi Baru 

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

Versi Lama 

 

Terkait 

Lain-Lain 

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

Tulis masukan dan saran di bawah! ↓↓↓

53 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

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.

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

Taufik Nurrohman

<meta name="robots" content="noimageindex">

Referensi: https://support.google.com/news/publisher-center/answer/93977?hl=en

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

Wahyudi

Cara supaya saat share di WhatsApp muncul tumbnail gambar otomatis (gambar yang ada di isi page) pada halaman statis blogger, seperti halnya yang halaman DTE sebelumnya saat share page yang muncul gambar isi dari page?

Soalnya pengalaman saya saat share halaman statis pada blog saya di WhatsApp yang muncul gambar logo blog.

Trims master.

Taufik Nurrohman

→ /teknis/blogspot-facebook-open-graph

Wahyudi

Bisa dituliskan secara utuh kak? Soalnya mengikuti/copas dari Artikel pada post ini post malah tidak muncul tumbnail secara keseluruhan dari blog kak.

Taufik Nurrohman

→ https://lmgtfy.com?q=cara+pasang+tag+facebook+open-graph+di+blogger

Wahyudi

Sudah dilakukan kak, tapi pada halaman statis yang muncul thumbnail-nya adalah logo default bukan gambar yang ada di halaman static.

Jika boleh minta nomer WA, kak. Trims.

Taufik Nurrohman

Mungkin karena data:blog.postImageUrl cuma berlaku untuk post. Kalau page logikanya ya harus memakai data:blog.pageImageUrl.

Tapi itu Saya cuma ngarang. Belum pernah tes juga, jadi tidak tahu apakah tag data tersebut ternyata ada atau tidak.

Wahyudi

Yang ada di halaman static pada web DTE sebelumnya bisa muncul image pada page,, masih rahasia ya kak... heheh, sorry.

Komentar telah ditutup.