Langsung ke konten utama

Mengenal Tag Conditional dan Fungsinya di Blogspot

Baca Juga

Bagi template developer, fungsi tag conditional ini teramat penting karena mengatur penempatan widget yang akan tampil di halaman tertentu pada blogspot/blogger. Misalnya dengan mengatur widget popular post yang hanya dimunculkan di halaman posting atau homepage atau di halaman lainnya.

tag conditional pada blogspot

Pengaturan yang seperti ini, di blogspot hanya dimungkinkan dengan memanfaatkan kode tag conditional.
Sebenarnya, banyak versi tag conditional dalam pemrograman, namun khusus untuk blogspot ada beberapa jenis tag conditional yang bisa diterapkan pada templatenya.

Di sini Saya akan sedikit membahas, beberapa tag conditional yang sering dipakai jika melakukan editing template blogspot untuk mengatur tampilan dan desain layout template tersebut agar sesuai dengan keinginan pengedit atau pembuatnya.

Jadi secara garis besar, bisa disimpulkan bahwa fungsi tag conditional adalah untuk mengatur elemen-elemen tertentu, agar bisa tampil pada kondisi-kondisi tertentu pula.

Pada blogspot, tag conditional selalu diawali dengan kode tag <b:if> dan diakhiri atau ditutup dengan tag </b:if>. Pada setiap tag, selalu disematkan properti cond, yang fungsinya menunjukkan nilai dari suatu kondisi tertentu.

Baca juga : Template Gratis Simple dan untuk Adsense

Tag Conditional untuk Elemen Tertentu

Menampilkan dan menyembunyikan elemen hanya pada halaman homepage

Untuk menampilkan elemen tertentu hanya muncul di homepage dan tidak muncul di halaman lainnya, kode tag conditional yang digunakan adalah seperti ini.

<b:if cond='data:blog.url == data:blog.homepageUrl'>
kode object berupa HTML, CSS, dll.
</b:if>
Kode data:blog.homepageUrl menunjukkan halaman homepage dari blogspot Anda. Sebagai contoh, pada blog ini homepagenya adalah https://www.tukangtokoonline.web.id, sehingga elemen objek yang berada di dalam kode tag conditional di atas hanya akan tampil/muncul di url homepage https://www.tukangtokoonline.web.id.

Sedangkan untuk menyembunyikan elemen tertentu dari homepage blog Anda, maka kode tag conditional yang dipakai adalah seperti ini.

<b:if cond='data:blog.url != data:blog.homepageUrl'>
kode object berupa HTML, CSS, dll.
</b:if>

Perhatikan kode di atas, yang membedakannya hanya pada == dan !=. Pada tanda == artinya dibaca sama dengan, sedangkan tanda != dibaca sebagai tidak sama dengan atau tidak setuju dengan kondisi tertentu. Jadi sebenarnya tudak cukup sulit untuk memahami kode tag conditional ini.

Menampilkan dan menyembunyikan elemen hanya pada halaman item

Halaman item merupakan jenis halaman yang selalu berakhir pada nama berkas atau folder. Contoh halaman item pada blogspot, yang dimaksud adalah seperti pada url ini :

https://www.tukangtokoonline.web.id/2019/01/toko-online-blogspot-super-responsive-tukutoko-theme.html

Jika bermaksud memunculkan elemen tertentu hanya pada halaman posting, maka kode tag conditional yang dipakai adalah seperti ini.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
kode object berupa HTML, CSS, dll
</b:if>

Sedangkan sebaliknya, jika ingin menyembunyikan elemen tertentu pada halaman posting, maka kode tag conditional yang dipakai adalah berikut.

<b:if cond='data:blog.pageType != &quot;item&quot;'>
kode object berupa HTML, CSS, dll
</b:if>
Baca juga : Landing Page Blogspot Template untuk Bisnis Wisata, FREE Download!! 

Menampilkan dan menyembunyikan elemen hanya pada halaman statis (page)

Untuk menampilkan elemen tertentu hanya pada halaman statis. Contoh url halaman statis adalah seperti ini:

http://www.tukangtokoonline.web.id/p/contact.html

maka kode yang dipakai adalah seperti ini.

<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
kode object berupa HTML, CSS, dll
</b:if>

sedangkan untuk menyembunyikan elemen tertentu di laman statis dipakai kode seperti ini.

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
kode object berupa HTML, CSS, dll
</b:if>

Menampilkan elemen pada index

Definisi secara sederhana mengenai halaman indeks adalah semua halaman yang bukan merupakan halaman item. Contohnya seperti ini.

http://www.tukangtokoonline.web.id
http://www.tukangtokoonline.web.id/p/contact.html
Kode tag conditional yang dipake adalah seperti ini.
<b:if cond='data:blog.pageType == &quot;index&quot;'>
kode object berupa HTML, CSS, dll
</b:if>

Menampilkan elemen pada Halaman Arsip

Halaman arsip ini pada url nya mengandung halaman homepage dan selalu diikuti dengan cabang url tahun tanggal dan bulan. Ciri khususnya pada halaman ini, pada url nya mengandung berkas archive.html. Contohnya adalah sebagai berikut.

https://www.tukangtokoonline.web.id/2018_01_12_archive.html
Sedangkan kode tag conditional yang dipakai adalah seperti ini.
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
kode object berupa HTML, CSS, dll
</b:if>

Menampilkan elemen pada Halaman Label dan Label Tertenu

Tag Conditional yang dipakai untuk menampilkan elemen tertendu pada halaman label adalah sebagai berikut.

<b:if cond='data:blog.searchLabel'>
kode object berupa HTML, CSS, dll
</b:if>

