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).tanda seru

Contoh pembuka tag kondisional pada halaman posting

<b:if cond='data:blog.pageType == &quot;item&quot;'>

kode di atas artinya apabila halaman posting maka.... adapun kode seperti dibawah ini adalah sebaliknya

<b:if cond='data:blog.pageType != &quot;item&quot;'>

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 menggunakan display:none.

error 404

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 == &quot;error_page&quot;'>
    <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 != &quot;error_page&quot;'>
  <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 == &quot;error_page&quot;'>
    <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.

deleted comments

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.

93 komentar

asik keduax, saya nyimak aja deh, blog sepi :'( -> http://yoga-tc.blogspot.com/

Balas

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 :)

Balas

wah....
kebetulan banget, ini dia yang saya tanya beberapa hari lalu

Balas

mangga kang.. pertamaxna seep nya :D

Balas

jangan dibiasakan menyimpan URL pada komentar. supaya blog dikunjungi, berkomentarlah yang baik dan bermutu

Balas

betul sob, sekaligus jawaban.. soalnya ada yang nanya juga pada error page :)

Balas

jangan ada yang dilewat ya :)

Balas

Punten Kang Ismet, ijin simak yah Kang biasa
Buat nambah pengetahuan saya Kang terima
Kasih atas artikelnya, sangat bermanfaat.

Balas

mangga kang.. gampilda InsyaAllah

Balas

maaf kang saya ngga tau aturan berkomentar di blog ini. Siap kang saya akan berkomentar yang berkualitas dan bermanfaat bagi orang banyak :D

Balas

berhasil kang...
trima kasih atas tutorialnya :D

Balas

bukan hanya blog ini, di semua blog. untuk memancing kunjungan ya itu tadi berkualitas.. atau sekalian menentang postingan dengan fakta yang kuat :)

Balas

Rada rieut oge Kang, kin akh di simak lebih rinci
Ini Penting pisan soal na, buat blog saya haturnuhun. :)

Balas

kang mau ask nih cara membuat quick search seperti ini gimana kang ?
[img]http://i.imgur.com/oHxoy0s.png[/img]

Balas

Punten Kang oot:
Ada laporan kesalahan di halaman all pos dasboard laporanya seperti ini :

Maaf, tetapi kami tidak dapat menyelesaikan permintaan Anda.

Bila melaporkan kesalahan ini kepada Dukungan Blogger atau di Grup Bantuan Blogger, harap:

Uraikan apa yang Anda lakukan ketika menemui kesalahan ini.
Berikan kode kesalahan berikut.

bX-wj8t32

Informasi ini akan membantu kami melacak dan mengatasi masalah Anda! Maaf atas ketidaknyamanan ini.


Apa penyebabnya, tadinya buat artikel baru. terima kasih Kang :))

Balas

wah, sepertinya butuh waktu 1 minggu ini kang, untuk memahami sekaligus menerapkan tutor di atas

Balas

itu bugs aja.. diulangi beberapa kali bisa ko.. atau simpan dulu sebagai draft, baru dipublish

Balas

hehhee.. masa iya.. gampang ko :)

Balas

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 ;)

Balas

hehehe gampang itu relatif kang, tapi kalau untuk pemula seperti saya tentu akan mengalami kendala, apalagi memori otak saya termasuk pentium, jadi ya lumayan lama lodingnya kang hehehe, akan saya pelajari lebih lanjut kang, dan menerapkannya pada halam halaman lain di luar 404

Balas

Ngaronda Kang... :)
Mau atuh kang script kanggo deleted coment na.

Balas

Disini memang tempat yang tepat untuk belajar blogging :)

Kang .. Gimana caranya bikin emot sepperti Kang Ismet?

Balas

ngamber akhirnya dukun tutorial hehehe :) memang benar kang yoga, kalau kita berkomentar jgn suka mengucapkan kunjungan balik atau meninggalkan link walau hanya tulisan. kalau kita berkomentar dengan bijaksana pasti blog kita bakal dikunjungi orang kok. :-bd

Balas

buat kang ismet :) haduh... kok gambarnya tidak berwarna kang??

Balas

Iyah Kang tapi yang jadi masalah halaman all pos dasboard saya setiap di buka begitu terus Kang, jadi gak bisa tampil ada solusi nya Kang?

Balas

bersihkan browser anda mas :)

Balas

kang, maaf nih. minta tolong coba ditinjau laman error page blog saya, sudah benar atau ada tambahan/masukan lagi ngga ??

Balas

Kayanya bener deh Mbak Leony, soale browser saya sudah lama juga gak di hapus all :
Browsing & Download History
Form & Search History
Cokies
Cache
Aktive Login
Offline Login
Site Frefeerences

Makasih Mbak, jadi nyusahin Kang Ismet Maaf Kang Ismet :)

Balas

Siap siaga saya juga akan belajar anjuran Kang Ismet :)

Balas

Keren kang, buat bekal belajar xml :)

Balas

Mas Arie nyamar tok kayaknya tuh hehehehe, pamit eksekusi tutor dulu :D

Balas

ke algoritma lagi kayanya nie kang :D
ijin nyimak

Balas

boleh juga infonya gan .. sangat jelas sekali penjelasannya ..

Balas

Baeu bangun buka blog...eh dapet ilmu baru lagi.
Makasih banget kang Ismet :)

Balas

ternyata tag kondisional penting untuk dipelajari
apa saja jenis jenis tag kondisional?

Balas

Selamat pagi kang,, dapat pelajaran menarik lagi dari blog akang.. terimakasih kang.. :)

