Tag Kondisional Halaman Blogspot dan Cara Penggunaannya

Posted by Desain Kode Tuesday, December 22, 2015 0 comments
Seperti yang saya janjikan sebelumnya dalam artikel Cara Mengedit Blog dengan Mudah, pada artikel kali ini saya mau menjelaskan secara rinci tentang penggunaan Tag Kondisional yang ada pada blog. Tapi semua yg akan dipaparkan dalam artikel ini, hanya akan berfungsi dan berguna pada platform blogspot saja.
Apa sih Tag Kondisional itu? bagaimana penggunaannya dalam blogspot? trus, apa-apa saja jenis dari Tag Kondisional itu? mungkin sudah ada dari kita yang mulai bertanya-tanya akan hal tersebut.
tag kondisional blogspot dan cara menggunakannya

Langsung saja, Tag Kondisional bisa dikatakan adalah sebuah perintah untuk kode-kode seperti css, js html, objek atau elemen-elemen lain ingin di tampilkan atau tidak pada sebuah jenis halaman yang sudah diberikan pihak blogger. Mungkin kebanyakan blogger belum mengetahui hal ini, bisa terlihat dari banyaknya blog yang mana masih menggunakan template standar dan masih mempunyai tampilan yang sama hampir pada semua jenis halaman pada blognya.

Ada beberapa jenis halaman yang di berikan pihak blogger sewaktu kita mendaftarkan blog dimana etiap orang mempunyai jatah jumlah halaman yang sama satu dengan yang lainnya. Jenis-jenis Halaman gratis yang di maksudkan di sini adalah sebagai berikut :
  1. Halaman utama/ Homepage blog.
  2. Halaman statis/ Laman. 
  3. Halaman Item/ Postingan blog.
  4. Halaman Label dan Label tertentu blog.
  5. Halaman Index blog (Halaman pada blog selain halaman item)
  6. Halaman Asrip blog.
  7. Halaman 404/ error page. (Halaman yang tidak ditemukan)
  8. Halaman Tertentu dalam blog.
Nantinya setelah membaca artikel ini, saya yakin akan ada banyak hal baru yang dapat di lakukan untuk mempercantik, memperindah, dan membuat tampilan yang menarik dan berbeda untuk blog anda masing-masing. Cobalah dari hal kecil seperti menampilkan salah satu widget pada salah satu jenis halaman yang ada. Lanjut, sebelum dipaparkan penggunaan penggunaan tag kondisional untuk beberapa jenis halaman tersebut, perlu diketahui terlebih dahulu tentang 2 tanda kondisi yang akan kita digunakan dalam tag kondisional yaitu sebagai berikut :

  • "==" (2 samadengan) tanda ini berarti kondisi objek atau kode akan ditampilkan/ diproses
  • "!=" (seru dan samadengan) tanda ini berarti kondisi kecuali/ objek atau kode tidak akan diproses

Berikut ini beberapa penggunaan tag kondisional dari beberapa jenis halaman yang sudah disebutkan diatas (lihat perbedaan tiap jenis halaman dalam contohnya) :
  1. Halaman utama/ Homepage blog.
    Contoh : http://desainkode.blogspot.com/
    Kode Tag kondisionalnya adalah :
    <b:if cond='data:blog.url == data:blog.homepageUrl'>
    OBJEK/ELEMEN
    </b:if>
  2. Halaman statis/ Laman.
    Contoh : http://desainkode.blogspot.com/p/
    Kode Tag kondisionalnya adalah :
    <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
    OBJEK/ELEMEN
    </b:if>
  3. Halaman Item/ Postingan blog.
    Contoh : http://desainkode.blogspot.com/2015/12
    Kode Tag kondisionalnya adalah :
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    OBJEK/ELEMEN
    </b:if>
  4. Halaman semua Label blog.
    Contoh : http://desainkode.blogspot.com/search/label/
    Kode Tag kondisionalnya adalah :
    <b:if cond='data:blog.searchLabel'>
    OBJEK/ELEMEN
    </b:if>
  5. Halaman Label Tertentu blog.
    Contoh : http://desainkode.blogspot.com/search/label/
    Kode Tag kondisionalnya adalah :
    <b:if cond='data:blog.searchLabel == &quot;NAMA_LABEL&quot;'>
    OBJEK/ELEMEN
    </b:if>
  6. Halaman Index Blog
    Kode Tag kondisionalnya adalah :
    <b:if cond='data:blog.pageType == &quot;index&quot;'>
    OBJEK/ELEMEN
    </b:if>
  7. Halaman Arsip Blog
    Contoh : http://desainkode.blogspot.com/2015_01_1_archieve.html
    Kode Tag kondisionalnya adalah :
    <b:if cond='data:blog.pageType == &quot;archive&quot;'>
    OBJEK/ELEMEN
    </b:if>
  8. Halaman 404/ error page.
    Kode Tag kondisionalnya adalah :
    <b:if cond='data:blog.pageType == &quot;error_page&quot;'>
    OBJEK/ELEMEN
    </b:if>
  9. Halaman Tertentu/ khusus.
    Kode Tag kondisionalnya adalah :
    <b:if cond='data:blog.url == &quot;URL_HALAMAN&quot;'>
    OBJEK/ELEMEN
    </b:if>

