Penjelasan Tag b:include dan b:includable pada Blogger


Tag <b:include> adalah Statement yang dapat membawa teks dan kode/markup yang ada di dalam Tag <b:includable>. Kita dapat menyalin isi yang ada didalam Tag <b:includable> dengan memanggilnya menggunakan Statemant Include.


Contoh Penulisan Tag b:include dan b:includable

Berikut adalah contoh format penulisan dasar tag b:include:

<b:include cond='EKSPRESI' data='ALIAS' name='STRING1'/>

Berikut adalah contoh format penulisan dasar tag b:includable:

<b:includable id='STRING1' var='STRING'>
   ...
</b:includable>

Penjelasan:
  • Tag <b:includable> hanya dapat berada di dalam Tag <b:widget> atau <b:defaultmarkup>.
  • Tag <b:include> adalah Statement yang dapat kita gunakan untuk memanggil isi dari salah satu Tag <b:includable> secara bersamaan.
  • ALIAS adalah set data yang akan diteruskan serta diproses kedalam tag <b:includable>.
  • Atribut name pada Tag <b:include> adalah Statement yang dapat memanggil Tag <b:includable> untuk dapat memasukkan konten bersamaan dengan id yang sama dengan atribut name.
  • Atribut var pada Tag <b:includable> adalah nama dari atribut data: untuk dapat digunakan oleh elemen keturunannya (Child) seperti <data: { ... } />.

Contoh Kode Tag b:include dan b:includable

Berikut adalah contoh kode tag b:includable:
<b:includable id='list'>
   <b:loop values='data:nama' var='item'>
      <li>
         <data:item/>
      </li>
   </b:loop>
</b:includable>

Berikut adalah contoh kode untuk memanggil Includable List dengan ALIAS-nya:

<ol>
   <b:include data='{ nama: ["Yasya","Agung"] }' name='list'/>
   <b:include data='{ nama: ["Ulum","Wahyu"] }' name='list'/>
   <b:include data='{ nama: ["Arman","Billy"] }' name='list'/>
</ol>

Hasil dari kedua contoh diatas akan menghasilkan tampilan berikut pada Browser:

1. Yasya
2. Agung
3. Ulum
4. Wahyu
5. Arman
6. Billy

Info: Dengan menggunakan ALIAS, kita dapat memproses berapapun banyaknya data dengan format yang sama serta mendapatkan hasilnya untuk menghindari penulisan kode yang dilakukan secara berulang-ulang. Data dengan nilai nama akan diteruskan kedalam Tag <b:includable> serta diproses melalui Tag <b:loop> dengan nama variabelnya yaitu item yang diubah menjadi <data:item/>.


Berikut adalah contoh lain dengan menggunakan elemen keturunan (Child):

<b:includable id='list' var='parent'>
   <b:include data='induk' name='list2'/>
</b:includable>

<b:includable id='list2'>
   <b:if cond='data:hewan'>
      <b:loop values='data:jenisHewan' var='item'>
         <li>
            <data:item/>
         </li>
      </b:loop>

      <b:elseif cond='data:karnivora'/>
      <ol>
         <b:loop values='data:karnivora' var='item'>
            <li><data:item/></li>
         </b:loop>
      </ol>
   </b:if>
</b:includable>

Berikut adalah cara untuk memanggil Includable List dengan Nama Data yang berbeda:

<ol>
   <b:include data='{ jenisHewan: ["Herbivora","Karnivora"] }' name='list'/>
   <b:include data='{ karnivora: ["Singa","Buaya"] }' name='list'/>
   <b:include data='{ jenisHewan: ["Omnivora"] }' name='list'/>
</ol>

Hasilnya akan seperti berikut:

1. Herbivora
2. Karnivora
   1. Singa
   2. Buaya
3. Omnivora

Info: Pada contoh diatas, data yang memiliki nama dan string yang berbeda akan diteruskan kedalam tag <b:includable> dengan nama list serta variabel induk, kemudian diubah kedalam grup data:induk serta dilanjutkan kedalam tag <b:includable> selanjutnya dengan nama list2. Kita juga menggunakan Statement Conditional untuk menguji grup dan proses manakah yang cocok dengan Statement tersebut.


Include Bawaan Server Blogger

Blogger juga memiliki penyertaan atau Inclusion bawaan (Default) yang dapat kita panggil untuk dapat digunakan pada Template. Inclusion tersebut tersimpan pada sisi server Blogger (Blogger Server Side). 

Biasanya, inclusion tersebut diawali dengan super. Meskipun demikian, terdapat juga beberapa inclusion yang dapat kita letakkan dimanapun kecuali pada tag <b:skin>. Berikut adalah beberapa Inclusion default pada Blogger:

<b:include name='all-head-content'/>
<b:include name='postMetadataJSON'/>

Mungkin itu saja penjelasan dari saya, jika ada yang kurang jelas, kalian dapat bertanya melalui kolom komentar dibawah ini. Jika artikel ini bermanfaat, silahkan dibagikan. Terimakasih telah berkunjung di EL Creative Academy.

0 Komentar