Cara Menggunakan Tag Kondisional Blogspot - Mengelola Blog

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

Tag kondisional untuk merubah tampilan halaman 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.

6 comments:

  1. Bagus mas teguh artikelnya..tapi saya masih bingung sedikit mengenai tag kondisional ini. Muter- muter cari belum ketemu juga.yang Mau saya tanyain mas?

    1.kalo tag kondisional untuk title dan deskripsi blog di homepage dan di blogpost biar beda kayak di blog ini gimana ya? terima kasih
    contohnya kayak di gambar ini :
    https://drive.google.com/file/d/0BwunuxOGJJkDVzE2TkptbXk0WHM/view?usp=sharing

    ReplyDelete
    Replies
    1. Untuk ini mungkin saya bisa kasih ringkasannya, minggu depan mudah-mudahan bisa saya buatkan postingannya.

      1. Yang paling mudah, untuk deskripsi blog saya menggunakan div baru yaitu pagedescription diletakkan dibawah titlewrapper, isi kontennya saya pakai meta seperti ini data:blog.metaDescription, cuma setiap bikin artikel, meta deskripsi di opsi menu sebelah kanan form artikel harus aktif dan diisikan deskripsi artikelnya.

      2. Untuk Title blog, saya menukar h1 terlebih dahulu antara homepage dengan halaman posting ( pakai tag kondisional ).

      3. setelah itu saya ubah lagi, judul blog h1 tadi , dengan judul posting h3.post title baru berhasil. semuanya pakai tag kondisional.

      maaf baru bisa kasih ringkasan seperti ini saja, soalnya sedang ada urusan saat ini.

      terima kasih

      Delete
    2. Baik mas saya tunggu postingannya minggu depan, saya doain tidak ada halangan :D
      sembari menunggu, untuk sementara saya coba-coba otodidak sambil otak atik sendiri dulu..sambil tak pahami pelan2 mengenai tag kondisional

      Delete
    3. Sudah saya publish mas artikelnya, semoga berhasil

      Delete
  2. Sangat bermanfaat mas artikelnya..jadi sedikit paham tentang tag yang ada di template dan ternyata sangat penting untuk memahaminya...

    ReplyDelete
    Replies
    1. Syukurlah kalau artikel ini bisa bermanfaat mas, selamat oprek2 template blog yaa :)

      Delete