tRikSonic
Tema
  • Original
  • Translate

b:loop - Blogger Tutorial

Terakhir diperbarui : 22 Mei 2018 - 04.02

Penjelasan

<b:loop> digunakan untuk melakukan iterasi dua atau lebih algoritmik.
Apa itu iterasi ? iterasi dalam hal ini adalah suatu proses atau metode yang digunakan secara berulang-ulang (pengulangan) untuk mendapatkan atau membuat dan atau menyelesaikan suatu proses.

syntax

<b:loop values='...' var='....'>

</b:loop>

Attribut

  • index
  • reverse
  • values
  • var

Attribut index

  • Attribut ini menghasilakan nilai berupa data angka, yang dihasilkan dari proses pengulangan
  • Nilai : string
  • Keterangan : relative, bisa dituliskan ataupun tidak

Attribut reverse

  • Attribut ini digunakan untuk membalik arah loop
  • Nilai : true dan false
  • Keterangan : relative, bisa dituliskan ataupun tidak
Catatan : attribut ini tidak mempengaruhi attribut index

Attribut values

  • Attribut ini digunakan sebagai tempat menuliskan sebuah array atau data-data tunggal yang ditempatkan menjadi satu variable array.
  • Nilai : Array
  • Keterangan : Wajib ditulis

Attribut var

  • Digunakan sebagai nama Variable dari nilai yang sudah dimasukan.
  • Nilai : Nama_variable
  • Keterangan : Wajib ditulis

Contoh Penggunaan <b:loop>

Contoh standart

<b:loop values='["1", "2", "3", "4"]' var='this'>
  <data:this/>
</b:loop>
Hasil render HTML
1
2
3
4

Contoh dengan attribut reverse

<b:loop values='["a", "b", "c", "d"]' var='this' reverse='true'>
  <data:this/>
</b:loop>
Hasil render HTML
d
c
b
a

Contoh dengan menerapkannya pada HTML

<ul>
  <b:loop values='["aaa", "bbb", "ccc", "ddd"]' var='example'>
    <li><data:example/></li>
  </b:loop>
</ul>
Hasil render HTML
<ul>
  <li>aaa</li>
  <li>bbb</li>
  <li>ccc</li>
  <li>ddd</li>
</ul>

Contoh dengan index

<ul>
  <b:loop index='i' values='["aaa", "bbb", "ccc", "ddd"]' var='example'>
    <li expr:class='"list list-" + (data:i + 1)'><data:example/></li>
  </b:loop>
</ul>
Hasil render HTML
<ul>
  <li class="list list-1">aaa</li>
  <li class="list list-2">bbb</li>
  <li class="list list-3">ccc</li>
  <li class="list list-4">ddd</li>
</ul>

Contoh dengan index dan reverse

Perlu diingat attribut reverse tidak merubah hasil dari attribut index
<ul>
  <b:loop index='i' values='["aaa", "bbb", "ccc", "ddd"]' var='example' reverse='true'>
    <li expr:class='"list list-" + (data:i + 1)'><data:example/></li>
  </b:loop>
</ul>
Hasil render HTML
<ul>
  <li class="list list-1">ddd</li>
  <li class="list list-2">ccc</li>
  <li class="list list-3">bbb</li>
  <li class="list list-4">aaa</li>
</ul>
Selamat berkreasi dan semoga bermanfaat

Informasi :

Artikel ini merupakan panduan tidak resmi tentang xml blogger template.
Untuk mendapatkan informasi yang lebih tepat, sangat disarankan mencarinya pada tautan dibawah ini :

  1. Blog Blogger
  2. Pusat Bantuan Blogger
  3. Forum Bantuan Blogger
  4. Forum Bantuan Google
  5. Stack Overflow

19 komentar

Loker Sumatera
Loker Sumatera4/07/2019ReplyBalas Komentar ini
Bagaimana cara membatasi hasil yg keluar dari penggunaan b:loop ini? Misalkan saya punya data 10, yg ingin saya munculkan hanya 2. Gimana metodenya hu?
Adi Jaya
Adi Jaya4/07/2019
Maaf saya lagi pegang komputer, jd agak susah nulis contoh lengkapnya.

coba tambah kode limit 2 pada kodenya
Adi Jaya
Adi Jaya4/07/2019
Lagi gak megang (ralat yg diatas) ☺☺
Mrs. Idah
Mrs. Idah3/16/2021
Gimana mas caranya biar fungsi limitnya bener ???
Adi Jaya
Adi Jaya3/18/2021
Contoh Manual.

<ul>
<b:loop values='["aaa", "bbb", "ccc", "ddd"] limit 2' var='example'>
<li><data:example/></li>
</b:loop>
</ul>
AdiCore
AdiCore6/21/2021ReplyBalas Komentar ini
b:loop apa juga bisa di gunakan diluar tag b:widget atau b:section mas?

lalu apakah value dari b:loop bisa diisi data dari json?
Adi Jaya
Adi Jaya6/21/2021
Bisa, silahkan lihat di tautan ini : <b:with> Blogger

Tapi Ukuran JSON yang diperbolehkan kurang lebih gak bisa lebih dari 40, jika lebih hasil render akan error.

