Tampilan Template Berbeda Tiap Halaman dengan Blogger Conditional Tag

Conditional Tag Blogger - Blog Tutorial - Minggu lalu seorang sahabat mengingatkan saya tentang conditional tag, so tidak ada salahnya sekalian  saya tulis disini supaya semua teman-teman bisa memahami lebih tentang HTML modifikasi pada berbagai praktek penggunaan conditional tag dalam template Blogger. Jadi khusus pengguna blog berplatform wordpress bisa skip dulu ya, karna ini hanya untuk blog berplatform blogspot.

Widget pada halaman blog

Nah, tapi sebelum kita berangkat untuk mempelajari conditional tag mari kita sepakati terlebih dahulu bahwa semua bagian dalam sebuah halaman blog terdiri dari kumpulan gadget/widget termasuk halaman artikel, sidebar, header, footer dan lain sebagainya.

Conditional Tag atau kita sebut dalam bahasa indonesianya sebagai tag kondisional blogger merupakan sebuah kondisi tag yang digunakan untuk mengatur suatu gadget/widget atau sebuah elemen tertentu pada blog untuk ditampilkan atau tidak ingin ditampilkan dalam halaman khusus (spesifik).

Sebagai contoh, misalnya Pada halaman utama blog (beranda)  kita hanya ingin menampilkan sidebar saja dan ketika pengunjung membuka halaman lainnya (selain beranda) maka sidebar tersebut tidak akan ditampilkan lagi kepengunjung. Nah, dalam melakukan tugas mengatur sidebar tampil dan tidak ini digunakanlah Blogger Conditional Tag.

Apa Itu Blogger Conditional Tag ?

Apa itu tag kondisional? Blogger Conditional Tag merupakan sebuah tag yang hanya terdapat pada template blog berplatform blogger (blogspot.com). Mengapa dinamakan Tag kondisi adalah berfungsi untuk mengkondisikan suatu elemen / widget halaman tertentu di blogger, sehingga dengan adanya Blogger Conditional Tag inilah kita bisa membuat sebuah template blogger yang lebih fleksibel.

Adapun Beberapa Fungsi Tag Kondisional pada template blogger ini antara lain adalah :

• Menyembunyikan Tampilan Sidebar pada halaman posting blogspot
• Menyembunyikan Tampilan sidebar pada beranda blogspot
• Meng-costumasi Template blogger supaya tampil berbeda tiap halamannya
• Menyembunyikan elemen/ gadget tertentu blogger.
• Membuat Tampilan yang template berbeda setiap halaman blog
• Membuat Tampilan Costum Halaman statis pada blogspot
• Membuat Meta menjadi dinamis dan berbeda setiap halaman blog
• Mencegah konten duplikat pada blog

Struktur kode Blogger Syntax Conditional

Pada Umumnya, Kita mengenal struktur dari Syntax Kondisi pada blogger adalah seperti dibawah ini:

<b:if cond='[kondisi]'> ... </b:if>

Seperti pada contoh diatas, Blogger Conditional Tag ini akan dimulai dengan tag <b:if> dan di tutup dengan tag </b:if>. Kemudian tag <b:if diikuti dengan atribut kondisi yakni cond. Atribut cond sebagai condition atau kondisi berfungsi sebagai subjek suatu kondisi, dan kode[Kondisi] merupakan atribut objek yang akan menjelaskan maksud dari tag conditional.

Berbagai Contoh Tag Kondisional pada template Blogger

Untuk menjelaskan bagaimana implementasi dari conditional tag ini dalam meng-kondisikan sebuah tampilan halaman blog maka berikut ini adalah beberapa contoh umum yang digunakan saat mengkostumisasi template blog pada paltform blogspot.

Conditional Tag pada Halaman Index blogspot

Biasanya tag kondisi ini digunakan untuk mengecek/membandingkan kondisi tampilan pada halaman indeks. Halaman Indeks ini masih luas dimana didalamnya yang termasuk adalah seperti halaman depan (homepage) blog, halaman label atau kategori atau bisa juga sebuah indeks halaman arsip.

<b:if cond='data:blog.pageType == &quot;index&quot;'> ini adalah isi yang dijalankan... </b:if>

