Tahap Awal Belajar Tag Kondisional - Tag berarti kegiatan yang kita lakukan untuk memberikan beberapa tanda pada sebuah area, sedangkan kondisional/conditional adalah nilai kondisi atau penunjuk untuk mengartikan isi dari area tag tersebut. Secara keseluruhan tag kondisional dapat kita artikan sebagai tanda yang digunakan untuk menjelaskan dan mengatur elemen-elemen tertentu pada HTML Template, apakah fungsi kode tersebut ingin ditampilkan atau tidak, ingin diaktifkan atau tidak difungsikan sesuai dengan nilai-nilai objek area tertentu yang sudah terkondisi.

Karena kita berbicara tentang bahasa perkodean HTML, CSS dan JavaScript, saya akan menjelaskan sedikit tahap awal bagaimana membaca tag kondisional dan fungsi-fungsinya, agar sahabat semua pecinta SAHABAT BLOGGER 77 bisa belajar menggunakan tag kondisional untuk mengatur sebuah halaman ingin ditampilkan atau tidak ditampilkan berdasarkan nilai-nilai yang sudah Anda tentukan, namun tutorial kali ini saya khususkan untuk flatform blogspot.

Conditional Tag



BACA JUGA
Pengertian HTML Template Berdasarkan Versi



Sebelum kita lanjutkan tahap mambaca tag kondisional, ada baiknya kita mengenal terlebih dahulu bentuk tag kondisional seperti apa. Kita ambil contoh awal yang paling sering digunakan pada sebuah halaman adalah seperti ini:

1. Membaca Bentuk Tag Kondisional


<b:if cond='data:blog.url == data:blog.homepageUrl'>
....
  ....
</b:if>

Pengertiannya:
Jika kondisi halaman saat ini sama dengan URL halaman depan atau Home-page, maka nilai objek yang ada didalamnya akan ditampilkan. Atau Anda bisa buat sebaliknya untuk tidak menampilkan nilai objek dengan mengganti kode pembanding (==). Artinya, Jika nilainya kita putar balik, maka Anda ganti kode pembanding == menjadi != yang berarti tidak sama dengan atau kondisi halaman saat ini "BUKAN" URL halaman Home.

Tag kondisional selalu diawali dengan tag pembuka <b:if> dan diakhiri dengan tag penutup </b:if>. Setelah tag pembuka ada atribut cond seperti ini: <b:if cond='...'>. Nah.! atribut cond inilah elemen penentu yang digunakan untuk menunjukkan suatu kondisi, sedangkan kode data:blog.url == data:blog.homepageUrl adalah nilai atribut cond yang digunakan untuk menjelaskan maksud dari kondisi (Kondisional) yang diinginkan.


Kode data:blog.url adalah suatu pernyataan yang mewakili keadaan sebuah URL halaman, sementara kode data:blog.homepageUrl adalah perwakilan dari URL halaman beranda (homepage).


2. Menggunakan Tag Kondisional
Menggunakan tag kondisioanal masih terbagi lagi dengan 2 cara penerapan, yaitu:

2.1 Secara Langsung (Tunggal)
Jika Anda terapkan kondisinya secara langsung, maka Anda sudah menyiapkan sebuah target sasaran yang akan diapit oleh tag ini, contoh seperti ini:


<b:if cond='data:blog.url == data:blog.homepageUrl'>
...
elemen target
...
</b:if>

Fungsinya:
Jika saat ini Anda berada pada halaman HOME, maka URL beranda yang ditampilkan, tetapi jika saat ini Anda berada pada halaman bukan halaman depan (misal pada halaman posting), maka URL posting yang difungsikan.

2.2 Secara Tidak Langsung (Kondisi Tertentu)
Cara seperti ini biasanya penerapan yang dilakukan dengan mengapitkan tag kondisional dalam selektor objek yang menjadi target sasaran. Misal kita fungsikan pada elemen CSS yang memiliki atribut #(ID), sedangkan kondisi perintahnya adalah untuk menghilangkan objek sasaran, maka gunakan deklarasi display:none dengan tag pembanding !=, contoh seperti ini:


<b:if cond='data:blog.url != data:blog.homepageUrl'>
<style type='text/css'>
#target {display:none;}
</style>

</b:if>

