Cara menggunakan tag widget dalam template

Untuk mendesain sebuah template atau tema sebuah blog anda harus menggunakan widget untuk menambah element - element body blog.

Dalam menambahkan wigdet pada body blog anda perlu mengetahui jenis tag yang di gunakan dan apa fungsi dari tag tersebut. Dalam pembahasan ini kita akan membahas beberapa jenis tag dan fungsi serta cara penggunaan tag tersebut dalam templat untuk membuat suatu widget.
Seperti yang saya ambil dari bantuan Google jenis, fungsi, dan cara penggunaan sebagai berikut

Include (b:include)
Keluaran Data (data:)
Loop (b:loop)
If, elseif, & else (b:if)
Switch (b:switch)
Atribut expressions (expr:)
Evaluated Expressions (b:eval)
Variable alias (b:with)

Include (b:include)

Fungsi tag tersebut adalah untuk memanggil sebuah kode dalam beberapa tempat yang berbeda, atau hanya disertakan dalam keadaan tertentu. Untuk melakukannya, tulis konten dalam b:includable,
lalu gunakan b:include di tempat Anda ingin menampilkannya.
Contoh

<b:includable id='main'>
  <b:loop var='p' index='index' values='posts'>
    <b:include name='post' data='p' cond='index < 10'/>
  </b:loop>
</b:includable>
<b:includable id='post' var='post'>
  Judul: <data:post.title/>
</b:includable>

Keluaran Data (data:)

Fungsi tag (data:) adalah sebagai kode pemanggil suatu element. Atau untuk mencetak element tersebut dalam blog dan kita bisa menggunakan element (.) yang menunjukan jika kita hanya menginginkin atribut dalam (data) tersebut dan bukan lainya sebagai contoh
<data:title/> tag tersebut akan menampilkan judul blog.

<data:photo.url/> untuk membuat atribut url
<data:photo.width/> lebar foto
<data:photo.height/> tinggi foto

Contoh

    </b:if>
    <div class='widget-content'>
      <b:if cond='data:mobile'>
        <select expr:id='data:widget.instanceId + "_select"'>
        <b:loop values='data:links' var='link'>
          <b:if cond='data:link.isCurrentPage'>
            <option expr:value='data:link.href' selected='selected'><data:link.title/></option>
          <b:else/>
            <option expr:value='data:link.href'><data:link.title/></option> 
          </b:if>
        </b:loop>
        </select>

Dalam contoh tersebut kita akan mengetahui bahwa dalam element yang saya tandai warna merah akan menunjukan keadaan jika element widget tersebut di buka lewat mobile bukan yang lain.

Tag loop (b:loop)

Tag tersebut di gunakan untuk mengulangi sebuah bagian konten beberapa kali. Tag tersebut paling sering digunakan untuk menampilkan setiap pos dalam daftar pos bagi laman tertentu, atau setiap komentar, atau setiap label, dan lainya.

Contoh:

<b:loop var='i' values='data:post'>
<h2><data:i.title/></h2>
</b:loop>

Dari contoh tersebut kita bisa mengetahui ('i') akan mengambil nilai setiap post (value:), sehingga anda bisa mendapatkan judul dari setiap post.

Lanjut ke halaman berikutnya

Tags: