Google PageSpeed Insight dengan Tampilan dan Fitur Baru yang lebih lengkap

Cara Mudah dan Simpel 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...]/>

Daftar Isi

• Membuat Custom Widget
• Google PageSpeed Insight dengan Tampilan dan Fitur Baru yang lebih lengkap
• Include dan Includable
• 5 Populer Template Blogspot Valid AMP Ala Petrus
  • Atribut pada Includable
• Include
  • Atribut pada Include
• Includable Default

Membuat Custom Widget

Untuk membuat Custom Widget, kita harus membuat beberapa perubahan.

Google PageSpeed Insight dengan Tampilan dan Fitur Baru yang lebih lengkap

Pertama kita harus membuat Opening dan Closing tag:

Baca Juga: Cara Mudah dan Simpel Menggunakan dan Memasang Schema Markup pada Blogspot

<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.

5 Populer Template Blogspot Valid AMP Ala Petrus

Berikut adalah contoh penulisan Includable:

Baca Juga: Cara Mudah dan Simpel Membuat Blogger Template: Includable dan Include

<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.

Baca Juga: Cara Mudah dan Simpel Menggunakan Conditional Tag pada Blogger

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.