Fungsinya:
Disana terdapat selektor CSS dengan atribut ID. Jadi seluruh elemen yang memiliki atribut ID atau HTML pemanggil <div id='target'>SB-77 Design</div> akan disembunyikan/hilang atau tidak ditampilkan apabila kondisi halaman saat ini tidak sama dengan halaman home/beranda.


Saat kondisi Anda saat ini sedang berada di halaman HOME, maka disana terdapat sebuah objek untuk menampilkan sejumlah postingan (daftar artikel). Pertanyaannya, apakah objek tersebut bisa kita hilangkan atau tidak ditampilkan.? jawabannya: YA, dengan membungkus elemen objek tersebut dengan tag kondisional, maka saat Anda membuka URL Home-page, Anda akan menemui halaman yang kosong. Caranya baca - Cara Menghilangkan Daftar Artikel Pada Halaman Beranda.

Itu hanya merupakan contoh kecil tahap awal belajar membaca dan menggunakan tag kondisional, karena pada prinsipnya apapun bisa kita hilangkan atau jangan ditampilkan jika kondisi halaman saat ini berada dimana, karena dalam Menentukan tag <div> pembuka memang sangat mudah, karena dalam tiap-tiap tubuh tag pembuka pasti terdapat atribut id='' atau class='' yang sudah memiliki nilai-nilai tertentu yang spesifik, akan tetapi dalam menentukan di mana kode yang menjadi </div> penutup dari divisi elemen yang dimaksud tidaklah semudah itu, karena jika Anda membuka Template, maka Anda akan melihat sekumpulan kode yang terbentuk dalam sebuah kesatuan objek.

TERIMA KASIH ATAS KUNJUNGAN SAUDARA

Judul= Tahap Awal Belajar Tag Kondisional
Ditulis oleh= Devy Indriyani
Rating Blog 5 dari 5
Semoga artikel ini bermanfaat bagi saudara. Jika ingin mengutip (meng-Copy), baik itu sebagian atau keseluruhan isi dari artikel ini harap menyertakan link dofollow ke >>
= TERIMA KASIH =