Bila kita terjemahkan kondisi tag pada template blog seperti diatas maka akan berarti bahwa "jika kondisi" halaman blog sama (==) dengan index maka yang akan dijalankan adalah isi dalam tag kondisi tersebut".


Conditional Tag Meta Description

<b:if cond='data:blog.metaDescription != &quot;&quot;'> isi meta khusus... </b:if>

Nah khususnya bagi yang memahami tentang seo dalam hal upaya blog cepat diindex google maka Tag kondisi ini sudah tidak asing, memang tidak akan terlihat oleh pembaca. Conditional tag ini digunakan untuk mengecek/membandingkan kondisi meta data blog. Artinya adalah jika Meta description pada halaman blog tidak ada (kosong) maka yang ada diantara tag kondisi akan ditampilkan.

Conditional Tag Halaman Artikel

Untuk mengecek atau membandingkan kondisi posting blog dengan halaman lain maka tag kondisi ini diperlukan. Posting artikel adalah halaman artikel (single post) bukan merupakan keseluruhan / kumpulan posting.

<b:if cond='data:blog.pageType == &quot;item&quot;'> isi yang dijalanakan... </b:if>

Nah bila kita menerjemahkan tag kondisi diatas kurang lebih menyatakan bahwa "jika kondisi" halaman blog sama dengan (==) halaman artikel maka kode yang ada diantara tag kondisi ini akan ditampilkan pada halaman artikel. Sebagai standart umum blog di blogspot.com, biasanya posting artikel memiliki URL berformat kombinasi huruf bulan, tahun, dan judul artikel misal; http://namabloganda.blogspot.com/2010/09/judul_artikel.html.

Conditional Tag Halaman Statis

Sedangkan untuk mengkondisikan tampilan pada sebuah halaman, Contidional tag ini juga bisa digunakan untuk mengecek/membandingkan kondisi halaman blog dengan halaman statis (page).

<b:if cond='data:blog.pageType == &quot;static_page&quot;'> isi konten ini yang dijalan hanya pada halaman </b:if>

Halaman statis (static page) adalah halaman lain artikel atau halaman yang berdiri sendiri dan isinya tidak mengambil dari database artikel. Bila kita menerjemahkan kode diatas maka akan menyatakan bahwa "jika kondisi" halaman blog sama dengan (==) halaman statis maka hanya kode yang berada diantara tag kondisilah yang akan ditampilkan.

Conditional Tag Halaman Arsip

Tag kondisi ini dijalankan untuk mengecek/membandingkan kondisi halaman blog dengan halaman arsip. Halaman arsip (archive page) adalah halaman yang menampilkan sekumpulan artikel yang diambil database blog.

<b:if cond='data:blog.pageType == &quot;archive&quot;'> Isi halaman archive... </b:if>

Bila kita terjemahkan tag kondisi pada kode diatas maka akan menyatakan bahwa "jika kondisi" halaman blog sama dengan (==) halaman archive maka isi kode yang berada diantara tag kondisilah yang akan ditampilkan pada halaman arsip saja.

Conditional Tag Halaman 404 Not Found

Bila anda menemukan sebuah blog yang kelihatan berbeda saat anda sampai dihalaman "404" maka bisa jadi Conditional tag ini digunakan pada halaman blog tersebut. Tujuannya adalah untuk mengecek/membandingkan kondisi URL 404 Not Found (tidak ditemukannya halaman).

<b:if cond='data:blog.pageType == &quot;error_page&quot;'> ... </b:if>

Misalnya saat tag conditional dapat dijelaskan sebagai "jika kondisi" URL halaman blog tidak tersedia  (404 not found), maka kode yang ada diantara conditional tag akan ditampilkan pada halaman tersebut".

Adapun pengkondisian halaman ini biasanya digunakan saat menjaga kemungkinan halaman telah dihapus oleh pemilik blog, namun masih saja terindex oleh mesin pencari sehingga menyebabkan pengunjung tersesat. Hasilnya, ketika ada pengunjung membuka halaman tersebut maka pemberitahuan ketidak-adanya halaman (Page Not Found) dijalankan.

Conditional Tag Halaman Depan (Beranda Blog)

