Kunjungi Blog terbaru saya corkismet - Coretan Kang Ismet - dan tinggalkan jejak sobat disana.

Logika Pengingkaran Pada Tag Kondisional

Menggunakan Tag Kondisional secara benar.
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 == &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.

Untuk mendapatkan update terbaru di Dasbor Blogger, silahkan ikuti Blog ini

93 komentar

1. Komentar ini, diurutkan dari yang terbaru
2. Tinggalkan komentar sesuai topik tulisan
3. Apabila ada pertanyaan diluar artikel silahkan kunjungi Ruang Obrolan.
4. Centang Beri tahu saya untuk mendapatkan notifikasi via Email ketika ada balasan
Masukkan URL Gambar atau Potongan Kode, atau Quote, lalu klik tombol yang kamu inginkan untuk di-parse. Salin hasil parse lalu paste ke kolom komentar.


image quote pre code
  1. Pertamax enggak ya?
    1. 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 :)
  2. asik keduax, saya nyimak aja deh, blog sepi :'( -> http://yoga-tc.blogspot.com/
    1. jangan dibiasakan menyimpan URL pada komentar. supaya blog dikunjungi, berkomentarlah yang baik dan bermutu
  3. nyimak dengan seksama!!!
    1. jangan ada yang dilewat ya :)
  4. wah....
    kebetulan banget, ini dia yang saya tanya beberapa hari lalu
    1. betul sob, sekaligus jawaban.. soalnya ada yang nanya juga pada error page :)
  5. Punten Kang Ismet, ijin simak yah Kang biasa
    Buat nambah pengetahuan saya Kang terima
    Kasih atas artikelnya, sangat bermanfaat.
    1. mangga kang.. gampilda InsyaAllah
  6. Rada rieut oge Kang, kin akh di simak lebih rinci
    Ini Penting pisan soal na, buat blog saya haturnuhun. :)
    1. ngaleueut bodrek we rieut mah kang :D
  7. kang mau ask nih cara membuat quick search seperti ini gimana kang ?
    [img]http://i.imgur.com/oHxoy0s.png[/img]
    1. ada di blog DTE
  8. wah, sepertinya butuh waktu 1 minggu ini kang, untuk memahami sekaligus menerapkan tutor di atas
    1. hehhee.. masa iya.. gampang ko :)
  9. 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 ;)
    1. kang, maaf nih. minta tolong coba ditinjau laman error page blog saya, sudah benar atau ada tambahan/masukan lagi ngga ??
  10. Ngaronda Kang... :)
    Mau atuh kang script kanggo deleted coment na.
    1. pan gambarana atos diluhur kang :)
  11. Disini memang tempat yang tepat untuk belajar blogging :)

    Kang .. Gimana caranya bikin emot sepperti Kang Ismet?
    1. untuk thread comment hack yang saya share udah include ko
  12. Ijin nyimak :)
  13. Keren kang, buat bekal belajar xml :)
  14. ke algoritma lagi kayanya nie kang :D
    ijin nyimak
  15. boleh juga infonya gan .. sangat jelas sekali penjelasannya ..
  16. Baeu bangun buka blog...eh dapet ilmu baru lagi.
    Makasih banget kang Ismet :)
  17. ternyata tag kondisional penting untuk dipelajari
    apa saja jenis jenis tag kondisional?
    1. coba ke sini http://blog.kangismet.net/2012/10/tag-kondisional-dan-cara-penggunaannya.html
  18. Selamat pagi kang,, dapat pelajaran menarik lagi dari blog akang.. terimakasih kang.. :)
  19. kang yang deleted comment bisa minta penjelasannya lagi?
    1. konsepnya sama dengan errorpage pada contoh 1. intinya, ketika komentar di delete, maka avatar, tombol reply, tanggal dsb... tidak ditampilkan
  20. jadi spertos qieu toh caranya... sip lah kang..
    1. cumuun kang...
  21. nembe tiasa ngoronyoh kang ( walah bahasa mana gera )
    tah eta kang diperyogikeun kanggo konsep blogazine hehe ..
    urang cobian ahhhh
    1. Ngoronyoh teh naon Kang.. asa nembe Ngupling :)
  22. Ehmm , pak admin yang baik hati bisa beri tahu caranya mengedit gambar untuk mengedit post ?
    1. gambarnya saya ganti pake font-awesome
  23. 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
    1. beuuuh.. asa wiro sableng :D
      benul kang, padahal sudah banyak penjelasan masalah ini, nya mungkin karena kebanyakan bahasa kulon
  24. Super OOT .. Kang kalau pake location.replace / redirect sebagai pengalih halaman tidak ditemukan , ada pengaruh gak pada blog'y nanti ??
    1. duka tah kang.. sok milari referensi we lah :D
  25. sip lah tos ngartos, hatur nuhun sateuacana.
  26. Tutorial bagus ni kang :)
    coba dulu, semoga cocok buat blog saya :) :D
  27. 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??
    1. iya full body... tidak usah ditambah kode2 lain, paling CSS untuk error page aja
  28. 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 :)
  29. 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 ?
    1. kan udah dijelasin di atas.. coba fahami lagi
  30. Muantep sekali kang,
    Baru ngerti ane kang, xixi
    Terima kasih infonya :D
  31. 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
  32. oh kyak gitu... terima kasih kang tambah ilmu
  33. 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
  34. menyimak dulu kang sambil belajar maklum masih awam soal beginian hehe...
  35. nambah ilmu lg kang, makasih y. sudah saya coba aplikasikan ternyata emang lebih cepet.
  36. masih bingung gan :(
  37. berati itu intinya jika kita menemukan error 404 tp lama loadingnya, dengan cara diatas bisa cepat gtu ya ?
    maap newbie nside
  38. saya gak ada kode body, jadi gimana cara buat halaman error 404 seperti diatas?
  39. ane malah baru tau tag kondisional yang error_page nya itu kang :D .. hehe so far artikel kang ismet bermanfaat semua . #excellent
Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
Oops!
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
Site is Blocked
Sorry! This site is not available in your country.