Tag Kondisional Halaman Blogger 2017
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.url→data:blog.urldata:view.search.query→data:blog.searchQuerydata:view.isLayoutMode→ ?
Tulis masukan dan saran di bawah! ↓↓↓
46 Comments:
Malam kak, saya masih bingung dengan Tag Kondisional Halaman Pratinjau itu maksutnya gimana ya, mohon penjelasannya ?
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.
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>
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..
Ya, itu bekerja di semua halaman pratinjau. Contoh pemanfaatan tag kondisional ini adalah untuk menyembunyikan atau menampilkan apapun di halaman pratinjau.
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>
Masuk akal mas.
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.
Hanya tampil di halaman posting, atau di halaman Tata Letak. :-bd
: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.
Bukan cuma dari sisi front-end tapi juga dari sisi back-end. Para pembuat tema komersial Blogger sepertinya akan mulai memperhatikan tag kondisional ini ;)
ini permasalahn saya waktu menghilangkan beberapa widget dihalaman homepage, ternyata menggunakan ini toh, makasih banyak mas hehe jadi nambah ilmu lagi nih
Makasih banyak mas, sudah lama gak mampir ada artikel baru rupanya. :p
lalu untuk membedakan == sama != gimana mas taufik?
tapi untuk template bisa di live pratinjau juga kah? kalao yg postingan memang sejak lama sudah ada fitur pratinjaunya
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>
Kak kalo misal kita mencampur tag kondisional baru dengan yang lama apa ada kesalahan yang serius?
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.
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
Ngak masalah kok, mau dicampur juga bisa. Btw lebih indah jika jangan dicampur. Biar rapi
Sangat bermanfaat,akhirnya dapat tempat yang cocok buat belajar desain template blogspot, untuk para master salam kenal.
Kak Ajarin Buat Tools Web Mini Kak Aku Gak Tau Script Nya
Nice mas. Tambahan sedikit. data:view.isMultipleItems disini mewakili untuk halaman index dan arsip(bukan hanya halaman index).
Mungkin sama dengan data:view.type == "feed" ya mas.
Terkait: /2018/05/kelas-html-otomatis.html
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.
Tidak maintain-able, tapi ya sudahlah.
Kalau untuk halaman mobile ada ga tag kondisionalnya yang baru?
Coba data:view.isMobile.
Terkait: /2013/01/bekerja-dengan-blog-seluler.html
apa perbedaan item dan posting ?
Posting itu item, tapi item tidak selalu posting. Bisa juga halaman statis.
Jika digunakan berdasarkan tahun postinga bisa ya? Postingan Tahun 2017 akan beda dg tahun 2018
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;
}
Mas ada tag khusus ngga untuk menyembunyikan bebarapa gambar postingan agar tidak ikut terindex di mesin pencarian? maturnuwun
<meta name="robots" content="noimageindex">
Referensi: https://support.google.com/news/publisher-center/answer/93977?hl=en
Mas Taufik, maaf apa itu ga menyembunyikan semua gambar? Maksud saya cuma menyembunyikan beberapa gambar khusus di mesin pencarian tapi membiarkan gambar yang lain tetap terindek.
Coba pakai background saja mas untuk gambar-gambar yang tidak ingin diindeks.
Referensi: /2014/09/tinggi-kontainer-mengikuti-tinggi-latar-gambar.html
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
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?
Saya coba carikan caranya kalau ada waktu. Harusnya nggak akan lebih rumit dari ini:
<b:if cond='data:blog.adminClass'> … </b:if>
Harusnya sih masih bisa. Saya masih menerapkannya di tutorial ini.
Mas, mau tanya, saya kan ingin menghilangkan (menyembunyikan) beberapa artikel di hasil pencarian blog, apakah bisa mas..?
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>
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.
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'/>
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.
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.”
Post a Comment
<< Home