Sebenarnya halaman depan identik dengan indeks, hanya saja dengan cakupan lebih spesifik. Tag kondisi ini digunakan untuk mengecek/membandingkan kondisi halaman blog sebgai URL halaman depan atau beranda blog.

<b:if cond='data:blog.url == data:blog.homepageUrl'> Hanya tampil diberanda blog...</b:if>atau
<b:if cond='data:blog.homepageUrl == data:blog.url'> kode ini hanya di halaman depan... </b:if>

Seperti contoh pada kode diatas menyebutkan bahwa "jika kondisi" halaman blog sama dengan (==) URL halaman depan, maka yang akan tampil pada browser adalah kode yang ada diantara conditional tag tersebut.

Conditional Tag Halaman URL Tertentu

Adapun maksud dari praktik pengkondisian ini adalah untuk mengecek/membandingkan kondisi URL halaman blog. Seperti contoh dibawah ini yang menyatakan bahwa "jika kondisi"'URL halaman blog sama dengan (==) URL halaman blog, maka yang akan tampil pada pengunjung adalah kode yang ada diantara conditional tag.

<b:if cond='data:blog.url == "[URL]"'> Jalankan kode ini... </b:if>

Biasanya pengkondisian ini digunakan untuk mengatur suatu elemen yang hanya ingin ditampilkan atau bahkan tidak ditampilkan pada halaman yang lebih spesifik. Kita ambil contoh, misalkan kita akan menampilkan banner iklan di bagian sidebar blog namun hanya pada halaman tukar link saja (Baca juga: http://blog.fispol.com/p/tukar-link.html). Maka implementasinya adalah:

<b:if cond='data:blog.url == "http://blog.fispol.com/p/tukar-link.html"'> [disini kode gadget atau elemen yang akan ditampilkan] </b:if>

Cara Membuat Template Blogger Yang Berbeda Setiap Halaman

Lanjut ? belum Ngantuk kan? Tahan dulu deh. kita udah nyampai klimaksnya nih :D. Biar asyik coba ambil segelas kopi biar hangat...

...Mungkin anda heran, mengapa tampilan (sebelum berganti template) blog ini  berbeda setiap halamannya. Coba perhatikan halaman Tukar link, Home, dan halaman Kategori. Pada bagian home ditampilkan sidebar lalu pada bagian halaman tidak ditampilkan.

Nah berikut adalah rahasia tersebut, kita akan menggunakan Tag Kondisi diatas untuk costum template atau menampilkan bentuk template berbeda setiap halamannya. Dengan ini kita akan bisa menyembunyikan sebagaian sidebar / widget pada halaman tertentu yang kita inginkan. Berikut Penggunaanya:

- Penggunaan Conditional Tag : 1 Gadget atau Elemen

<b:if cond='data:blog.pageType == &quot;item&quot;'>
Gadget atau Elemen [akan ditampilkan jika bernilai benar (true)]
</b:if>

Gadget atau Elemen yang terletak diantara conditional tag akan ditampilkan jika hasil pengecekan/perbandingan dalam atribut cond (yaitu 'data:blog.pageType == "item"') adalah benar (true). Atau lebih spesifiknya; jika halaman blog yang sedang kita lihat/tampil pada alamat browser merupakan URL suatu item (misal; http://namablog.blogspot.com/2005/11/artikelkublog.html) maka Gadget atau Elemen yang ada diantara tag kondisional akan ditampilkan jika tidak maka Gadget atau Elemen tidak akan ditampilkan.

- Penggunaan Conditional Tag : 2 Gadget atau Elemen

<b:if cond='data:blog.pageType == &quot;item&quot;'>Gadget atau Elemen [akan ditampilkan jika bernilai benar (true)]
<b:else/>
Gadget atau Elemen [akan ditampilkan jika bernilai salah (false)]
</b:if>

Ini lebih rumit lagi... Hmmmm tarik napas dulu sambil putar kepala eh... otak...Misal; saya memiliki dua buah "laptop" yang terdiri dari 2 merk, "merk A" dan "merk B", suatu hari saya diberi pesanan editing gambar yang mengharuskan saya menggunakan software "digital imaging" yang hanya terdapat pada laptop merk B, maka saya pun menggunakan laptop merk B dalam mengerjakan pesanan editing gambar tersebut. Jika saya tuliskan maka kodenya menjadi seperti dibawah ini:

<b:if cond='Laptop == &quot;Digital Imaging&quot;'>
Merk A
<b:else/>
Merk B
</b:if>

Laptop merk A tidak digunakan karena ternyata hasil perbandingan cond tidak memungkinkan menggunakan laptop merk A (tidak ada software digital imaging) atau hasil pengecekan/perbandingan nilainya salah (false). Laptop merk B digunakan karena hasil perbandingan/pengecekan cond bernilai salah (false).

Sebenarnya contoh ini tidak begitu mengenai sasaran tapi bingung memberikan contoh, ada ide?

Peranan tag <b:else/> digunakan sebagai alternatif jika ternyata hasil perbandingan/pengecekan bernilai salah (false) dan kita ingin menampilkan gadget atau elemen hanya jika hasilnya bernilai salah (false). Tetapi jika ternyata hasil perbandingan bernilai benar (true) maka gadget atau elemen setelah tag <b:else> tidak akan ditampikan.

- Penggunaan Conditional Tag 1+ Kondisi dan 1+ Gadget atau Elemen

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
Gadget atau Elemen [hannya akan ditampilkan jika kondisi bernilai benar (true)]
<b:else/>
Gadget atau Elemen [Hanya akan ditampilkan jika kondisi bernilai salah (false)]
</b:if>
</b:if>

Memahami Operator Conditional Tag pada Blogger

Untuk memperjelas pengetahuan kita tentang tag pengkondisian ini maka kita perlu mengetahui standart operator yang digunakan. Operator tag kondisi ini merupakan alat khusus untuk membandingkan dua buah nilai. Saat ini, operator tag kondisi blogger terdiri dari 2 jenis antara lain:

1. Operator "sama dengan" ( ==) atau dalam bahasa koding lebih dikenal sebagai "is equal to"

Contoh Kasus 1

Seseorang memberikan teka-teki untuk menebak isi telur dalam sebuah kotak, jika saya menjawab benar maka saya diberi uang Rp. 10.000,- jika saya menjawab salah saya tidak diberi uang. Sedangkan didalam kotak itu terdapat 10 telur, kemudian saya menjawab 10 telur. Maka conditional tag ditulis sebagai berikut:

<b:if cond='10 telur == 10 telur'> Saya diberi uang Rp. 10.000,- </b:if>

Jawabannya : maka saya diberi uang Rp. 10.000,-

Contoh Kasus 2

Seseorang memberikan teka-teki untuk menebak isi telur dalam sebuah kotak, jika saya menjawab benar maka saya diberi uang Rp. 10.000,- jika saya menjawab salah maka saya harus membayar Rp. 10.000,- . Sedangkan didalam kotak itu terdapat 10 telur, kemudian saya menjawab 5 telur. Maka conditional tag ditulis sebagai berikut:

<b:if cond='10 telur == 10 telur'> Saya diberi uang Rp. 10.000,- <b:else/> Saya membayar Rp. 10.000,- </b:if>

Jawabannya : maka saya membayar Rp. 10.000,-

2. Operator "tidak sama dengan" (!=) atau dalam bahasa script-nya dibaca "is not equal to"

Dari namanya saja tentunya anda sangat paham dengan operator ini, yang merupakan makna terbalik (kebalikan) dari operator (==) sehingga sepertinya tidak harus dijelaskan lagi :). Atau mungkin mau ikut menjelaskan? Silahkan tinggalkan pada kotak komentar...

Kalimat Akhir | Conditional Tag

Selesai belajar tentang Conditional tag...berekspresi dan berpusing-pusing ria, jangan lupa siapkan peralatan untuk berfikir (makanan ringan, kopi dan obat sakit kepala). Selamat Belajar, Salam Blogger :).

Terkait dengan Tampilan Template Berbeda Tiap Halaman dengan Blogger Conditional Tag:

Tampilan Template Berbeda Tiap Halaman dengan Blogger Conditional Tag ini ditulis oleh Geasera pada tanggal Senin, 14 Januari 2013