Penjelasan Penggunaan Tag Kondisional :

Tag Kondisional diawali dengan kode <b:if> dan diakhiri dengan penutup </b:if>. Sementara data:blog.url menunjukkan URL atau link dari sebuah halaman (keadaan halaman saat ini). Tanda "==" menunjukkan kondisi secara langsung dan  tanda "!=" menunjukkan kondisi secara tidak langsung.
Contoh 1 :
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<style type="text/css"> 
ELEMEN/OBJEK
</style>
</b:if>
Dapat diartikan bahwa jika halaman saat ini adalah halaman homepage maka ELEMEN/OBJEK akan diproses/ ditampilkan.

Contoh 2 :
<b:if cond='data:blog.url != data:blog.homepageUrl'>
<style type="text/css"> 
#desain
</style>
</b:if>
Dapat diartikan bahwa jika halaman saat ini tidak sama dengan halaman homepage, maka semua objek/elemen yang memiliki ID (tanda pagar) desain, akan disembunyikan (none). dengan kata lain ID desain hanya akan diproses pada halaman homepage.

Ini salah satu contoh blog yang menggunakan tag kondisional : http://editkode-live.blogspot.co.id/. Blog tersebut sebenarnya halaman demo dari Blog DesainKode. Dapat dilihat, contoh kecilnya banyak elemen/objek yang ada di halaman hompage tidak saya tampilkan di halaman lain (halaman postingan dan halaman statis). begitupun sebaliknya, ada beberapa objek di halaman postingan dan halaman statis yang tidak nampak di halaman utama. Tentu saja semuanya menggunakan fungsi Tag Kondisional. Coba lihat sendiri di source kode blognya.

Oke. Demikian penjelasan beberapa hal penting tentang Tag Kondisional dan penggunaannya. Semoga artikel ini bisa dipahami dengan baik saya dan harap setelah membaca artikel ini, banyak inovasi dan kreasi-kreasi baru yang bisa anda lakukan untuk blog anda. Buat hal-hal baru yang berbeda pada setiap jenis halaman yang telah diberikan gratis oleh pihak blogger. Perbanyak latihan dan ciptakan blog dengan desain template terbaru. Sama seperti yang saya katakan dalam artikel sebelumnya, jika ingin mencoba bermain-main terkait kode css, js dan html, gunakan http://jsfiddle.com untuk melihat hasilnya sebelum di terapkan di blog anda. Sekian artikel tentang Tag Kondisional dan cara penggunaannya. Dan ingat, tetap kunjungi blog desainkode. akan ada banyak hal-hal yang baru. Terima Kasih.

Tautan (link) hidup dalam komentar bersifat nofollow.
Untuk menyisipkan tautan dengan aman, gunakan kode [url=http://nama_situs.com]Teks Tautan[/url]
Untuk menyisipkan kode, gunakan tag <i rel="pre">KODE ANDA</i>
Untuk menyisipkan gambar, gunakan kode [img]URL GAMBAR[/img]
Untuk menyisipkan judul, gunakan tag <b rel="h4">JUDUL ANDA DI SINI...</b>
Untuk menciptakan efek tebal gunakan tag <strong>TEKS ANDA DI SINI...</strong>
Untuk menciptakan efek huruf miring gunakan tag <em>TEKS ANDA DI SINI...</em>

Konversi Kode di Sini

:) :( :p :D :o ;) 8-) 8:) :/ :'( 3:) O:) :* <3 ^_^ -_- o.O O.o >:o :v :3
Batal