Tag Widget untuk Tata Letak

Bila menggunakan tema Tata Letak untuk membuat bagian badan blog, Anda dapat menggunakan widget untuk menambahkan elemen halaman seperti gambar dan blogroll.

Jenis tag

Bagian ini menjelaskan HTML yang dapat Anda gunakan dalam tag penutup Blogger.

1. Include (`b:include` & `b:includable`)

Kapan include digunakan

Include paling berguna jika Anda memiliki bagian dari kode yang ingin digunakan kembali di 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.

Format

<b:includable id='main' var='thiswidget'>
  [sisipkan konten yang Anda inginkan di sini]
</b:includable>

Atribut

id (wajib): Pengenal unik yang terdiri dari huruf dan angka. Setiap widget harus memiliki satu includable dengan id='main'.
var (opsional): Pengenal yang terdiri dari huruf dan angka, untuk referensi data dalam bagian ini.

Catatan: Jika Anda membuat lebih banyak includable dengan ID berbeda, includable tidak akan ditampilkan secara otomatis. Namun, jika membuat includable dengan id='new', Anda dapat mereferensikannya dalam includable utama dengan <b:include name='new'> agar dapat ditampilkan.

Atribut-atribut untuk tag b:include adalah sebagai berikut:

name (wajib): Pengenal yang terdiri dari huruf dan angka. Ini harus sesuai dengan ID b:includable yang ada dalam widget yang sama.
data (opsional): Ekspresi atau potongan data untuk diteruskan ke bagian includable. Ini akan menjadi nilai atribut var di includable.
cond (opsional): Ekspresi yang menyebabkan include hanya dijalankan ketika hasilnya benar. Ini sama dengan atribut cond pada b:if.

Contoh

Contoh di bawah ini memperlihatkan cara bagian "main" menyertakan bagian "post" di dalamnya. Sebuah pos yang disebut "p" diteruskan ke bagian includable yang direferensikan sebagai var "post"-nya, kemudian judulnya akan dicetak.

Perhatikan bahwa include hanya berjalan jika indeksnya kurang dari 10, sehingga maksimal hanya 10 pos yang akan dirender dalam contoh ini (indeks dimulai dari 0).

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

2. Keluaran Data (`data:`)

Mengambil dan menampilkan nilai data dari kamus data Blogger berdasarkan konteks widget yang digunakan.

Contoh

<data:title/> akan mencetak judul widget
<data:photo.url/> - Ukuran: <data.photo.width /> x <data.photo.height /> akan mencetak atribut komponen foto. Foto mungkin memiliki komponen seperti URL, tinggi, dan lebar. Menggunakan notasi "." menunjukkan bahwa kita menginginkan URL untuk foto ini, dan bukan URL dari hal lainnya.

3. Loop (`b:loop`)

Kapan `b:loop` digunakan

Tag b:loop memungkinkan Anda mengulangi sebuah bagian konten beberapa kali. Hal ini paling sering digunakan untuk mencetak setiap pos dalam daftar pos bagi laman tertentu, setiap komentar, atau setiap label.

Format

<b:loop var='identifier' values='set-of-data'>
  [konten yang diulang ditempatkan di sini]
</b:loop>

Bagian var (identifier) dapat diisi dengan nama apa pun yang Anda pilih, dan akan digunakan sebagai variabel penampung item baru dalam daftar setiap kali perulangan berjalan. Nilai dari atribut values diisi dengan data berbentuk daftar (list/array).

Contoh penggunaan pada widget blog post untuk mengulang setiap objek di dalam daftar posts dan menampilkan judulnya menggunakan tag header:

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

Rentang Angka

Tag loop juga memungkinkan Anda melakukan perulangan pada rentang angka inklusif, seperti 1 to 3 atau -3 to -9. Contoh berikut akan membuat daftar 1, 2, dan 3:

<b:loop var='i' values='1 to 3'>
  <li><data:i /></li>
</b:loop>

Atribut Indeks

Tag loop memiliki atribut index opsional yang menyediakan nilai indeks berbasis nol (zero-based index) dari urutan perulangan saat ini.

Judul pengantar isi kode

<ul>
  <b:loop var='number' index='index' values='9 to 7'>
    <li>Indeks: <data:index />, Angka: <data:number /></li>
  </b:loop>
</ul>

Hasil keluaran HTML dari kode di atas adalah:

Indeks: 0, Angka: 9
Indeks: 1, Angka: 8
Indeks: 2, Angka: 7

4. Kondisional (`b:if`, `b:elseif`, & `b:else`)

Kapan kondisional digunakan

Digunakan untuk menampilkan konten tertentu hanya jika suatu kondisi terpenuhi. Misalnya, menampilkan teks tertentu hanya di beranda dan menyembunyikannya di halaman pos.

Format

<b:if cond='condition'>
  [konten untuk ditampilkan jika kondisi benar]
<b:elseif cond='another condition'/>
  [konten untuk ditampilkan jika tidak ada kondisi if atau elseif sebelumnya yang benar, dan kondisi elseif ini benar]
<b:else/>
  [konten untuk ditampilkan jika tidak ada kondisi if atau elseif yang terpenuhi]
</b:if>

Catatan: Tag b:elseif dan b:else bersifat opsional, namun tag penutup </data:photo></data:photo></data:photo></data:title></b:include> wajib dituliskan.

Contoh Atribut Kondisi (`cond`)

