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.url
data:view.search.query
→data:blog.searchQuery
data:view.isLayoutMode
→ ?
Tulis masukan dan saran di bawah! ↓↓↓
45 Comments:
Malam kak, saya masih bingung dengan Tag Kondisional Halaman Pratinjau itu maksutnya gimana ya, mohon penjelasannya ?
By IRIL SAGITA, at Tuesday, September 12, 2017 at 8:08:00 PM GMT+7
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.
By Giri Diwa Adam, at Tuesday, September 12, 2017 at 8:25:00 PM GMT+7
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>
By Taufik Nurrohman, at Tuesday, September 12, 2017 at 8:26:00 PM GMT+7
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..
By Detifa, at Wednesday, September 13, 2017 at 3:49:00 AM GMT+7
Ya, itu bekerja di semua halaman pratinjau. Contoh pemanfaatan tag kondisional ini adalah untuk menyembunyikan atau menampilkan apapun di halaman pratinjau.
By Igoy Nawamreh, at Wednesday, September 13, 2017 at 6:04:00 PM GMT+7
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>
By Igoy Nawamreh, at Wednesday, September 13, 2017 at 6:59:00 PM GMT+7
Masuk akal mas.
By Taufik Nurrohman, at Wednesday, September 13, 2017 at 8:03:00 PM GMT+7
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.
By Taufik Nurrohman, at Wednesday, September 13, 2017 at 8:08:00 PM GMT+7
Hanya tampil di halaman posting, atau di halaman Tata Letak. :-bd
By Igoy Nawamreh, at Wednesday, September 13, 2017 at 8:25:00 PM GMT+7
: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.
By Igoy Nawamreh, at Wednesday, September 13, 2017 at 8:49:00 PM GMT+7
Bukan cuma dari sisi front-end tapi juga dari sisi back-end. Para pembuat tema komersial Blogger sepertinya akan mulai memperhatikan tag kondisional ini ;)
By Taufik Nurrohman, at Wednesday, September 13, 2017 at 8:55:00 PM GMT+7
ini permasalahn saya waktu menghilangkan beberapa widget dihalaman homepage, ternyata menggunakan ini toh, makasih banyak mas hehe jadi nambah ilmu lagi nih
By Riedayme, at Wednesday, September 13, 2017 at 11:06:00 PM GMT+7
Makasih banyak mas, sudah lama gak mampir ada artikel baru rupanya. :p
By Iwan Efendi, at Sunday, September 17, 2017 at 11:49:00 AM GMT+7
lalu untuk membedakan == sama != gimana mas taufik?
By Soma, at Thursday, September 28, 2017 at 2:22:00 PM GMT+7
tapi untuk template bisa di live pratinjau juga kah? kalao yg postingan memang sejak lama sudah ada fitur pratinjaunya
By Khatami, at Thursday, November 30, 2017 at 9:03:00 PM GMT+7
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>
By Taufik Nurrohman, at Sunday, January 28, 2018 at 12:04:00 AM GMT+7
Kak kalo misal kita mencampur tag kondisional baru dengan yang lama apa ada kesalahan yang serius?
By Miras Tampan, at Sunday, February 18, 2018 at 6:39:00 PM GMT+7
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.
By Taufik Nurrohman, at Wednesday, February 21, 2018 at 6:07:00 PM GMT+7
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
By Arief Ghozaly, at Friday, March 9, 2018 at 10:08:00 PM GMT+7
Ngak masalah kok, mau dicampur juga bisa. Btw lebih indah jika jangan dicampur. Biar rapi
By illvart, at Friday, April 6, 2018 at 12:49:00 PM GMT+7
Sangat bermanfaat,akhirnya dapat tempat yang cocok buat belajar desain template blogspot, untuk para master salam kenal.
By Sofia Risakkota, at Tuesday, April 17, 2018 at 2:19:00 AM GMT+7
Kak Ajarin Buat Tools Web Mini Kak Aku Gak Tau Script Nya
By Unknown, at Thursday, May 10, 2018 at 11:19:00 AM GMT+7
Nice mas. Tambahan sedikit. data:view.isMultipleItems disini mewakili untuk halaman index dan arsip(bukan hanya halaman index).
By wiBlogger.com, at Saturday, May 26, 2018 at 3:37:00 PM GMT+7
Mungkin sama dengan data:view.type == "feed" ya mas.
Terkait: /2018/05/kelas-html-otomatis.html
By Taufik Nurrohman, at Sunday, May 27, 2018 at 7:06:00 PM GMT+7
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.
By wiBlogger.com, at Sunday, May 27, 2018 at 9:05:00 PM GMT+7
Tidak maintain-able, tapi ya sudahlah.
By Taufik Nurrohman, at Monday, May 28, 2018 at 9:59:00 AM GMT+7
Kalau untuk halaman mobile ada ga tag kondisionalnya yang baru?
By Aqshal Tata, at Tuesday, August 7, 2018 at 6:34:00 AM GMT+7
Coba data:view.isMobile.
Terkait: /2013/01/bekerja-dengan-blog-seluler.html
By Taufik Nurrohman, at Tuesday, August 7, 2018 at 6:32:00 PM GMT+7
apa perbedaan item dan posting ?
By Kiddy Dot ID, at Friday, November 2, 2018 at 10:57:00 PM GMT+7
Posting itu item, tapi item tidak selalu posting. Bisa juga halaman statis.
By Taufik Nurrohman, at Saturday, November 3, 2018 at 6:28:00 AM GMT+7
Jika digunakan berdasarkan tahun postinga bisa ya? Postingan Tahun 2017 akan beda dg tahun 2018
By Anam, at Saturday, November 24, 2018 at 4:45:00 PM GMT+7
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;
}
By Taufik Nurrohman, at Sunday, December 9, 2018 at 8:53:00 PM GMT+7
Mas ada tag khusus ngga untuk menyembunyikan bebarapa gambar postingan agar tidak ikut terindex di mesin pencarian? maturnuwun
By Pulung, at Wednesday, July 3, 2019 at 9:50:00 AM GMT+7
<meta name="robots" content="noimageindex">
Referensi: https://support.google.com/news/publisher-center/answer/93977?hl=en
By Taufik Nurrohman, at Wednesday, July 3, 2019 at 11:45:00 AM GMT+7
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.
By Pulung, at Friday, July 12, 2019 at 10:38:00 PM GMT+7
Coba pakai background saja mas untuk gambar-gambar yang tidak ingin diindeks.
Referensi: /2014/09/tinggi-kontainer-mengikuti-tinggi-latar-gambar.html
By Taufik Nurrohman, at Saturday, July 13, 2019 at 2:03:00 AM GMT+7
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
By Yuli Akbar, at Monday, August 26, 2019 at 6:58:00 PM GMT+7
Saya coba carikan caranya kalau ada waktu. Harusnya nggak akan lebih rumit dari ini:
<b:if cond='data:blog.adminClass'> … </b:if>
By Taufik Nurrohman, at Sunday, September 1, 2019 at 10:32:00 PM GMT+7
Harusnya sih masih bisa. Saya masih menerapkannya di tutorial ini.
By Taufik Nurrohman, at Sunday, September 1, 2019 at 10:36:00 PM GMT+7
Mas, mau tanya, saya kan ingin menghilangkan (menyembunyikan) beberapa artikel di hasil pencarian blog, apakah bisa mas..?
By Mas Iwan, at Wednesday, April 1, 2020 at 6:46:00 AM GMT+7
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>
By Taufik Nurrohman, at Saturday, April 4, 2020 at 11:15:00 PM GMT+7
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.
By Mas Iwan, at Sunday, April 5, 2020 at 9:18:00 AM GMT+7
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'/>
By Taufik Nurrohman, at Sunday, April 5, 2020 at 9:57:00 AM GMT+7
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.
By Mas Iwan, at Sunday, April 5, 2020 at 1:12:00 PM GMT+7
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.”
By Taufik Nurrohman, at Sunday, April 5, 2020 at 8:15:00 PM GMT+7
Post a Comment
<< Home