Sedangkan supaya elemen hanya bisa tampil di halaman label tertentu, misalnya, hanya elemen tersebut hanya ingin ditampilkan pada label Blogger Template seperti ini.

https://www.tukangtokoonline.web.id/search/label/Blogger%20Templates
kode tag conditionalnya adalah seperti berikut ini.
<b:if cond='data:blog.searchLabel == &quot;Blogger%20Template&quot;'>
kode object berupa HTML, CSS, dll
</b:if>

Menampilkan elemen pada Halaman Pencarian  dan Pencarian Tertentu

Url halaman pencarian selalu diawali dengan search/?q dan diakhiri dengan kata kunci pencarian, contohnya adalah sebagai berikut.

https://www.tukangtokoonline.web.id/search/?q=Template
kata kunci pencarian di atas adalah Template. Sedangkan kode tag conditional yang digunakan adalah berikut ini.
<b:if cond='data:blog.searchQuery'>
kode object berupa HTML, CSS, dll
</b:if>

Sedangkan untuk mengatur elemen object pada pencarian kata kunci tertentu, contohnya Template, maka kode tag conditional yang digunakan adalah sebagai berikut.

<b:if cond='data:blog.searchQuery == &quot;Template&quot;'>
kode object berupa HTML, CSS, dll
</b:if>

Menampilkan elemen pada halaman custome (ditentukan)

elemen object bisa diatur tampilnya pada halaman yang ditentukan di blogspot, kode yang digunakan untuk pengaturan setting seperti ini adalah seperti berikut.

<b:if cond='data:blog.url == &quot;url halaman&quot;'>
kode object berupa HTML, CSS, dll
</b:if> 
Baca juga : Plugin Related Post di Tengah Post 

Menampilkan elemen pada Halaman Error

Dengan tag conditional, pengaturan tampilan pada laman Error pun bisa lebih mudah diatur. Nah, berikut ini adalah kode tag conditional yang dipakai pad halaman Error.

<b:if cond='data:blog.pageType == &quot;error_page&quot;'>
kode object berupa HTML, CSS, dll
</b:if>

Semoga bermanfaat

Buka Komentar

Komentar

Popular

Gratis Download Template Toko Online Blogspot Responsif Baru dan Keren

Menyongsong hari kemerdekaan RI di tahun ini, Tukang Toko Online juga ingin memberikan hadiah berupa bagi-bagi template toko online blogspot terbaru secara gratis.

Template yang akan dibagikan gratis ini merupakan versi Lite-nya dari Template Toko-01 yang barusan di luncurkan sebelumnya. Meskipun demikian sejumlah fitur utama tetap disertakan pada template ini, sehingga tidak mengurangi fungsi serta kebutuhan utama untuk toko online Anda.

Beberapa fitur wajib seperti, meta tag SEO, payment widget, opsi order, info contact, customer service dll. sudah ada dan siap digunakan pada template ini. Panduan step by stepsetting templatenya tetap akan diberikan meskipun template toko-02 ini dibagikan secara gratis.



Tapi tentu saja, meskipun Anda tidak harus membayar untuk mendapatkan template ini, tetap ada sejumlah syarat yang harus Anda penuhi untuk mendapatkan template ini, seperti halnya jika Anda pernah mengunduh beberapa template gratis di blog ini. Syaratnya cukup mudah dan tidak membera…

2 Template Toko Online Blogspot Gratis Rasa Premium

Untuk me-review Template Toko Online yang pernah didesain ulang Tukang Toko Online, posting kali ini sengaja untuk memberikan sedikit informasi untuk pengunjung setia Tukang Toko Online yang mungkin sempat ketinggalan info mengenai template toko online gratis namun dengan rasa premium.Nah berikut ini adalah 2 template toko online blogspot gratis yang juga memiliki pilihan premium jika anda berniat untuk mendapatkan fitur tambahan yang lebih lengkap. Itulah mengapa ke dua template tersebut be-rasa premium. Anda bisa mengunduhnya secara gratis dari link kedua artikel template tersebut. Jangan lupa meninggalkan komentar berupa saran saran atau apapun demi perbaikan layanan template dari Tukang Toko Online.Berikut ini adalah informasi mengenai ke dua Template Tersebut.


tukutoko THEME
Live DemoDownload Fitur  Super Responsive / mobile firendlyWhatssApp OrderSMS OrderCall OrderHelp Desk widgetHotline button to WhatsApp, SMS & Phone CallSlide MenuRelated Product Postetc.Baca juga :Ngeblog da…

Memulai Toko Blogspot dengan Template Toko-01

Template toko blogspot yang diluncurkan kali ini lebih memilih memakai warna yang netral. Sedikit perpaduan warna hitam, merah dan warna putih yang lebih dominan. Beberapa fitur di template toko online ini mengacu pada kebutuhan utama dari sebuah toko online, contohnya seperti adanya pilihan cara order (shopping cart atau via sms), info bank pembayaran, info contact customer service dll.

Untuk tampilan di versi mobile lebih disederhanakan sehingga beban loadingnya diharapkan tidak menjadi masalah, meski dibuka dengan akses internet di sinyal yang terbatas.

Fitur selengkapnya bisa Anda periksa langsung melalui link Live Demo template di bawah ini.

Cek Template dengan fitur yang lainnya :

Green Green Template, Template serba hijauZen Pink Template, dengan warna merah mudaTemplate Buku Kita, toko buku online yang dipadukan dengan blogging

Template Toko-01 LIVE DEMO
MAIN FEATURESCheck List Full Responsive DesignGrid View HomepageHeader Contact Customer Service iconResponsive menuPro…
© Tukang Toko Online