Beberapa rekan mungkin sudah familiar dengan kata-kata Tag Kondisional, atau mungkin sebagian baru mendengar apa itu tag kondisional. Secara sederhana, arti tag kondisional adalah tag yang digunakan untuk mengatur elemen-elemen di mana akan ditampilkan, atau dimana akan disembunyikan.

Sebagai contoh, kita akan menyimpan kode Like Facebook yang hanya tampil pada halaman postingan, sedangkan pada halaman utama / homepage, Like Facebook ini disembunyikan. Maka kita perlu menggunkan tag kondisional. Atau seperti blog saya, pada halaman utama tampil 3 kolom, ketika masuk halaman postingan, maka kolom tengah akan hilang. Untuk mengaturnya kita perlu Tag Kondisional.

Untuk yang sudah mahir silakan kunjungi sumber pengambilan saya pada blog Kang Taufik Nurrohman tentang Tag Kondisional Tingkat Pertama dan Tag Kondisional Tingkat Lanjut. Disini saya coba jelaskan   tentang tag kondisional serta penggunaannya bagi pemula.

Tag Kondisional Halaman Muka (Homepage)

Halaman muka atau homepage adalah alamat blog kita, contoh : http://blog.kangismet.net
tag kondisionalnya adalah
<b:if cond='data:blog.url == data:blog.homepageUrl'>
ISI KODE
</b:if>
secara sederhana, artinya ISI KODE akan ditampilkan apabila di Halaman Muka.  Atau kadang kadang ditulis dengan kebalikan kode tersebut seperti ini:
<b:if cond='data:blog.url != data:blog.homepageUrl'>
ISI KODE
</b:if>
kode diatas beda dengan kode sebelumnya, perbedaannya terletak pada tanda == dan !=. Maka arti kode diatas adalah ISI KODE akan ditampilkan kecuali pada Halaman Muka. 
Yang harus diingat bahwa tanda == artinya sama dengan != artinya kecuali.
Penerapan kode tersebut sama pada tag kondisonal yang lainnya di bawah ini.

Tag Kondisional Halaman Item (Postingan)

Contoh halaman posting : http://blog.kangismet.net/2012/10/tag-kondisional-dan-cara-penggunaannya.html
<b:if cond='data:blog.pageType == &quot;item&quot;'>
ISI KODE
</b:if>

Tag Kondisional Halaman Statis

Contoh halaman statis : http://blog.kangismet.net/p/contact-us.html
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
ISI KODE
</b:if>

Tag Kondisional Halaman Indeks

Halaman indeks semua jenis halaman selain halaman postingan
<b:if cond='data:blog.pageType == &quot;index&quot;'>
ISI KODE
</b:if>

Tag Kondisional Halaman Label

Contoh halaman label : http://blog.kangismet.net/search/label/Tutorial
<b:if cond='data:blog.searchLabel'>
ISI KODE
</b:if>

Tag Kondisional Halaman Tertentu

<b:if cond='data:blog.url == &quot;URL HALAMAN&quot;'>
ISI KODE
</b:if>

Tag Kondisional Error Page 404

Error Page adalah halaman yang tidak ditemukan
<b:if cond='data:blog.pageType == &quot;error_page&quot;'>
ISI KODE
</b:if>

Tag Kondisional Halaman Arsip

Contoh halaman arsip : http://blog.kangismet.net/2012_10_1_archive.html
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
ISI KODE
</b:if>

Contoh Penggunaan Tag Kondisional

Pada kesempatan ini saya akan menjelaskan cara menggunakan tag kondisional seperti contoh sebelumnya. Saya akan menjelaskan secara singkat dalam 2 contoh :
01Cara menyimpan kode Facebook Like  Button yang tampil hanya pada halaman posting, sedangkan pada halaman muka, halaman statis, dll akan disembunyikan.
02Seperti blog saya, pada halaman muka/homepage ada tiga kolom, tetapi ketika masuk halaman postingan hanya ada 2 kolom.

Contoh 1

Menyimpan Facebook Like Button biasanya tepat seteleh postingan. Biasanya kode ini disimpan setelah kode <data:post.body/>. Sebelum menyimpan kode Facebook Like  Button, agar Like Button ini tampil hanya pada halaman postingan, maka Anda harus menambahkan Tag Kondisional Halaman Item. Jadi kurang lebih kodenya seperti ini :
<data:post.body/>
<b:if cond='data:blog.pageType == &quot;item&quot;'> 
Kode Facebook Like Button
</b:if>

Contoh 2

Untuk contoh 2 ini memang agak sedikit rumit, sedikitnya Anda harus memahami kode CSS pada Template Blogger. Contoh layout blog saya pada halaman utama dan halaman posting

