b:with - Blogger Tutorial

Penjelasan

Tag <b:with> adalah sebuah tag perintah yang dapat digunakan dalam membuah ekspresi yang kompleks, dimana nantinya dapat digunakan pada node anak. Tag <b:with> akan menghitung sebuah nilai variabel sebelum digunakan atau sebelum dipanggil oleh tag pemanggil. Tag ini dapat bekerja diseluruh XML terkecuali didalam tag <b:skin>.

Table of contents

• Penjelasan
• Syntax
• Atribut
• Contoh Penggunaan

Syntax

<b:with value='...' var='...'>
  ...
</b:with>

Atribut

Tag <b:with> memiliki atribut yang dapat digunakan antara lain sebagai berikut:

var	awalan expr : Bisa diterapkan	Digunakan untuk menentukan nama dari variable. Nama variable yang digunakan nantikan akan digunakan pada node anak.	Keterangan : wajib ada
value	awalan expr : Bisa diterapkan	Digunakan untuk menentukan Ekspresi yang akan digunakan pada variabel. Nilai yang dapat diberikan untuk atribut ini adalah frase Blogger nilai eksplisit dan, nilai yang diberikan	Keterangan : wajib ada

Contoh Penggunaan

Contoh untuk membuat sebuah thumbnail postingan.

<b:if cond='data:post.thumbnailUrl'>
  <b:with value='data:post.thumbnailUrl ? resizeImage(data:post.thumbnailUrl, 250, "2:1") : data:post.thumbnail' var='thumb'>
    <img expr:src='data:thumb'/>
  </b:with>
</b:if>

Contoh berikut digunakan untuk menyaring suatu postingan dengan penerapan pada label posting.

<widget id='Blog1' type='Blog'>
  <b:includable id='main'>
    <b:with value='data:posts filter (p => p.labels none (l => l.name == "black"))' var='posts'>
      <b:include data='post' name='postCommentsAndAd'/>
    </b:with>
</b:includable>
</widget>

Contoh diatas menjelaskan bahwa postingan yang mempunyai label black tidak akan ditampilkan.

Catatan : contoh diatas diperuntukan widget versi 2 dan layout versi 3, dengan menggunakan template/tema kostum

Contoh untuk membuat daftar list.

<b:with var='mylist' value='[{
  title: "Example list 1",
  url: "https://triksonic.blogspot.com/p/list-1.com"
}, {
  title: "Example list 2",
  url: "https://triksonic.blogspot.com/p/list-2.com"
}, {
  title: "Example list 3",
  url: "https://triksonic.blogspot.com/p/list-3.com"
}]'>

  <ul>
  <b:loop values='data:mylist' var='test'>
    <li>
      <a expr:href='data:test.url' expr:title='data:test.title'><data:test.title/></a>
    </li>
  </b:loop>
  </ul>
  
</b:with>

Hasil render HTML.

<ul>
  <li><a href="https://triksonic.blogspot.com/p/list-1.com" title="Example list 1">Example list 1</a></li>
  <li><a href="https://triksonic.blogspot.com/p/list-2.com" title="Example list 2">Example list 2</a></li>
  <li><a href="https://triksonic.blogspot.com/p/list-3.com" title="Example list 3">Example list 3</a></li>
</ul>

Selamat berkreasi dan semoga bermanfaat.