<b:if cond='data:post.showBacklinks'> → Benar jika pos saat ini disetel untuk menampilkan tautan balik (backlinks).
<b:if cond='data:blog.pageType == "item"'> → Benar jika halaman saat ini adalah halaman artikel (*item page*).
<b:if cond='data:blog.pageType == "item" and data:post.showBacklinks'> → Benar jika tipe halaman adalah artikel DAN pos disetel menampilkan tautan balik.
<b:if cond='data:displayname != "Fred"'> → Benar jika nama tampilan bukan "Fred".
<b:if cond='data:displayname == "Fred" or data:blog.pageType == "static_page"'> → Benar jika nama tampilan adalah "Fred" ATAU jenis halaman saat ini adalah halaman statis.
<b:if cond='data:post.numComments > 1'> → Benar jika pos memiliki lebih dari satu komentar.
<b:if cond='data:blog.pageType in {"static_page", "item"}'> ATAU <b:if cond='{"static_page", "item"} contains data:blog.pageType'> → Benar jika tipe halaman saat ini berupa halaman statis atau halaman artikel.

5. Switch (`b:switch`)

Kapan Switch digunakan

Fungsinya mirip dengan struktur b:if yang memiliki banyak cabang b:elseif. Keuntungannya, Anda tidak perlu menuliskan nama variabel berulang kali pada setiap pemeriksaan kondisi, sehingga kode lebih bersih dan mudah dibaca.

Format

<b:switch var='[Ekspresi data]'>
<b:case value="[Nilai 1]" />
 [Keluaran jika evaluasi var sama dengan Nilai 1]
<b:case value="[Nilai 2]" />
 [Keluaran jika evaluasi var sama dengan Nilai 2]
[... nilai lainnya]
<b:default />
 [Keluaran jika evaluasi var tidak sama dengan b:case lainnya yang dinyatakan]
</b:switch>

Contoh

Menampilkan tag header yang berbeda berdasarkan jenis halaman yang sedang diakses:

<b:switch var='data:blog.pageType'>
<b:case value="static_page" />
  <h1>Laman</h1>
<b:case value="item" />
  <h1>Pos</h1>
<b:default />
  <h2>Pos Blog</h2>
</b:switch>

6. Atribut Expressions (`expr:`)

Kapan Expression digunakan

Digunakan untuk menetapkan nilai suatu atribut HTML secara dinamis berdasarkan kalkulasi atau ekspresi dari kamus data Blogger. Anda cukup menambahkan prefiks expr: sebelum nama atribut HTML.

Contoh

<a expr:href='data:blog.homepageUrl'>Beranda</a> → Atribut href diisi otomatis dengan URL beranda blog.
<a expr:href='data:blog.homepageUrl + "feeds/posts/default"'>RSS Pos</a> → Menggabungkan string URL beranda dengan path feed menggunakan operator +.
<a expr:class='data:post.allowComments ? "comment" : "no-comment">Komentar</a> → Menggunakan operator terner (?:). Jika allowComments bernilai benar (true), kelas yang dipasang adalah "comment". Jika salah (false), kelasnya menjadi "no-comment".

7. Evaluated Expressions (`b:eval`)

Kapan menggunakan Evaluated Expression

Tag b:eval digunakan untuk mengevaluasi secara langsung ekspresi logika atau matematika yang lebih kompleks daripada penggunaan tag data standar.

Format

<b:eval expr='[Ekspresi]' />

Contoh

ketinggian minimal: <b:eval expr="data:newWidth * data:height / data:width" />px → Menghasilkan nilai tinggi relatif berdasarkan perhitungan proporsi lebar yang baru.
<b:eval expr="data:post.labels[0].url" /> → Mengeluarkan nilai URL dari objek label pertama di dalam postingan.
<b:eval expr='data:post.allowComments ? "Comment" : "Comments Disabled" /> → Mengeluarkan teks string "Comment" atau "Comments Disabled" secara langsung menggunakan operator terner.

8. Variable Alias (`b:with`)

Kapan menggunakan variable alias

Tag b:with digunakan untuk menyimpan hasil kalkulasi dari suatu ekspresi ke dalam variabel lokal sementara. Hal ini berguna untuk menghindari penulisan ekspresi sebaris (inline expression) yang panjang dan rumit secara berulang kali.

Format

<b:with var='myComputedValue' value='[Ekspresi data]' />

Contoh

Menghitung susunan kode CSS inline style yang rumit terlebih dahulu sebelum merender elemen HTML, sehingga struktur kode HTML di dalamnya tetap bersih:

<b:with var='style'
       value='"background-image: url(\"" + data:sourceUrl "\"); "
           + " width: " + data:width + "px; " '>
 <div id='header-outer'>   
   <div id='header-inner' expr:style='data:style'>
     <h1>Header saya</h1>
   </div>
 </div>
</b:with>

Catatan: Variabel lokal ini hanya tersedia dan dapat diakses oleh elemen anak (child nodes) yang berada di dalam lingkup tag penutup </b:with>.

Contoh Implementasi Lengkap (Widget `PageList`)

Berikut adalah contoh bagaimana seluruh tag di atas dikombinasikan di dalam susunan kode HTML asli untuk struktur widget PageList pada Blogger:

<b:widget id='PageList1' locked='false' title='Pages' type='PageList'>
  <b:includable id='main'>
    <b:if cond='data:title != ""'>
      <h2><data:title/></h2>
    </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>
        <span class='pagelist-arrow'>&amp;#9660;</span>
      <b:else/>
        <ul>
        <b:loop values='data:links' var='link'>
          <b:if cond='data:link.isCurrentPage'>
            <li class='selected'>
              <a expr:href='data:link.href'><data:link.title/></a>
            </li>
          <b:else/>
            <li>
              <a expr:href='data:link.href'><data:link.title/></a>
            </li>
          </b:if>
        </b:loop>
        </ul>
      </b:if>
      <b:include name='quickedit'/>
    </div>
  </b:includable>
</b:widget>