Cara Membuat Blogger Template: Includable dan Include

Pada bagian Pertama, kita sudah mempelajari Dasar dari Template Blogger seperti tag Section dan Widget. Saya juga sudah memberikan tata cara penggunaan Widget bawaan Blogger. Pada artikel kali ini, kita akan belajar tentang cara membuat elemen Custom pada Widget.

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

Tag Widget dapat ditulis dengan menggunakan Opening, Closing, maupun Single Tag. Dan juga, kita dapat memasukkan atribut kedalamnya. Contoh:

<b:widget ATRIBUT='NILAI'/>

Membuat Custom Widget

Untuk membuat Custom Widget, kita harus membuat beberapa perubahan. Pertama-tama, kita harus membuat Opening dan Closing tag:

<b:widget ATRIBUT='NILAI'>
    ...
</b:widget>

Kebanyakan tipe dari Widget sudah di tentukan oleh Blogger. Maka dari itu, untuk membuat konten Custom pada Widget, kita dapat menggunakan tipe HTML sehingga kode diatas berubah menjadi seperti berikut:

<b:widget id='HTML1' type='HTML'>
    ...
</b:widget>

Catatan: Untuk nama dari atribut id, gunakan angka setelah nama ID, contoh: HTML1, HTML2, HTML3, dan seterusnya:

<b:widget id='HTML1' type='HTML' locked='yes' title='Kontak'>
    ...
</b:widget>

<b:widget id='HTML2' type='HTML' locked='yes' title='Label'>
    ...
</b:widget>

Tag Include dan Includable

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

Tag Includable memiliki dua bagian, yaitu:

• include - Merupakan nama fungsi. Ketika kita ingin menggunakannya, maka kita juga harus menyertakan tag includable.
• Includable - Merupakan definisi dari fungsi.

Berikut adalah contoh penulisan Includable:

<b:includable id='NAMA_ID' var='DATA_WIDGET'>
    ...
</b:includable>

Atribut pada Tag Includable

Terdapat dua atribut yang dapat kita gunakan kedalam Tag Includable, yaitu:

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

Tag Include

Tag Include digunakan jika anda memliki sebuah Tag 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 Tag Include:

<b:include name='NAMA_ID_TAG_INCLUDABLE'  data='DATA_TAG_INCLUDABLE'/>

Atribut pada Tag Include

Terdapat dua atribut yang dapat kita gunakan kedalam Tag Include, yaitu:

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

Tag Includable Default

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

Jika kalian mempunyai Tag Includable dengan atribut id yang berbeda, maka hasilnya tidak akan ditampilkan pada Widget.

Maka dari itu, kalian harus membuatnya terlebih dahulu di dalam Main Includable dengan menggunakan Tag Include yang tertuju pada id Tag 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>

Coba salin dan pastekan kode Widget diatas kedalam template Blogger kalin dan lihatlah hasilnya.

Semoga kalian dapat memahaminya dengan mudah. Jika artikel ini bermanfaat, silahkan bagikan ini kepada teman-teman atau saudara kalian. Jika kalian memiliki pertanyaan, silahkan tulis pada kolom komentar. Terimakasih telah berkunjung di EL Creative Academy.

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