Blogger Template Desain dari Scratch - Edisi Dua

Dalam satu bagian dari desain Blogger Template dari Scratch - Edisi Satu, Bagian dan tag Widget dijelaskan. Bagian satu hanya menyediakan penggunaan dasar dari Widget inbuilt. Posting ini akan mendapatkan lebih dalam bagaimana widget dapat digunakan untuk membuat elemen template kustom.

 Dasar <b: widget /> tag dijelaskan di bagian salah satu Blogger Template Desain dari Scratch. Dalam posting ini, akan ada penjelasan rinci tentang bagaimana tag widget dapat digunakan untuk memiliki kontrol berbutir halus dari apa yang muncul di dalam widget.

Bentuk dasar dari tag widget berisi tag penutup diri dengan atribut yang berkaitan dengan itu.

<b:widget [attributes...] />

Anda dapat mempertimbangkan ini tag widget dasar seperti fungsi doa, sedangkan definisi fungsi hadir dalam blogger.

Expand Widget Template

Untuk melihat isi dari widget default, gunakan Langsung untuk widget dropdown di halaman Edit HTML (Template -> Edit HTML). Memilih salah satu dari widget. Setelah Anda mencapai kode widget, tekan segitiga panah hitam di nomor baris sejajar dengan kode widget untuk melihat kode widget.

 Membuat Kustom Widget

Untuk membuat widget kustom, kita perlu membuat beberapa perubahan pada tag widget.

Pertama kita perlu memiliki pembukaan dan penutupan tag widget.

<b:widget [attributes...] >
</b:widget>

Sebagian besar jenis widget yang ditentukan dalam posting sebelumnya didefinisikan oleh blogger. Untuk membuat konten kustom di widget, gunakan jenis HTML.

 Contoh:

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

Catatan: Untuk id widget, yang terbaik untuk memberikan id format - {type} {digit mulai dari 1 untuk setiap widget}. Misalnya, jika kontak khusus dan label widget dibuat, mereka masing-id akan menjadi HTML1 dan HTML2 dengan jenis HTML.

<b:widget id='HTML1' type='HTML' locked='yes' title='Contact Us'>[Widget code here...]</b:widget>
<b:widget id='HTML2' type='HTML' locked='yes' title='Labels'>[Widget code here...]</b:widget>

Sertakan dan includable

Untuk menentukan isi dari tag widget, kita menggunakan tag bernama "includable". Tag widget diperluas / kustom harus berisi tag hanya includable di dalamnya.

Includable memiliki dua bagian,

• termasuk - identik dengan nama fungsi. Ketika ini dipanggil, yang includable tertentu akan dipanggil.
• includable - identik dengan definisi fungsi mis tubuh fungsi.

includable Sintaks

<b:includable id='uniqueId' var='dataForWidget'>
    [Di sini kita dapat menempatkan setiap bagian dari kode]
</b:includable>

Atribut includable

id (Diperlukan) - Sebuah pengenal unik yang terdiri dari huruf dan angka.
var (Opsional) - Sebuah identifier terdiri dari huruf dan angka, untuk referensi data dalam bagian ini. Ini adalah bagaimana kami melewati data ke widget. Hal ini juga identik dengan fungsi.

memasukkan

Termasuk digunakan jika Anda memiliki bagian dari kode yang ingin Anda mengulangi beberapa kali di tempat yang berbeda. Ketika mencakup digunakan, yang khususnya termasuk diganti dengan isi includable.

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'>
   Title: <data:p.title/>
</b:includable>

Sertakan Sintaks

<b:include name=’idOfTheIncludable’  data=’dataForIncludable’ />

Sertakan Atribut

• Nama (Wajib) - Sebuah identifier terdiri dari huruf dan angka. Ini harus sesuai dengan ID dari b yang ada: includable dalam widget yang sama.
• Data (Opsional) - Sebuah ekspresi atau suatu bagian data untuk meneruskan ke bagian includable. Ini akan menjadi nilai atribut var di includable.

bawaan includable

Setiap widget kustom harus berisi includable dengan "id" sama dengan "main" (includable utama). includable utama ini akan berisi konten untuk seluruh widget. Infact, ini adalah satu-satunya includable Anda perlu menentukan isi widget. Jika Anda perlu, Anda dapat menentukan lebih includable ini dalam widget dan luar includable utama, dan memasukkannya dalam includable utama menggunakan "termasuk" elemen.

Bahkan jika Anda memiliki lebih includable dengan id yang berbeda ini tidak akan ditampilkan secara otomatis di widget. Anda perlu menentukan dalam includable utama menggunakan "termasuk" unsur dengan mengacu pada id includable.

Dodle: Jika Anda memiliki pengalaman dalam C Programming, akan ada main function () yang akan dipanggil pertama untuk memulai pelaksanaan program. Pertimbangkan includable utama (id = 'main') sebagai fungsi utama () di C Programming untuk widget.

Contoh:

<b:widget id='HTML1' type='HTML' locked='yes' title='Labels'>
    <b:includable id='main'>
        <h3>Labels</h3>
        <b:include name='labels'></b:include>
    </b:includable>
    <b:includable id='labels'>
        <ul>
            <li><a href='#' title='PHP'>PHP</a></li>
            <li><a href='#' title='Java'>Java</a></li>
            <li><a href='#' title='CPP'>CPP</a></li>
        </ul>
    </b:includable>
</b:widget>

Anda dapat menempatkan kode widget di atas pada template blogger Anda untuk melihat output.
Selesai juga tutorial Blogger Template Desain dari Scratch - Edisi Dua. Semoga bermanfaat.