contoh layout

Dalam kode CSS template anda kurang lebih akan menemukan kode seperti ini:
#content{width:640px} artinya lebar konten 640px
#lsidebar{width:210px} artinya lebar lsidebar 210px
#rsidebar{width:300px} artinya lebar rsidebar 300px
maka Tag kondisional yang dibutuhkan kira-kira seperti dibawah, dan disimpan setelah ]]></b:skin>
<style type='text/css'>  
<b:if cond='data:blog.pageType != &quot;item&quot;'>
#content{width:410px}
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'> 
#rsidebar{display:none}
</b:if>
</style>
Kode di atas apabila dibaca dengan bahasa sederhana maka artinya seperti ini:
<style type='text/css'>
pengaturan tampilan
<b:if cond='data:blog.pageType != &quot;item&quot;'>
apabila selain halaman postingan maka
#content{width:410px}
lebar konten 410px
</b:if>
tutup tag kondisional
<b:if cond='data:blog.pageType == &quot;item&quot;'>
apabila pada halaman postingan maka
#rsidebar{display:none}
rsidebar tidak ditampilkan
</b:if>
tutup tag kondisional 
</style>
tutup tag tampilan

Contoh di atas hanya contoh sederhana, silahkan dikembangkan lagi... semoga bermanfaat.

47 komentar

Alhamdulillah dapet ilmu baru lagi dari kang mastah..eh, kang Ismet :)
Nuhun akang yang selalu sharing postingan bemanfaat.

Selama Iedul Adha, juga kang :)

Balas

Sama2... gimana? kurban tahun ini? btw.. semoga bermanfaat postingannya, abis buka pusa, sholat maghrib, nunggu takbiran, lumayan dapet 1 postingan :)

Balas

Sangat lengkap kang... jadi lebih paham tentang tag2 kondisional, ada sedikit pertanyaan kang, untuk menempatkan judul Label di depan judul blog itu bisa menaruh tag :
<b:if cond='data:blog.searchLabel'>
<title> <data:blog.pageName/> | <data:blog.title/></title>
</b:if>

mohon bimbingannya... terima kasih

Salam Belajar Forex

Balas

Baru selesai sholat Ied, langsung ke blog kang Ismet nih :)
Alhamdulillah kurban tahun ini lancar kang meski cma sedikit...tinggal nunggu di kasih kesempatan dan rizki untuk ke mekah aja nih.

Smoga bisa barengan kita sekeluarga ya kang :D

Balas

Belajar mengenai berbagai macam tag di sini sobat

Balas

Insya Allah bulan maulid ini saya Umroh.. ketemu disana yu :)

Balas

Semoga bermanfaat sob...

Balas

ilmu baru nii sob..
makasih ya.. :)

Balas

Maksud pertanyaannya gimana ya? kalau tag kondisional di atas artinya kurang lebih, ketika pencarian label, maka menampilkan URL postingan dan Nama Blog..

Balas

keren mas infonya :D, btw, mas mau nanya cara buat underline seperti yang ada di blog mas gimana ya? underline yg di bawah "contoh 1" "contoh 2" dsb

Balas

Alhamdulillah...kayaknya akang dulu nih. Insya Allah, sapa tau besok atau lusa dikasih rizky yang gede :)

Balas

waaah membantu sekali nih mas hehehe :D

Balas

tag kondisional itu sgt berguna sekali untuk menghilangkan atau mengubah elemen blog tertentu :)

oh iya kang, ajarin ane dong cara ngebuat 2 kolom subscribe sama artikel terkait yg ada di bawah post itu dong kang. nuhun :)

Balas

ditunggu aja postingannya sob :)

Balas

ane masih bingung gimana caranya kalo diedit html??

Balas

Penjelasan di atas, ada cara langsung dan tidak langsung, itu di edit HTML sob...

Balas

trus kalo mau menghilangkan suatu widget (katakan lah widget like facebook) ingin dihilangkan di halaman www.blogspot/search/Bola
bagaimana caranya mas?
balas ke nmr ane mas ya 085261133939
atau email halimspakpahan@yahoo.com

Balas

hmm ternyata kalau Hasil download template dipahami dan diotak atik satu persatu ternyata benar juga maksudnya .. thanks kang ismet penjelasannya

Balas

hmm ok juga nih, jadi keliatan agak rapih jadinya kalo pake tag kondisional ya.

Balas

SAYA PERNAH DISURUH MENGISI NO HP DI HALAMAN URL PADA SEBUAH BLOG. TAPI SAYA GAK TAHU KOLOM URL YG MANA !

Balas

maksudnya gimana? apa hubungannya sama tag kondisional? :D

Balas

<b:if cond='data:post.numComments != 0'>

