Mengenal Tag kondisional Blogger

Sebagai orang baru di dunia blog, saya harus mempelajari bagaimana template blogger di buat, dan untuk Mengawali postingan di blog ini, saya mengumpulkan beberapa tag kondisional blogger yang sering digunakan dalam desain template Blogger, dan contoh penggunaan tag kondisional tersebut.

Sebelum kita bahas tentang Tag Kondisional, pertama-tama kita harus tahu dahulu tentang tag lain yang biasa digunakan berbarengan dengan tag kondisional. tetapi untuk kamu yang sudah memahaminya, kamu dapat langsung ke poin Tag Kondisional di bawah.

Tag Blogger Yang Sering digunakan

Tag IF/ELSE

<b:if>/<b:else/> adalah tag kondisional dasar yang paling umum dalam desain template Blogger. Tag ini digunakan untuk mengatur kondisi untuk melakukan eksekusi sebuah perintah. Contoh:

<b:if cond='data:view.isPost'>
Baris HTML/CSS/Javascript
<b:elseif cond='data:view.isPage'/>
Baris HTML/CSS/Javascript
<b:else/>
Baris HTML/CSS/Javascript
</b:if>

Pada contoh di atas, tag if digunakan untuk mendapatkan kondisi jika dalam postingan (if), atau pada halaman statis (ElseIf) dan pada kondisi lainnya (Else).

Tag Loop

Tag <b:loop>di Blogger digunakan untuk perulangan. Tag ini sering digunakan untuk memanggil data dalam array atau sebuah daftar list yang sudah tersedia sebelumnya.

<b:loop index='i' values='data:links' var='link'>
<a expr:title='data:link.name'/>
<data:link.target/>
</a>
</b:loop>

Pada contoh di atas, fungsi <b:loop> digunakan untuk mengambil data dalam array data:links, variabel elemen dideklarasikan dengan var='link'.

Tag

Tag <b:tag> digunakan untuk mendeklarasikan elemen HTML di Blogger. Jenis elemen HTML ditentukan oleh name. Fungsi ini sangat bermanfaat untuk memunculkan suatu data yang sama pada tempat yang berbeda. Karena dengan begitu template akan lebih ramping.

<b:tag expr:href="data:blog.homepageUrl.canonical" name="a">
   SAMPLE TEXT
</b:tag>

pada contoh di atas kita menggunakan <b:tag> untuk mendeklarasikan sebuah elemen <a>. itu akan menghasilkan:

<a href="https://likamuslika.blogspot.com">
   SAMPLE TEXT
</a>

Tag Class

Tag <b:class> digunakan untuk menambahkan nama kelas ke elemen induk yang berisi tag ini. Nama kelas ditentukan dengan name.

<div class="class1">
<b:class cond='data:view.isMultipleItems' name='index-post'/>
SAMPLE TEXT
</div>

Pada contoh di atas, jika kondisi cond='data:view.isMultipleItems' memiliki nilai true maka akan menghasilkan:

<div class="class1 index-post">
SAMPLE TEXT
</div>

Tag Includable

Tag <b:includable> digunakan untuk memanggil fungsi yang dideklarasikan sebelumnya. Fungsi yang akan dipanggil ditentukan oleh atribut name, dan dideklarasikan oleh atribut id.

Tag Kondisional Blogger

Nah, setelah mengenal beberapa contoh penggunaan tag di atas, sekarang kita masuk pada pembahasan inti dari postingan ini yaitu tentang Tag Kondisional. Tag Kondisional dapat digunakan dalam tag cond. Atribut bersyarat ini digunakan digunakan oleh tag <b:if>, <b:tag>, <b:class>, <b:loop>, <b:includable> seperti yang sudah dibahas di atas, dan tag lainnya. Di bawah ini adalah ringkasan kondisi yang umum digunakan dalam atribut cond:

data:view.isError : true jika halaman tidak ditemukan. Digunakan untuk mendesain halaman Error 404.
data:view.isHomepage : true jika membuka halaman beranda.
data:view.isLabelSearch : true jika membuka halaman Label.
data:view.isMobile : true jika membuka dalam mode seluler.
data:view.isPage : true jika membuka Halaman Statis.
data:view.isPost : true jika melihat Halaman Postingan.
data:view.isSearch : true jika melihat hasil pencarian.
data:view.isSingleItem : true jika melihat satu halaman: pada Halaman Statis juga pada Postingan
data:view.isMultipleItems : true jika melihat beberapa halaman: HomePage/Search/Archive
data:view.isLayoutMode : true jika dilihat di pengaturan Layout di dashboard Blogger.

Contoh Penggunaan tag kondisional

Menerapkan CSS hanya pada kondisi tertentu

Misalnya kita akan menerapkan perintah CSS hanya pada pada saat Mode Layout (dashboard), maka caranya adalah menggunakan tag kondisional data:view.isLayoutMode seperti contoh berikut :

<b:if cond='data:view.isLayoutMode'>
<b:template-skin><![CDATA[
html,body#layout #outer-wrapper,body#layout .row{width:auto;padding:0}
]]></b:template-skin>
</b:if>

Kita juga bisa menggunakan perintah sebaliknya, misalnya kita ingin menerapkan CSS pada seluruh mode kecuali mode Layout dengan menambah tanda seru di depan kondisionalnya. Contoh :

<b:if cond='!data:view.isLayoutMode'>
<style>
html,body#layout #outer-wrapper,body#layout .row{width:auto;padding:0}
</style>
</b:if>

Mengambil data dari tautan lampiran

Kita bisa mendapatkan data dari link terlampir dengan menggunakan tag <b:loop> seperti contoh berikut:

<b:loop index='i' values='data:post.enclosures' var='enclosure'>
   <data:enclosure.url/>
   <data:enclosure.mimeType/>
</b:loop>

Selain itu, kita juga dapat memasukkan tag kondisional <b:if> untuk memeriksa konten tautan lampiran terlebih dahulu. Pada contoh di bawah, gunakan tag <b:if> untuk memeriksa jenis lampiran yang ada kata "audio" sebelum membuat tautan unduhan.

<b:if cond="data:post.enclosures any (l => l.mimeType in {&quot;audio&quot;})">
   <b:loop index="i" values="data:post.enclosures" var="enclosure">
      <b:if cond="data:enclosure.mimeType == &quot;audio&quot;">
         <a expr:href="data:enclosure.url">Download</a>
      </b:if>
   </b:loop>
</b:if>

Ekstrak konten artikel

Untuk mengambil ringkasan dari artikel, kita dapat menggunakan tag <b:eval> untuk mengekstrak konten dari data:post.snippets.

<p class='entry-excerpt excerpt'>
   <b:eval expr='data:post.snippets.long snippet { length: 125 }'/>
</p>

Dalam cuplikan contoh di atas, konten ringkasan artikel dibatasi hingga 125 karakter.

Nah, sampai disini kamu pasti paham tentang Tag Kondisional di blogger, Semoga artikel ini bermanfaat untuk Anda jadikan referensi dalam proses mendesain tema blogger.