Kecuali jika Blogger menyediakan fungsi JSON.parse, maka keterbatasan bisa diatasi.
AdiCore
AdiCore6/21/2021
apa file json eksternal juga bisa ditambahkan setelah diparse dengan javascript mas?
Adi Jaya
Adi Jaya6/21/2021
Gak bisa mas
AdiCore
AdiCore6/21/2021
sayang sekali tidak bisa, kalau bisa mungkin akan sangat berguna nantinya
Adi Jaya
Adi Jaya6/21/2021
Tips tambahan jika ingin data yang banyak.
<b:with var='x' value='[...]'>
<b:with var='y' value='[...]'>
<b:loop values='data:x' var='x1'>...</b:loop>
<b:loop values='data:y' var='y1'>...</b:loop>
</b:with>
</b:with>

<!-- atau -->

<ul>
<b:with var='x' value='[...]'>
<b:loop values='data:x' var='x1'>
<li>...</li>
</b:loop>
</b:with>

<b:with var='y' value='[...]'>
<b:loop values='data:y' var='y1'>
<li>...</li>
</b:loop>
</b:with>
</ul>
AdiCore
AdiCore6/23/2021
saya menemukan cara seperti ini Widget HTML Blogger untuk Menyimpan Data Konfigurasi pada website dte, apa dengan cara tersebut termasuk cara memparse json?
Adi Jaya
Adi Jaya6/23/2021
AdiCore
AdiCore12/21/2021
seperti yang mas sebutkan sebelumnya kalau ingin menampilkan data list banyak dengan tag b:with. saya mencoba menampilkan data banyak dengan b:with tapi tidak bisa bisa, lalu ingat komentar mas beberapa bulan lalu terkait b:with. apa datanya harus dibagi dulu lebih kecil atau bagaimana ya mas?

kode saya seperti ini mas:

<b:with value='[{ url: "los-angeles.lax-to-bangkok.bkk", title: "los angeles to bangkok" }, { url: "san-francisco.sfo-to-bangkok.bkk", title: "san francisco to bangkok" }, { url: "new-york.jfk-to-bangkok.bkk", title: "new york to bangkok" }, { url: "phuket.hkt-to-bangkok.dmk", title: "phuket to bangkok" }, { url: "madrid.mad-to-barcelona.bcn", title: "madrid to barcelona" }, { url: "new-york.jfk-to-barcelona.bcn", title: "new york to barcelona" }, { url: "los-angeles.lax-to-barcelona.bcn", title: "los angeles to barcelona" }, {
Adi Jaya
Adi Jaya12/21/2021
Datanya terlalu banyak mas..
Jumlah datanya kurang lebih diatas 35 dibawah 40 kalau saya gak salah ingat...

ingat bukan length sebuah array, tapi jumlah data

mudahnya hitung jumlah tanda koma (kalau array tunggal) atau (key jika kumpulan objek) di Datanya mas.

misal :

["a", "b", "c" ] = (3 array) | (3 data)

[{ x : "a1", y: "b1" }, { x : "a2", y: "b2" }] = ( 2 array ) | ( 4 data )
AdiCore
AdiCore12/22/2021
apa ada cara lainnya mas? atau harus manual?
Adi Jaya
Adi Jaya12/22/2021
Untuk saat ini mau tidak mau harus manual mas.
AdiCore
AdiCore2/16/2022ReplyBalas Komentar ini
kalau b:loop di gabungkan ke tag kondisional bisa gak mas? misal





AdiCore
AdiCore5/01/2022ReplyBalas Komentar ini
mas kalau yang seperti contoh index reserve kalau angkanya dimulai dari angka 0 sampai angka kesekian dan di mulai lagi dari angka lanjutannya caranya bagaimana? saya mau buat untuk id show more/less
Comment Form

Posting Komentar

  1. Untuk menyisipkan sebuah link atau tautan gunakan <i rel="link=//example.com">teks disini</i>
    • Tanpa menggunakan https: dan http:
  2. Untuk menyisipkan sebuah kode yang pendek gunakan <i rel="code">kode disini</i>
  3. Untuk menyisipkan sebuah kode yang panjang gunakan <i rel="pre">kode disini</i>
  4. Untuk menyisipkan sebuah teks Tebal gunakan <strong>teks tebal disini</strong>
  5. Untuk menyisipkan sebuah teks Miring gunakan <em>teks miring disini</em>
  6. Untuk menyisipkan sebuah gambar gunakan <i rel="image">url gambar disini</i>

Ketentuan Komentar

  • Pengguna yang dapat berkomentar adalah pengguna yang memiliki akun google
  • Guna mengurangi komentar yang bersifat spam, maka akan diberlakukan langkah verifikasi kata.
  • Pengguna bertanggung jawab atas komentar yang dikirim
  • Admin dan penulis blog mempunyai hak untuk menampilkan, menghapus, menandai spam, pada komentar yang dikirim
  • Dengan mengirimkan sebuah komentar, maka pengguna dianggap menyetujui semua ketentuan diatas

Poin ketentuan diatas tidak bersifat tetap, dan dapat berubah kapan saja

Konversi Kode
Kode yang ingin dikonversi

Loading.....
X
Run
Klik tombol Run, untuk menampilkan hasil editing, atau menyegarkan editor.