kang, saya mau nanya tentang tag kondisional komentar seperti di atas. Kalau seperti yang saya tuliskan di atas kan, dibacanya "jika jumlah komentar tidak sama dengan nol". Kalau misalkan saya mau membahasakannya seperti ini "jika jumlah komentar lebih dari 6", bagaimana penulisan tag kondisionalnya kang?

Terima kasih sebelumnya kang... :)

Balas

bisa gunakan kode seperti ini

<b:if cond='data:post.numComments == 6'>
atau lebih spesifik gunakan

<b:if cond='data:post.numComments == 0'>Jadilah Komentator Pertamaxxxxx
<b:else/>
<b:if cond='data:post.numComments == 1'>1 Komentar
<b:else/>
<data:post.numComments/> Komentar
</b:if>
</b:if>

Balas

Maksud saya bukan begitu kang. Kalau seperti yang dituliskan kang ismet kan, yang pertama itu dibacanya "Jika jumlah komentar sama dengan 6", kalau yang kedua itu lebih pada menampilkan penulisan jumlah komentarnya berapa ditambah dengan kata-kata yang kita inginkan setelahnya.

Maksud saya gini kang, kalau tanda "==" kan dibacanya "sama dengan", dan kalau tanda "!=" dibacanya "tidak sama dengan". Nah, kalau tanda "lebih dari" atau kurang dari", bagaimana cara penulisannya?

Terima kasih sebelumnya Kang atas jawabannya... :)

Balas

yang bawah yng pake <b:else/> itu artinya apabilahlebih dari satu maka...

Balas

makasih infonya mas..

Balas

|o| , makasih banyak kang

Balas

Kang kalau saya gini kang..
saya buka halaman PAGE Lah kenapa Ga muncul Isinya ya kang.. ?

bisa di coba kang
http://www.center60.com/p/blog-page_24.html

Balas

wowkowkowkwowkok!! asli ngakak!

Balas

Kang saya mau nanya, setelah pasang tag kondisional (pada salah 1 gadget di sider blog), pada halaman yang disembunyikan (misalkan halaman posting) kok ada renggang (jarak) gitu? gimana cara mengatasinya Kang?

Balas

Menarik artikel nya Kang, saya coba belajar lebih
Memahami code-code di artikel Kang Ismet dulu
Terima kasih atas artikelnya Kang

Balas

mau tanya kang ada gak tag kondisional untuk postingan yang berlabel ? diatas kan adanya tag kondisional untuk halaman label jadi maksud saya intinya membuat warna berbeda pada postingan dengan label tertentu ?? terimakasih kang . salam blogger

Balas

kalo pake tag yang ini

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


ribet kang harus satu satu hehe saya gunakan itu hanya untuk membuat postingan yang istimewa saja

Balas

saya sebelumnya sudah baca ini di http://www.dte.web.id/2012/04/different-posts-style-based-on-label.html tapi saya belum berhasil membuat yang saya tanyakan diatas kang , terima kasih sebelumnya

Balas

makasih kang... Tag Kondisionalnya sangat membantu sekali...

saya sering pake yang khusus homepage dan postingan doang.. selebih gak pernah.....

Balas

beuh.. mantep kang , alhamdulillah dapat ilmu lagi, n jadi tahu cara membaca kode".. hihi
thanks kang..

Balas

Di bookmark dulu mas ya, perlu dipelajari pelan-pelan .. hehe

Balas

berhasil kang, Nuhun... baru dipraktekin buat homepage... yang lainnya nanti
hehehehe

:)

Balas

terima kasih, saya jadi bisa edit blogspot sekarang

Balas

hmm , gan mau nanya kalau mengatur hompage blog di
/?m=0 gimana ya ?
kalo
/?m=1 kan dihp nah klo setting css di /?m=0 gimana ya gan ? .. :D
mohon pencerahanya

Balas

mohon maaf kang sebelumnya, bukan mengkritik. namun saya ingin memberikan feedback di postingan ini :

untuk tag kondisional pada halaman tertentu itu tidak work dengan tag kondisional seperti ini :

<b:if cond='data:blog.url == &quot;URL HALAMAN&quot;'>
ISI KODE
</b:if>

tapi dengan kode seperti ini :

<b:if cond='data:blog.canonicalUrl == "ALAMAT-HALAMAN"'>
ISI KODE
</b:if>

Semoga membantu kang :D

Balas

kang, kalau misalkan widget kita itu pengen tampil di halaman utama sama di halaman selanjutnya, itu gimana?
sedangkan baik di halaman posting, label, archive, page ERROR, dll, widget tersebut tidak tampil..

mohon bantuannya kang :)

Balas

Poskan Komentar


×
Chat