Kumpulan Tag Conditional Blogger dan Fungsinya - Kode tag kondisional ini memiliki fungsi untuk menampilkan dan menyembunyikan widget tertentu yang ada pada blogger. Misalnya, Anda ingin menampilkan widget popular post di homepage blog tetapi ketika berada di halaman postingan widget popular post tidak ditampilkan atau disembunyikan. Hal ini dapat Anda lakukan dengan cara menambahkan kode tag conditional pada bagian popular post atau widget lainnya.
Dalam dunia pemrogramman ada banyak jenis tag conditional, namun disini saya akan menjelaskan beberapa kumpulan tag conditional untuk platform blogspot. Dalam pembuatan template blogger kode tag kondisional ini sangat membantu untuk mengatur beberapa elemen yang nantinya akan ditampilkan atau disembunyikan, oleh karena itu bagi Anda yang ingin membuat template blog sendiri atau yang suka edit template blog wajib mengetahui fungsi dasar dari tag conditional blogger ini.
Fungsi Tag Conditional
Tag Kondisional atau Conditional Tag adalah tag yang digunakan untuk mengatur elemen-elemen tertentu yang berfungsi untuk menampilkan atau menyembunyikan elemen pada kondisi tertentu.
Cara Membaca Tag Conditional
Kode tag kondisional selalu diawali dengan tag
kita ambil salah satu contoh tag conditional yang paling sering digunakan<b:if> dan ditutup dengan tag </b:if><b:if cond='data:blog.url == data:blog.homepageUrl'>OBJEK</b:if>
Dari contoh diatas kita lihat bahwa atribut cond memiliki nilai data:blog.url == data:blog.homepageUrl yang menunjukan kondisi yang diinginkan.
Cara Menampilkan Elemen Tertentu Menggunakan Tag Conditional
Kita ambil contoh dari kode diatas, misalnya saya ingin menampilkan sebuah objek hanya di halaman beranda atau homepage blog saja dan akan hilang atau tidak tampil pada halaman lainnya. Maka kode tag conditional yang digunakan adalah seperti dibawah ini.
<b:if cond='data:blog.url == data:blog.homepageUrl'>OBJEK</b:if>Cara Menyembunyikan Elemen Tertentu Menggunakan Tag Conditional
Kebalikan dari cara sebelumnya, misalnya saya ingin menghilangkan atau menyembunyikan sebuah objek pada halaman beranda atau homepage blog dan akan muncul atau tampil pada halaman lainnya. Maka kode tag conditional yang digunakan adalah seperti dibawah ini.
<b:if cond='data:blog.url != data:blog.homepageUrl'>OBJEK</b:if>Perhatikan baik-baik kedua contoh diatas hanya memiliki perbedaan antara == dan !=. Dimana arti dari == adalah sama dengan atau menyetujui kondisi. Sedangkan != adalah tidak sama dengan atau tidak menyetujui kondisi. Cukup mudah bukan, untuk menampilkan atau menyembunyikan suatu elemen pada blog Anda hanya perlu mengetahui kondisi tag dan menggunakan kedua pembanding diatas untuk mengatur keadaan atau kondisi.
Cara Menerapkan Tag Conditional
Ada dua cara penerapan kode tag conditional, yang pertama yaitu dengan menerapkannya secara langsung pada sasaran atau objek tertentu, yang kedua yaitu dengan menerapkannya secara tidak langsung dengan memanfaatkan kemampuan CSS.
Penerapan Kondisi Secara Langsung
Penerapan tag conditional secara langsung ini sangat mudah, Anda cukup mengapit sebuah objek atau sasaran dengan tag conditional, contohnya seperti dibawah ini.
<b:if cond='data:blog.url == data:blog.homepageUrl'>
OBJEK
</b:if>Artinya:
Jika keadaan halaman saat ini sama dengan URL halaman homepage, maka OBJEK akan ditampilkan atau difungsikan.
Penerapan Kondisi Secara Tidak Langsung
Penerapan tag conditional secara tidak langsung dapat dilakukan dengan cara mengapitkannya pada kode CSS selektor objek yang menjadi sasarannya. Untuk menghilangkan objek sasaran, kita gunakan deklarasi display:none pada bagian CSS seperti dibawah ini.
<b:if cond='data:blog.url != data:blog.homepageUrl'>
<style type='text/css'>
#obyek{display:none}
</style>
</b:if>
...
<div id='obyek'>OBJEK</div>Artinya:
Seluruh elemen yang memiliki ID obyek akan disembunyikan atau tidak akan ditampilkan apabila keadaan halaman saat ini tidak sama dengan URL halaman homepage.
Perlu Anda Ketahui:
- Dalam kode HTML untuk memanggil kode css selektor menggunakan atribut id atau class.
- Dalam kode CSS id ditandai dengan tanda pagar atau (hastag) sedangkan class ditandai dengan titik (dot).
Kumpulan Tag Conditional Blogger
Berikut beberapa kode tag kondisional yang dapat Anda gunakan untuk menampilkan atau menyebunyikan sebuah objek tertentu.
Tag Conditional Halaman Homepage
Halaman homepage adalah halaman murni yang tidak memiliki cabang atau folder, contohnya seperti ini.
https://tulisanhtml.blogspot.com
Tag conditionalnya seperti ini:
<b:if cond='data:blog.url == data:blog.homepageUrl'>
KODE OBJEK
</b:if>Tag Conditional Halaman Item
Halaman item adalah tipe halaman yang akan selalu berakhir pada nama berkas atau folder, contohnya seperti ini.
https://tulisanhtml.blogspot.com/2020/06/kumpulan-tag-conditional-blogger-terbaru.html
Tag conditionalnya seperti ini:
<b:if cond='data:blog.pageType == "item"'>
KODE OBJEK
</b:if>Tag Conditional Halaman Arsip
Ciri khusus pada halaman arsip adalah halaman homepage yang diikuti oleh cabang URL tahun, bulan, dan tanggal, namun tidak sampai kepada nama berkas halaman item, ciri khusunya yaitu pada akhir URL memiliki cabang archive.html, contonya Seperti ini.
https://tulisanhtml.blogspot.com/2020_01_08_archive.html
Tag conditionalnya seperti ini:
<b:if cond='data:blog.pageType == "archive"'>
KODE OBJEK
</b:if>Tag Conditional Halaman Statis
Halaman statis adalah jenis halaman spesial dari blogger yang berakhir pada nama berkas dan tidak akan masuk dalam daftar arsip blog, contohnya seperti ini.
https://tulisanhtml.blogspot.com/p/tentang-t.html
Tag conditionalnya seperti ini:
<b:if cond='data:blog.pageType == "static_page"'>
KODE OBJEK
</b:if>Tag Conditional Halaman Indeks
Halaman indeks adalah semua jenis halaman yang bukan halaman item.
https://tulisanhtml.blogspot.com
https://tulisanhtml.blogspot.com/p/tentang-t.html
https://tulisanhtml.blogspot.com/2020/06/kumpulan-tag-conditional-blogger-terbaru.html
Tag conditionalnya seperti ini:
<b:if cond='data:blog.pageType == "index"'>
KODE OBJEK
</b:if>Itulah kumpulan tag conditional blogger dan terbaru, kode tag kondisional diatas dapat Anda susuaikan dengan kebutuhan Anda, jika memiliki pertanyaan atau masukkan silahkan menghubungi kami melalui halaman kontak atau dengan memberikan komentar dibawah ini.
0 Comments: