Cara Menggunakan Tag Kondisional Blogspot

Mengelolablog.com - Pada dasarnya tag kondisional merupakan sebuah perintah dalam baris html untuk mengambil sebuah keputusan dari 2 kondisi atau lebih didalam template.

Namun begitu, tag kondisional juga dapat digunakan untuk memodifikasi satu tampilan atau lebih dari tipe - tipe halaman pada blog blogger, yaitu dengan memanfaatkan fungsi logika yang ada pada tag kondisional tersebut.

Tag kondisional merupakan tag perintah yang digunakan untuk memilih, sehingga tag tersebut membutuhkan satu atau lebih pernyataan pilihan, yaitu pernyataan yang akan menyatakan sebuah kondisi dimana kondisi tersebut bernilai benar atau bernilai salah,  atau bisa juga menyatakan kondisi yang sama dengan atau tidak sama dengan.

Seperti yang sudah saya informasikan sebelumnya pada artikel tentang tipe-tipe halaman blog dimana tag kondisional yang digunakan bersamaan dengan tipe halaman dalam template, ia juga dapat berfungsi untuk menentukan sebuah atau beberapa  gadget yang hendak di tampilkan di sebuah tipe halaman tertentu.

Oleh karena itu,  kita dapat manfaatkan fungsi tag kondisional untuk memberikan tampilan yang berbeda di tiap-tiap tipe halaman blog.

Saya berharap, semoga materi pada artikel berikut ini bisa membantu Anda dalam memahami cara menggunakan tag kondisional pada template blog

Operator logika pada tag kondisional

Dalam pengunaannya, tag kondisional mengenal 3 operator logika, yaitu operator logika AND, OR dan NOT. Ketiga operator tersebut diterjemahkan kedalam bentuk simbol, berikut penjelasannya

Operator logika #AND

Operator logika #AND menggunakan simbol  ==   , merupakan operator pembanding yang menyatakan kondisi tersebut BENAR, selain itu  Operator logika #AND  juga bisa berarti sebagai pernyataan  SAMA DENGAN.

Contoh :

<b:if cond='data:blog.pageType == "item"'>
<!--konten-->
</b:if>

Jika kode diatas diterjemahkan akan menjadi seperti berikut

"jika kondisi data tipe halaman blog adalah SAMA DENGAN  tipe halaman jenis item, maka kondisi yang berlaku adalah..."

Operator logika #NOT

Operator logika #NOT menggunakan simbol  !=   , juga merupakan operator pembanding. Pada penggunaannya, operator logika #NOT  menyatakan kondisi TIDAK BENAR, selain itu juga bisa berarti sebagai pernyataan  TIDAK SAMA DENGAN.

Contoh :

<b:if cond='data:blog.pageType != "item"'>
<!--konten-->
</b:if>

Jika kode diatas diterjemahkan akan menjadi seperti berikut

"jika kondisi data tipe halaman blog adalah TIDAK SAMA DENGAN tipe halaman jenis item, maka kondisi yang berlaku adalah..."

Operator logika #OR

Operator logika #OR membutuhkan kode <b:else/> untuk menentukan sebuah pilihan pada dua kondisi yang akan di eksekusi.  Kode <b:else/> ini terletak di tengah dua pernyataan pada satu kondisi. Untuk lebih mudahnya, perhatikan contoh tag kondisional berikut

<b:if cond='data:blog.pageType == "item"'>
  <!--konten 1-->
   <b:else /> 
  <!--konten 2-->
</b:if>

Jika kode diatas diterjemahkan akan menjadi seperti berikut

"Konten 1 akan ditampilkan pada tipe halaman item, .... jika kondisi tipe halaman blog tidak sama dengan tipe halaman item .... maka yang akan ditampilkan adalah konten 2"

Mengubah tanda kutip menjadi Quot pada Tag kondisional 

Untuk menggunakan tag kondisional kedalam template blogger, kita harus merubah tanda kutip "..." di baris terakhir kode dengan tanda  &quot;. . . .&quot;.

Pada contoh tag kondisional diatas adalah "item", maka supaya bisa bekerja dalam template blogger, harus di ubah (parse) menjadi &quot;item&quot;. Sehingga, kode akhir yang akan diterapkan akan menjadi seperti berikut:

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<!--konten-->
</b:if>

Cara menggunakan tag kondisional dalam template blog

Sebagai contoh, kita menginginkan widget popular post hanya tampil pada pada halaman home page saja, sedangkan pada halaman posting, widget popular post tersebut tidak ingin kita tampilkan (tersembunyi).

Langkah yang harus Anda lakukan adalah :

#1. Masuk ke editor template blog Anda.
#2. Temukan kode widget popular post dalam editor template. Untuk mencarinya , Anda bisa memilih menu Jump to widget >> pilih PopularPosts1 ,  temukan kode yang serupa dengan kode seperti dibawah berikut

<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'>
  <b:includable id='main'>
  <b:if cond='data:title != &quot;&quot;'><h2><data:title/></h2></b:if>
    <div class='widget-content popular-posts'>
      . . . . . . . . . . . . . . . . . . . . . . . . . . . .
       . . . . . . . . . . . . . . . . . . . . . . . . . . . .
       . . . . . . . . . . . . . . . . . . . . . . . . . . . .
      . . .. . . . . . . . . . . . . . . . . . .  . . . . . . .
      <b:include name='quickedit'/>
    </div>
  </b:includable>
</b:widget>

#3. Setelah kode tersebut ketemu, maka selanjutnya adalah tambahkan kode tag kondisional untuk menampilkan popular post hanya pada halaman homepage saja, kodenya adalah seperti berikut

<b:if cond='data:blog.url == data:blog.homepageUrl'>

letakkan kode diatas tepat setelah kode

<b:includable id='main'>

#4. Setelah ditambahkan, masukkan juga kode  </b:if>  tepat sebelum kode

</b:includable>
</b:widget>

#5. Sehingga hasil akhirnya akan seperti dibawah ini

<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'>
 <b:includable id='main'><b:if cond='data:blog.url == data:blog.homepageUrl'>
  <b:if cond='data:title != &quot;&quot;'><h2><data:title/></h2></b:if>
   <div class='widget-content popular-posts'>
      . . . . . . . . . . . . . . . . . . . . . . . . . . . .
       . . . . . . . . . . . . . . . . . . . . . . . . . . . .
       . . . . . . . . . . . . . . . . . . . . . . . . . . . .
      . . .. . . . . . . . . . . . . . . . . . . . . . . . . .
    <b:include name='quickedit'/>
   </div>
</b:if>
</b:includable>
</b:widget>

#6. Setelah selesai,  cek dengan preview terlebih dahulu, jika template tidak error, lalu save template Anda dan kemudian lihat hasilnya (widget popular post hanya akan tampil pada halaman homepage saja, dan akan hilang pada halaman posting)

Perhatikan penempatan kode tag kondisional berwarna merah  diatas, tempatkan dengan benar posisinya supaya bisa bekerja dengan baik.

Kondisi yang berbeda juga bisa Anda ciptakan dengan menerapkan operator logika #AND, #NOT, atau #OR pada tag kondisional yang akan Anda gunakan.

Contoh:

<b:if cond='data:blog.url != data:blog.homepageUrl'>
<b:if cond='data:blog.pageType != "item"'>

Dengan merubah operator logika maka hasil yang berbeda akan tercipta, sehingga Anda akan semakin memahami bagaimana tag kondisional itu bekerja. Dengan cara seperti ini, kreatifitas  Anda dalam hal mendesain template akan semakin terasah.

Daftar tag kondisional yang bisa anda gunakan

Untuk memudahkan Anda, berikut adalah list  tag kondisional berdasarkan tipe halaman  yang bisa Anda gunakan untuk memodifikasi tampilan design blog Anda (catatan: tanda titik - titik pada masing-masing kode dibawah adalah tempat untuk menempatkan kode widget yang dipilih)

1. Menampilkan widget hanya di halaman homepage saja

<b:if cond='data:blog.url == data:blog.homepageUrl'>
. . . . . . . . . . .
</b:if>

2. Menampilkan widget di semua halaman kecuali homepage.

<b:if cond='data:blog.url != data:blog.homepageUrl'>
. . . . . . . . . . .
</b:if>

3. Menampilkan widget hanya di halaman staticpages.

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

4. Menampilkan widget di semua halaman, kecuali halaman staticpages.

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

5. Menampilkan widget hanya di halaman Archive saja.

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

6. Menampilkan widget di semua halaman kecuali halaman archive.

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

7. Menampilkan widget hanya di halaman posting.

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

8. Menampilkan widget di semua halaman, kecuali halaman posting.

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

9. Menampilkan widget hanya di postingan tertentu saja.

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

10. Menampilkan widget selain di postingan tertentu.

<b:if cond='data:blog.pageType != &quot;alamat-postingan&quot;'>
. . . . . . . . . . .
</b:if>

Kesimpulan

Mengunakan tag kondisional pada tipe halaman adalah salah satu cara yang bisa Anda gunakan untuk memodifikasi tampilan blog Anda.

Tag kondisional ini sebenarnya bisa digunakan untuk bermacam-macam elemen yang memiliki sebuah kondisi, seperti contohnya, tag kondisional ini bisa juga digunakan untuk mengaktifkan fungsi javascript dihalaman tertentu, heading tag, label, dan lain sebagainya, namun untuk menerapkannya tentu Anda perlu banyak berlatih dan mencobanya sendiri.

Demikianlah artikel Cara Menggunakan Tag kondisional untuk merubah tampilan halaman blog ini saya informasikan, selamat mencoba dan semoga bermanfaat.

SHARE