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

Tampilkan 5 Komentar

5 Komentar

  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
  3. jika kita ingin menampilkan data artikel homepage gmn mas ?

    BalasHapus

Posting Komentar