Balas

heheh.. menyesuaikan desian sih..

Balas

ngaleueut bodrek we rieut mah kang :D

Balas

udah fix kayaknya sob :-bd

Balas

pan gambarana atos diluhur kang :)

Balas

untuk thread comment hack yang saya share udah include ko

Balas

coba ke sini http://blog.kangismet.net/2012/10/tag-kondisional-dan-cara-penggunaannya.html

Balas

kang yang deleted comment bisa minta penjelasannya lagi?

Balas

jadi spertos qieu toh caranya... sip lah kang..

Balas

nembe tiasa ngoronyoh kang ( walah bahasa mana gera )
tah eta kang diperyogikeun kanggo konsep blogazine hehe ..
urang cobian ahhhh

Balas

memang udah include kang tapi dikasih false di vinaluf malah tempatna gak enaken kang ... matak to di aktivken ge .. di oprek posisina waregah hehe

Balas

saur kang heri teh pan abdi mah teu kreatif haha

Balas

Biasa dihuapan Kang Rull :)

Balas

Ngoronyoh teh naon Kang.. asa nembe Ngupling :)

Balas

tong ngupling ari gigina te di overken mah hehe .. ngoronyoh teh bahasa gaulna " datang " .. maklum ari pramusiar mah kudu sagala apal bahasa aneh haha

Balas

Punten kang salah nyebrut..:)
Kurunyung murun eta mah.. te terang nu kararitu mah, terang na bahasa tarzan wungkul :)

Balas

Ehmm , pak admin yang baik hati bisa beri tahu caranya mengedit gambar untuk mengedit post ?

Balas

walah seueur tamu ning.. acan disuguhan kopi yeuh :D

Balas

gambarnya saya ganti pake font-awesome

Balas

mas,,,slide nya kok tidak jalan mas

Balas

konsepnya sama dengan errorpage pada contoh 1. intinya, ketika komentar di delete, maka avatar, tombol reply, tanggal dsb... tidak ditampilkan

Balas

slide apa? perasaan saya ga pake slide :D

Balas

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

Balas

hm oke kang,saya coba dulu :)

Balas

beuuuh.. asa wiro sableng :D
benul kang, padahal sudah banyak penjelasan masalah ini, nya mungkin karena kebanyakan bahasa kulon

Balas

Ku pedah teu apal loba jelema sok tauk, sok eleh ku aya era tipadan di sebut BELEGUK.

Nu matak silih berbagi elmu pasti bakal ngangkat sagala"na....murid jd apal, guru kudu beuki ngajeroan elmu paranti nopangan murid" nu aya.

Sakitu ti sim kuring...maap sanes ngaguruan, ieu mah wejangan ti padepokan gunung kelut.
Maha sagalana mah ngan milik nu Maha ... Alloh SWT.

Permios ari kitu mah...pareum.

Balas

laporan... tag kondisional delete comment berhasil diaplikasikan meskipun blog saya tidak pake Threaded Comments Hack tapi bisa jga haturthank u perkawis infona... hehe

Balas

Seblok weh ku ci seuseuhan...tuman, garandeng pisan di lapak batur kitu....

Maap ieu mah sakali deui, sanes ngajak ribut ato naun....juru ribut mah tur IBLIS sareung bala tentarana...

Sakitu...pareum.

Balas

Super OOT .. Kang kalau pake location.replace / redirect sebagai pengalih halaman tidak ditemukan , ada pengaruh gak pada blog'y nanti ??

Balas

ulah ku ci seseheun .. ku ci kopi we nu hideung mah satuju jigana

Balas

sip lah tos ngartos, hatur nuhun sateuacana.

Balas

duka tah kang.. sok milari referensi we lah :D

Balas

Tutorial bagus ni kang :)
coba dulu, semoga cocok buat blog saya :) :D

Balas

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??

Balas

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 :)

Balas

saya pernah pasang dari DTE tp skrng JS nya gk work lg kang :(

Balas

Mumet kang , tapi saya berusaha utk memahaminya . Oh iya, Saya masih gak ngerti nih Kang cara buat Halaman Error 404 yg fast loading kayak punya Blog Kang Ismet. Gimana ya kang ?

Balas

Muantep sekali kang,
Baru ngerti ane kang, xixi
Terima kasih infonya :D

Balas

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

Balas

iya full body... tidak usah ditambah kode2 lain, paling CSS untuk error page aja

Balas

kan udah dijelasin di atas.. coba fahami lagi

Balas

oh kyak gitu... terima kasih kang tambah ilmu

Balas

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

Balas

menyimak dulu kang sambil belajar maklum masih awam soal beginian hehe...

Balas

Saya dari DTE quick searchnya masih work

Balas

nambah ilmu lg kang, makasih y. sudah saya coba aplikasikan ternyata emang lebih cepet.

Balas

berati itu intinya jika kita menemukan error 404 tp lama loadingnya, dengan cara diatas bisa cepat gtu ya ?
maap newbie nside

Balas

saya gak ada kode body, jadi gimana cara buat halaman error 404 seperti diatas?

Balas

mungkin JS Quicksearch ini yang sahabat cari?

[code]<script src='https://googledrive.com/host/0B7H_GQEvKCj1Rmh1blVLZV9fSlk/quicksearch.js' type='text/javascript'></script>[/code]

Semoga bermanfaat! :) http://blog.kangrian.com

Balas

ane malah baru tau tag kondisional yang error_page nya itu kang :D .. hehe so far artikel kang ismet bermanfaat semua . #excellent

Balas

Poskan Komentar


×
Chat