Logika Pengingkaran Pada Tag Kondisional
Kang Ismet
Untuk menciptakan kondisi berbeda pada postingan, komentar, homepage dll biasanya kita menggunakan tag kondisional. Dalam tag kondisional ada yang disebut dengan pengingkaran yang ditandai dengan ! (tanda seru).Contoh pembuka tag kondisional pada halaman posting
<b:if cond='data:blog.pageType == "item"'>kode di atas artinya apabila halaman posting maka.... adapun kode seperti dibawah ini adalah sebaliknya
<b:if cond='data:blog.pageType != "item"'>artinya apabila selain halaman posting... (perbedaannya terletak pada tanda seru).
Tag kondisional kadang diperlukan hanya satu saja, terkadang juga diperlukan berikut pengingkarannya. Hal ini tentunya ada beberapa tujuan seperti mempercepat loading, menyembunyikan objek tertentu dll.
Dibawah ini akan coba saya jelaskan 2 contoh penggunaan logika pengingkaran pada tag kondisional yang saya gunakan di blog ini.
Contoh 1 : Halaman Error 404
Tujuan disertakannya pengingkaran pada halaman error 404 (tidak ditemukan) adalah untuk mempercepat loading halaman. Mungkin sobat pernah mengunjungi halaman error yang lambat diakses? itu karena tidak disertakannya pengingkaran, sehingga header, navigasi, sidebar, footer, tetap dibaca oleh browser walaupun menggunakandisplay:none.
Untuk lebih memahaminya, dibawah ini contoh HTML blog, saya ambil dari tag
<body><body>
<div id='header'/>
<div id='outer-wrapper'>
<div id='main-wrapper'>
<article id='post hentry'/>
<sidebar id='sidebar'/>
</div>
</div>
</body>Kemudian Anda menambahkan tag kondisional
error_page sebelum </body> maka kode menjadi seperti ini<body>
<div id='header'/>
<div id='outer-wrapper'>
<div id='main-wrapper'>
<article id='post hentry'/>
<sidebar id='sidebar'/>
</div>
</div>
<b:if cond='data:blog.pageType == "error_page"'>
<div id='error-page'>
<h1>Halaman tidak ditemukan</h1>
</div>
</b:if>
</body>Walaupun Anda telah menyembunyikan beberapa elemen, tetap elemen itu akan dirender oleh browser. Maka yang terjadi adalah akses yang lambat. Untuk mempercepat loading halaman ini, maka tambahkan kode pengingkaran pada elemen yang tidak ingin ditampilkan. Hasilnya seperti ini :
<body>
<b:if cond='data:blog.pageType != "error_page"'>
<div id='header'/>
<div id='outer-wrapper'>
<div id='main-wrapper'>
<article id='post hentry'/>
<sidebar id='sidebar'/>
</div>
</div>
</b:if>
<b:if cond='data:blog.pageType == "error_page"'>
<div id='error-page'>
<h1>Halaman tidak ditemukan</h1>
</div>
</b:if>
</body>Contoh 2 : Deleted Comments
Mungkin Anda pernah melihat blok merah tanda komentar telah dihapus pada blog ini.
Contoh di atas, tidak menyertakan avatar, isi komentar, tombol reply dsb. Ini juga menggunakan pengingkaran.
Pada kasus ini tidak menggunakan tanda seru (!) sebagai pengingkaran, tapi dengan
<b:else/> karena pada tag kondisional deleted comment tidak ada tanda = atau !.Untuk penempatannya, saya kira Anda sudah faham dengan penjelasan saya diatas. Dibawah ini saya buat gambaran HTML pada komentar beserta penempatan tag kondisionalnya.
<b:if cond='data:comment.isDeleted'>
<b:else/>
<div class='comment-header'/>
<div class='comment-body'>
<data:comment.body/>
</div>
<div class='comment-reply'>
</b:if>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'>
<data:comment.body/>
</span>
</b:if>
Manipulasi deleted comment ini hanya bisa dilakukan pada Threaded Comments Hack.
Pertamax enggak ya?
Saya malah simpan kode error 404-nya persis di bawah body kang? Jadi halaman 404nya langsung tampil, tapi memang eleman yang lainnya masih terbaca browser. Cobian ah pake trik ieu hehehe :D hatur nuhun kang pertamax na :)
asik keduax, saya nyimak aja deh, blog sepi :'( -> http://yoga-tc.blogspot.com/
jangan dibiasakan menyimpan URL pada komentar. supaya blog dikunjungi, berkomentarlah yang baik dan bermutu
nyimak dengan seksama!!!
jangan ada yang dilewat ya :)
wah....
kebetulan banget, ini dia yang saya tanya beberapa hari lalu
betul sob, sekaligus jawaban.. soalnya ada yang nanya juga pada error page :)
Punten Kang Ismet, ijin simak yah Kang biasa
Buat nambah pengetahuan saya Kang terima
Kasih atas artikelnya, sangat bermanfaat.
mangga kang.. gampilda InsyaAllah
Rada rieut oge Kang, kin akh di simak lebih rinci
Ini Penting pisan soal na, buat blog saya haturnuhun. :)
ngaleueut bodrek we rieut mah kang :D
kang mau ask nih cara membuat quick search seperti ini gimana kang ?
[img]http://i.imgur.com/oHxoy0s.png[/img]
ada di blog DTE
wah, sepertinya butuh waktu 1 minggu ini kang, untuk memahami sekaligus menerapkan tutor di atas
hehhee.. masa iya.. gampang ko :)
Terima Kasih kang, akhirnya dijelasin juga. Malah dibuatkan artikel tersendiri. Kalau jelas begini kan nubitol kaya saya bisa praktek langsung...hehehehe.
Saya coba dulu kang ;)
kang, maaf nih. minta tolong coba ditinjau laman error page blog saya, sudah benar atau ada tambahan/masukan lagi ngga ??
Ngaronda Kang... :)
Mau atuh kang script kanggo deleted coment na.
pan gambarana atos diluhur kang :)
Disini memang tempat yang tepat untuk belajar blogging :)
Kang .. Gimana caranya bikin emot sepperti Kang Ismet?
untuk thread comment hack yang saya share udah include ko
Ijin nyimak :)
Keren kang, buat bekal belajar xml :)
ke algoritma lagi kayanya nie kang :D
ijin nyimak
boleh juga infonya gan .. sangat jelas sekali penjelasannya ..
Baeu bangun buka blog...eh dapet ilmu baru lagi.
Makasih banget kang Ismet :)
ternyata tag kondisional penting untuk dipelajari
apa saja jenis jenis tag kondisional?
coba ke sini http://blog.kangismet.net/2012/10/tag-kondisional-dan-cara-penggunaannya.html
Selamat pagi kang,, dapat pelajaran menarik lagi dari blog akang.. terimakasih kang.. :)
kang yang deleted comment bisa minta penjelasannya lagi?
konsepnya sama dengan errorpage pada contoh 1. intinya, ketika komentar di delete, maka avatar, tombol reply, tanggal dsb... tidak ditampilkan
jadi spertos qieu toh caranya... sip lah kang..
cumuun kang...
nembe tiasa ngoronyoh kang ( walah bahasa mana gera )
tah eta kang diperyogikeun kanggo konsep blogazine hehe ..
urang cobian ahhhh
Ngoronyoh teh naon Kang.. asa nembe Ngupling :)
Ehmm , pak admin yang baik hati bisa beri tahu caranya mengedit gambar untuk mengedit post ?
gambarnya saya ganti pake font-awesome
Ieu syntax jaman mimiti blog nangtung oge geus aya...ngan pedah mslh artikelna make bahasa orang kulon jd loba nu teu paraham.
Bahasa admin blog ieu mengena pisan jigana k para pembaca....
Pertahankan muridku spt ini ... ngan wayahna pasti loba nu tatanya mun elmu geus nerep k batur mah, da di dinya sumberna.
LoL
beuuuh.. asa wiro sableng :D
benul kang, padahal sudah banyak penjelasan masalah ini, nya mungkin karena kebanyakan bahasa kulon
Super OOT .. Kang kalau pake location.replace / redirect sebagai pengalih halaman tidak ditemukan , ada pengaruh gak pada blog'y nanti ??
duka tah kang.. sok milari referensi we lah :D
sip lah tos ngartos, hatur nuhun sateuacana.
Tutorial bagus ni kang :)
coba dulu, semoga cocok buat blog saya :) :D
untuk error 404
jadi itu termasuk full body
(maksud saya ketika kita masuk halaman erorr akan menghilangkan Sidebar,header dan sebagainya bukan kang)
atau mungkin mempunyai kode tersendiri agar terjadi seperti itu kah??
iya full body... tidak usah ditambah kode2 lain, paling CSS untuk error page aja
saya udah berkali-kali mencoba membuat halaman error.. tapi, berkali-kali itu jugalah saya gagal :D
mudah-mudahan dengan rujukan kali ini saya bisa membuatnya.. yah... coba lagi dan lagi :)
Muantep sekali kang,
Baru ngerti ane kang, xixi
Terima kasih infonya :D
ane mau tanya gan soal kode bX-wj8t32 ini terjadi dipos ane gan?
padahal ane udah hapus semua cookies dan cache dll,
tapi error ini terus menghantui pos ane gan, tolong solusi nya gan
thx
oh kyak gitu... terima kasih kang tambah ilmu
kang kalau tag kondisional yang hanya tampil untuk tampilan mobile saja, tagnya seperti apa?
Jadi hanya bagian tertentu saja yang muncul saat diakses di mobile, jadi loadingnya bisa lebih cepat. Mohon bantuannya
masih bingung gan :(
berati itu intinya jika kita menemukan error 404 tp lama loadingnya, dengan cara diatas bisa cepat gtu ya ?
maap newbie nside
ane malah baru tau tag kondisional yang error_page nya itu kang :D .. hehe so far artikel kang ismet bermanfaat semua . #excellent