Mengenal Tag kondisi pada template Blogger Update!
Hai blogger pemula selamat datang kembali di Blognya Kak Ryan, kali ini saya nggak buat artikel topik lain tapi topik kali ini nggak jauh-jauh dari blogger. Kebetulan selama saya belajar ada banyak pengetahuan yang saya dapatkan, dan saya tidak tahu mau disimpan kemana. Suatu saat pasti kita lupa, nah oleh karena itu saya simpan saja pengentahuan yang sudah saya dapatkan di blog ini.
Dari oktober 2018 lalu, saya sudah bertekad untuk mempelajari struktur dasar dari template blogger. Dan sampai sekarang saya belum begitu menguasai semuanya, mungkin hanya sekitar 20% saja yang saya ketahui. Template blogger disusun dengan menggunakan bahada pemrograman jenis xml, didalam dokumen ini tersimpan semua kode penyusun halaman blog kita. Mulau dari css, layout, dan javascript pendukungnya.
Sepengetahuan saya pada blogger banyak menggunakan javascript dan interaksi antar dokumenya biasanya memlalui RRS atau biasa kita sebut dengan Api, namun disini template blogger diberikan dalam format dokumen xml.
Nah pada dokumen xml itu ada beberapa kode program yang dimana digunakan untuk mendefinisikan suatu halaman. Mulai dari tag kondisi, pengisi string, serta tag section dan witget dan semua elemen penyusun template. Berikut ini beberapa cara benerapan kode tag function template blogger yang saya pahami berdasarkan pengalaman, kode dan fungsi ini saya dapatkan dari hasil eksperimen edit template secara otdidak dan juga berkat teman-teman yang sudah merefrensikan peggunaan kode functional template blogger yang benar.
Kumpulan Tag kondisi beserta Fungsinya
Tag kondisi pada template dimulai dengan tag pembuka <b:if> dan ditutup dengan tag penutup </b:if> sedangkan suatu kondisi yang ingin kita jadikan sebagai pengukur / swittcher berada dalam nama "cond"Dibawah ini adalah susunan kondisi yang nilai kondisionya sudah kita tentukan, barisan kode HTML Mu.. diantara kondisi dibawah ini hanya akan dijalankan pada saat kondisi itu terpenuhi.
Contoh :
data:blog.isMobile akan menghasilkan nilai "true" jika blog diakses lewat mobile. Nah saat itu juga kondisi b:if terpenuhi, maka kode HTML yanh kita tuliskan dkantara tag kondisi ini akan dijalanlankan.
Tetapi jika diakses lewat dekstop, maka data:blog.isMobile Menghasilkan nilai false, sehingga kondisi tidak terpenuhi dan kode HTML Mu... tidak akan dijalankan sama sekali.
<b:if cond='data:blog.isMobile'>
HTML Mu...
</b:if><b:if cond='data:blog.isMobileRequest == "true"'>
HTML Mu....
</b:if>Menampilkan Elemen hanya jika blog diakses lewat dekstop / pc
<b:if cond='data:blog.isMobileRequest == "false"'>
HTML Mu....
</b:if>Menampilkan element jika kata kunci "amp" dalam URL ada isinya sesuai dengan angka 1 yang kita kondisikan. Contoh https://UrlBlogmu.blogspot.com/?amp=1
kode HTMlmu dibawah ini hanya akan tampil pada saat orang mengakses lewat URL seperti diatas.
<b:if cond='data:view.url == data:view.url params { amp: "1" }'>
HTML Mu....
</b:if>Kata amp dan angka satu bisa kamu ganti dengan karakter lain untuk membuat susunan URL sendiri sebagai swittcher.
Hanya menampilkan element pada halaman home (index) dan halaman artikel (item).
<b:if cond='data:blog.pageType not in {"static_page","error_page"} and data:blog.isMobileRequest == "true" and not data:blog.searchQuery'>
HTML Mu...
</b:if>Variasi Lain
<b:if cond='data:view.url == data:view.url params { amp: "1" }'>
Kode HTML Mu
</b:if>Penggunaan cukup sobat ganti parameter amp:1, elemen yang dilapisi oleh kondisi ini akan tampil saat kondisi terpenuhi. Contoh https://ini-keren1.blogspot.com?amp=1
Hanya menampilkan elemen HTML Mu... Pada halaman index (home) saja.
<b:if cond='data:blog.homepageUrl == data:blog.url'>
HTML Mu...
</b:if>Hanya menampilkan elemen HTML Mu... Hanya pada halaman item atau halaman artikel saja.
<b:if cond='data:blog.pageType == "item"'>
HTML Mu...
</b:if>Hanya menampilkan kode HTML Mu.. Pada halaman arsip saja
<b:if cond='data:blog.pageType == "archive"'>
HTML Mu...
</b:if>Menampilkan elemen HTML Mu.. Hanya pada halaman statis saja atau pages blogger.
<b:if cond='data:blog.pageType == "static_page"'>
HTML Mu...
</b:if>Barisan HTML Mu... Hanya akan ditampilkan pada halaman Error 404 saja.
<b:if cond='data:blog.pageType == "error_page"'>
HTML Mu...
</b:if>HTML Mu.. Tidak akan ditampilkan pada halaman pencarian.
<b:if cond='data:blog.searchQuery'><b:else/>
HTML Mu...
</b:if>Meta Tag dibawah ini bisa kamu gunakan untuk membuat sebuah area witget kosong yang bisa diisi dengan elemen apapun pada menu tata letak..
NamaKelas dan ID (NamaID) elemen bisa kamu buat sesuka hati, tapi nama ini akan mendefinisikan Class dan Id elemen tersebut secara default agar bisa kita customisasi tampilanya melalui css.
<b:section class='NamaKelas' id='NamaID' showaddelement='yes'/>Dalam pembuatan section ada name dan value yang bisa digunakan. Selain id="id unik", misalnya locked='false' (Agar witget tak bisa dihapus) visible='false' (agar witget bisa ditampilkan dan disembinyikan lewat menu tata letak).
Meta untuk menyimpan css halaman, semua css bisa disimpan didalam meta tag ini:
Jangan Hapus kode yang saya tambahkan tujuanya agar semua template terdefinisilkan.
<style type="text/css">
<!-- /*<b:skin><![CDATA[
CSS Mu Disini....
]]></b:skin>Tempat penyimpanan CSS untuk mengatur layout pada tata letak blogger.
<b:template-skin>
<![CDATA[
CSS Layout Mu Disini....
]]></b:template-skin>Kegunaan Dari kode CDATA
Ketika anda menulis sebuah skrip, biasanya skrip tersebut mengandung karakter kuote, atau karakter entiti yang bisa menyebabkan struktur dokumen .xml tidak valid. Biasanya pada blogger, fitur pembaca xml secara umum akan merender / merapikan barisan tersebut. Namun terkadang bisa menyebabkan error, agar pembaca xml mengabaikan skrip yang kamu buat bisa ditambahkan kode CDATA hitung-hitung menghindari error lah. Contoh penggunaan dibawah ini:<script type='text/javascript'>
//<![CDATA[
Script Yang ingin kamu Tulis
//]]>
</script>
<style type='text/javascript'>
//<![CDATA[
Kode CSS kamu
//]]>
</style>Selesai sudah pembahasan kita mengenai sekumpulan kode meta tag serta kondisi yang digunakan dalam pembuatan template blogger.
Itulah semua kode meta tag serta kondision yang saya ketahui untuk kode kode lainya akan saya bahas dilain waktu mengingat setiap kode juga membutuhkan penjelasan. Jika kamu suka mendesain ulang bahkan membuat template blogger sudah pasti kode diatas sangat berguna sekali. Agar mudah mengingatnya kamu bisa membookmark halaman ini dan selalu membukanya ketika kamu lupa, saya jamin kalau kamu rajin membuat atau mengedit template kamu akan paham dalam waktu yang singkat.