28 komentar

  1. Asli ... postingn devy yg ni tk cukup skli dibca .. soalny blm mudeng jg e ... :(

    BalasHapus
    Balasan
    1. mudengnya apa mas fiu :d (c)

      Hapus
    2. tutorial ini hanya sebagai pemahaman saja mas Fiu, jadi saat kita ingin melakukan Edit Template maka yang kita lakukan adalah merubah atau menambahkan beberapa elemen didalamnya, namun jika kita perhatikan ada kode pembungkus yang diawali dengan tag <b:if cond='bla..bla..'>

      nah kode itulah yang saya jelaskan apa fungsi dan bagaimana cara meletakkan tag tersebut jika ingin menampilkan atau tidak menampilkan sebuah objek yang sudah kita pilih.

      Contoh - Breadcrumbs
      jika kita membuka halaman HOME, maka kita tidak akan pernah menemui link breadcrumbs disana, tetapi saat berada pada halaman posting, tepat diatas title judul biasanya terdapat link breadcrumbs. dengan tag kondisional link breadcrumbs sudah diatur untuk Tidak Ditampilkan jika berada pada halaman/URL Home.

      Hapus
    3. sip..sip..sip..
      link Breadcrumbs.. yg ada nomor2 di bawah home ya Mas..?,

      tp ...kalo diliat sepintas..dari template mas inih,, seperti tidak ada yg dihilangkan/disembunyikan pake tag kondisi.. ada side bar, ada related postnya juga..dll..

      Kang JUM dan Mas Fiu:
      Mohon dgn sangat bantuannya.. jika ada pot melayang ke sy ya?

      Mas admin inih nda lama lagi..akaan...Kang Juuuuuuum....Mas Fiuuuu...tuulooooong..!

      Hapus
    4. nda lama lg akan apa mas al ?

      Hapus
    5. dilempar Pot Mas Fiu.!,
      Shizuka mana lagi..!

      Vy..
      untuk url home dan halaman post. maksudnya.. selama ini.. jika kita membuka halaman post, beban url home juga ikut jika kita membuka halaman post ya?. begitupun sebaliknya?

      ibaratnya. sy garuk kepala..mas fiu ikut juga garukin kepala sy. begitu pemahaman dari fungsi/kegunaan tag kondisi inih ya?

      Hapus
    6. waduuuuuh ,,,, masa mw dilempar pot ,,,,,, :o

      Hapus
  2. Ikut nyimak saja dulu ,maklum emak2 gak gitu tahu soal ginian.

    BalasHapus
  3. Banyak juga fungsi tag-nya [-(

    BalasHapus
  4. jadi initinya, tag kondisional ini berfungsi untuk menampilkan maupun menyembunyikan elemen pada halaman yia, Bos...

    BalasHapus
    Balasan
    1. kurang lebih seperti itu bos, jadi sebagai alternatif untuk menghilangkan sebuah halaman yang tidak ingin ditampilkan jika halaman saat ini berada dimana, hanya dihilangkan Bukan Dihapus

      karena kalau dihapus kita akan sulit untuk mengembalikan lagi objek tersebut, tetapi jika dihilangkan, cukup hapus tag kondisional yang mengapit objek tersebut, maka halaman akan kembali seperti semula.

      Dan cara inilah yang saya lakukan untuk membuat halaman blog ini cepat terbuka (Fast Loading), dibanding menghapus widget karena merasa akan menambah beban blog,

      Hapus
  5. tampak tampaknya (bukan penampakan) mbak adalah raja coding kaum wanita nih,,, di emansipasikan aja mbak... hehehe salut salut... (o)

    BalasHapus
    Balasan
    1. sederhana saja mas, karena memang inilah materi yang selalu saya pelajari waktu kuliah, mereka yang belajar Otodidak dan berhasil, dialah yang harus kita sebut RAJA.

      kalau Devy masih butuh bimbingan dari sahabat-sahabat lainnya kok, termasuk mas Wicky. hehe..!!

      Hapus
  6. Tadinya saya masih awam dengan kode seperti <b:if cond='data:blog.url [-(
    akhirnya skarang sudah tau sedikit demi sedikit fungsi dari kode ini. Soalnya di template kode tersebut ada lebih dari 2 ya mba :-? fungsinya sama semua kan :)

    BalasHapus
    Balasan
    1. secara keseluruhan fungsinya sama mas, namun cara meletakkan tag ini yang sulit, sama sepeti pengunaan robot.txt, untuk menentukan laman yang akan diindeks atau jangan dirayapi.

      Hapus
  7. Mantap artikelnya izin nyimak

    BalasHapus
  8. ditunggu kelanjutan pembahasan inih Mas..!
    step by step ya Mas.., soalnya bagi pemula seperti sy.. tidak cepat paham.. kalo tidak melihat langsung cara penerapannya.. jadi..kalopun nantinya ada pertanyaan yg sedikit membingungkan Mas.. dimaklumi sj ya?..

    terimahkasih tlah berbagi rahasia speed S77 nya Mas..,!

    BalasHapus
  9. Untuk menghilangkan daftar artikel di HOME?
    Saat kosong, biasanya diisi dengan apa nih, widget?
    Haha, maaf ilmu blogging saya masih minim

    BalasHapus
    Balasan
    1. boleh dikosongkan dan boleh diisi,
      widget, kata sambutan, profile info dan lain-lain,

      Hapus
  10. Maksud tulisan apa ini ya Kak?
    Ada inggris-inggrisnya juga..,

    BalasHapus
    Balasan
    1. belajar bahasa indonesia dan bahasa inggris, biar nanti nilai ujiannya dapat nilai bagus, hehe..!!

      Hapus
  11. saya ikut belajar mbak tag kondisional nya kebetulan nihh kadang kalo lihat koding mata nih tanpa sadar suka bercucuran air mata karna bingung :v

    BalasHapus
  12. mesti di baca berulang2 ni....supaya lebih paham lagi

    BalasHapus
  13. perlu dipahami dengan pelan2 nich kalau tentang HTML :))

    BalasHapus
  14. Alamak, puyeng saya😯, saya copy paste saja kalau edit html,qiqiqi

    BalasHapus
  15. nambah ilmu mbak :) makasih

    BalasHapus
  16. Terima kasih, mba.... untuk penjelasannya :D
    memang ya utak-atik kode template itu sebenarnya asik sampe kadang suka lupa waktu tapi ya itu suka bikin migrain...

    BalasHapus
  17. masih belum bisa memahami dengan masalah template saya mbak, tp msh mencoba selalu untuk mempelajarinya..

    BalasHapus

  • Design
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • JQuery
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • CSS
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • HTML
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • JavaScript
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK