Tahap Awal Belajar Tag Kondisional

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.

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.