Tata Letak Widget Blog

Kapan Include Digunakan

Tag <b:include> paling berguna jika Anda memiliki bagian kode yang ingin digunakan kembali di beberapa tempat yang berbeda, atau hanya ditampilkan dalam kondisi tertentu.

Untuk menggunakannya, tulis konten di dalam <b:includable>, lalu panggil dengan <b:include> di lokasi yang diinginkan.

Format Dasar

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

Atribut b:includable

• id (wajib) : Pengenal unik yang terdiri dari huruf dan angka. Setiap widget harus memiliki satu includable dengan id='main'.
• var (opsional) : Nama variabel untuk mereferensikan data di dalam bagian includable.

Jika Anda membuat includable dengan ID lain, maka bagian tersebut tidak akan ditampilkan secara otomatis. Namun, includable tersebut bisa dipanggil dari includable utama menggunakan:

<b:include name='new' />

Atribut b:include

• name (wajib) : Harus sesuai dengan nilai id pada b:includable.
• data (opsional) : Data yang diteruskan ke includable dan akan menjadi nilai dari atribut var.
• cond (opsional) : Kondisi agar include hanya dijalankan jika ekspresi bernilai benar.

Contoh Penggunaan

Contoh berikut memperlihatkan cara b:includable utama dengan ID main menyertakan includable lain bernama post.

Pada contoh ini, hanya maksimal 10 postingan yang dirender, karena include hanya dijalankan jika indeks kurang dari 10 (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>

Tag data: digunakan untuk menampilkan (mencetak) nilai data dari widget, pos, blog, atau komponen lainnya di Blogger.

Contoh Dasar

<data:title/>

Kode di atas akan mencetak judul widget.

Contoh Data Foto

<data:photo.url/> - Ukuran:
<data:photo.width /> x <data:photo.height />

Contoh di atas akan mencetak atribut dari sebuah foto, seperti:

• URL foto
• Lebar foto
• Tinggi foto

Penggunaan notasi titik (.) menandakan bahwa kita mengakses properti tertentu dari sebuah objek data, misalnya photo.url, bukan URL dari objek lain.

Kapan b:loop Digunakan

Tag <b:loop> memungkinkan Anda mengulangi sebuah bagian konten beberapa kali. Biasanya digunakan untuk:

• Menampilkan daftar pos
• Menampilkan komentar
• Menampilkan label atau menu

Format Dasar b:loop

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

Bagian var berfungsi sebagai variabel penampung setiap item dalam daftar data. Nama variabel bebas Anda tentukan.

Contoh Loop Post

Pada widget posting blog, data:posts merupakan sebuah daftar pos. Contoh berikut akan mencetak judul setiap pos.

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

Variabel i akan mengambil nilai setiap pos secara bergantian, sehingga Anda bisa mengakses data pos seperti judul, tanggal, atau konten.

Loop Rentang Angka

Tag b:loop juga dapat digunakan untuk mengulang rentang angka, baik naik maupun turun.

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

Kode di atas akan menghasilkan daftar: 1, 2, dan 3.

Atribut Index

Atribut index bersifat opsional dan memberikan indeks berbasis nol dari perulangan saat ini.

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

Hasilnya:

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

Kapan b:if Digunakan

Tag b:if, b:elseif, dan b:else digunakan untuk menampilkan konten secara kondisional.

Contohnya, menampilkan teks tertentu hanya di halaman beranda, dan teks lain di halaman pos.

Format Dasar

<b:if cond='condition'>
  [konten jika kondisi benar]
<b:elseif cond='another condition'/>
  [konten jika kondisi elseif benar]
<b:else/>
  [konten jika semua kondisi salah]
</b:if>

Tag b:elseif dan b:else bersifat opsional, namun penutup </b:if> tetap wajib digunakan.

Contoh Kondisi b:if

<b:if cond='data:post.showBacklinks'>

Benar jika pos saat ini disetel untuk menampilkan link balik.

<b:if cond='data:blog.pageType == "item"'>

Benar jika halaman saat ini adalah halaman pos.

<b:if cond='data:blog.pageType == "item" and data:post.showBacklinks'>

Benar jika halaman adalah halaman pos dan link balik diaktifkan.

<b:if cond='data:displayname != "Fred"'>

Benar jika nama tampilan bukan Fred.

<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"}'>

Benar jika halaman adalah halaman statis atau halaman pos.

Kapan Switch Digunakan

Tag b:switch digunakan dengan cara yang mirip seperti b:if dengan banyak b:elseif.

Keuntungan utama b:switch adalah:

• Tidak perlu mengulang nama variabel
• Struktur lebih rapi dan mudah dibaca
• Jelas terlihat setiap kemungkinan kasus

Format b:switch

<b:switch var='[Ekspresi data]'>
  <b:case value="[Nilai 1]" />
    [Keluaran jika sama dengan Nilai 1]
  <b:case value="[Nilai 2]" />
    [Keluaran jika sama dengan Nilai 2]
  <b:default />
    [Keluaran jika tidak ada case yang cocok]
</b:switch>

Contoh Penggunaan b:switch

Contoh berikut menampilkan header berbeda berdasarkan jenis halaman yang sedang dirender.

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

Kapan expr: Digunakan

Atribut expr: digunakan untuk menyetel nilai atribut HTML berdasarkan ekspresi dari data Blogger.

Atribut ini memungkinkan HTML menjadi dinamis tanpa menulis logika kompleks secara langsung.

---

Contoh Penggunaan expr:

<a expr:href='data:blog.homepageUrl'>Beranda</a>

Menampilkan link menuju halaman beranda blog.

<a expr:href='data:blog.homepageUrl + "feeds/posts/default"'>
  RSS Pos
</a>

Operator + digunakan untuk menggabungkan dua string.

<a expr:class='data:post.allowComments ? "comment" : "no-comment"'>
  Komentar
</a>

Operator ternary (?:) memilih nilai berdasarkan kondisi boolean.

Kapan Menggunakan b:eval

Tag b:eval digunakan untuk mengevaluasi ekspresi yang lebih kompleks dibandingkan tag data: biasa.

Format b:eval

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

Contoh b:eval

ketinggian minimal:
<b:eval expr="data:newWidth * data:height / data:width" />px;

Menghasilkan tinggi relatif berdasarkan perhitungan proporsional.

<b:eval expr="data:post.labels[0].url" />

Menghasilkan URL dari label pertama pada sebuah pos.

<b:eval expr='data:post.allowComments
  ? "Comment"
  : "Comments Disabled"' />

Menggunakan operator ternary untuk menampilkan teks berdasarkan kondisi.

Kapan Menggunakan b:with

Tag b:with digunakan untuk menyimpan nilai ekspresi sementara agar kode HTML lebih bersih dan mudah dibaca.

Variabel hanya tersedia untuk elemen anak dari b:with.

Format b:with

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

Contoh Penggunaan b:with

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

<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'>&#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>