Ads by Yasya El Hakim
Cara Membuat Blogger Template: Includable dan Include

Pada bagian Petama, kita sudah mempelajari Dasar dari Template Blogger seperti tag Section dan Widget. Di bagian Pertama, saya juga sudah memberikan tata cara penggunaan Widget bawaan Blogger. Pada pembelajaran kali ini, kita akan mempelajari tentang Bagaimana cara membuat elemen Custom pada Widget.

Sebelumnya, kita sudah membahas dasar dari tag <b:widget/>. Pada bagian ini, kita akan masuk lebih dalam mengenai tag Widget.

Tag Widget dapat ditulis dengan menggunakan Opening, Closing, maupun Single tag dan juga dapat kita masukkan atribut kedalamnya.
<b:widget [atribut...]/>

Membuat Custom Widget

Untuk membuat Custom Widget, kita harus membuat beberapa perubahan.

Pertama kita harus membuat Opening dan Closing tag:
<b:widget [atribut...]>
</b:widget>

Kebanyakan tipe dari Widget sudah di tentukan oleh Blogger. Untuk membuat konten Custom pada Widget, kita dapat menuliskan HTML kedalam atribut Type:
<b:widget id='HTML1' type='HTML'>
</b:widget>

Catatan: Untuk nama dari id, sebaiknya gunakan angka setelah nama ID, contoh: HTML1, HTML2, HTML, dan seterusnya.

<b:widget id='HTML1' type='HTML' locked='yes' title='Kontak'>[Kode Widget...]</b:widget>
<b:widget id='HTML2' type='HTML' locked='yes' title='Label'>[Kode Widget...]</b:widget>

Include dan Includable

Untuk menentukan isi konten dari tag Widget, kita dapat menggunakan tag yang dinamakan "Includable", Custom Widget harus berisi tag Includable.

Includable memiliki dua bagian, yaitu:
  1. include - Merupakan nama fungsi. Ketika dibutuhkan, maka Includable akan hadir.
  2. Includable - Merupakan definisi dari fungsi.

Berikut adalah contoh penulisan Includable:
<b:includable id='uniqueId' var='dataForWidget'>
 [Kita dapat meletakkan kode disini]
</b:includable>

Atribut pada Includable

  1. id (Diperlukan) - Sebuah nama yang hanya dapat berupa huruf atau angka.
  2. var (Opsional) - Sebuah nama yang hanya dapat berupa huruf atau angka untuk menghubungkan data.

Include

Include digunakan jika anda memliki sebuah Section yang ingin anda masukkan ber ulang-ulang pada lokasi yang berbeda.

Contoh:
<b:includable id='main'>
<b:loop var='i' values='posts'>
<b:include name='post' data='i'/>
</b:loop>
</b:includable>

<b:includable id='post' var='p'>
Judul: <data:p.title/>
</b:includable>

Berikut adalah contoh penulisan Include:
<b:include name='idIncludable'  data='dataIncludable'/>

Atribut pada Include

  1. name (Diperlukan) - Berupa huruf dan angka. Harus cocok dengan ID b:includable sebelumnya pada Widget yang sama.
  2. data (Opsional) - Expression atau bagian dari data untuk melewati bagian Includable. Dapat berupa nilai atribut var pada Includable.

Includable Default

Setiap Custom Widget harus terdiri dari sebuah Includable dengan id yang sama dengan main (main includable). Main Includable dapat terdiri dari konten yang ada di Widget.

Jika anda mempunyai Includable dengan id yang berbeda, maka tidak akan ditampilkan pada Widget.

Anda harus membuatnya didalm Main Includable dengan menggunakan elemen Include yang tertuju pada id Includable.

Contoh:
<b:widget id='HTML1' type='HTML' locked='yes' title='Label'>
<b:includable id='main'>
<h3>Label</h3>
<b:include name='label'></b:include>
</b:includable>
<b:includable id='labels'>
<ul>
<li><a href='#' title='Blogger'>Blogger</a></li>
<li><a href='#' title='Wordpress'>Wordpress</a></li>
<li><a href='#' title='Wixx'>Wixx</a></li>
</ul>
</b:includable>
</b:widget>

Anda dapat meletakkan kode Widget diatas kedalam template Blogger anda, dan lihatlah hasilnya.

Selanjutnya:Cara Membuat Blogger Template: Conditional, Loops, dll.

4Komentar

  1. Saya membuat lencana di postingan artikel yang setiap artikel itu beda-beda lencananya. Gimana saya memasukkan itu ke dalam b:includable?

    BalasHapus
    Balasan
    1. dicoba pake statement b:if mas, inshaallah bisa, tergantung pemahaman dan kreatifitas. Terimakasih

      Hapus
  2. akhirnya saya berhasil, tapi ada stu lagi nih.. kode b:if yg gimana untuk menambah tombol hanya di dalam artikel dengan label tertentu. dan di label lain tidak ada tombol. Itu di dalam artikelnya, bukan halaman label. mohon pencerahannya..

    BalasHapus
    Balasan
    1. Bisa cek di Contoh Penggunaan Conditional Tag mas, inshaallah sudah ada contohnya dan mudah untuk dimengerti, terimakasih.

      Hapus

Posting Komentar

Sebelumnya Selanjutnya