Mengakses Data Global Widget di Blogger

Penjelasan

Saat membuat atau mengedit template Blogger, kita sering perlu mengambil informasi dari sebuah widget - seperti judulnya, tipenya, atau ID-nya. Secara normal, informasi itu hanya bisa diakses dari dalam widget itu sendiri (di antara tag <b:widget> dan </b:widget>).

Namun, di Layout Version 3 (versi template terbaru Blogger), ada sebuah objek global bernama data:widgets yang memungkinkan kita mengakses data widget dari mana saja di dalam template. Artinya, kita bisa memanggil judul sebuah widget dari dalam <head>, dari footer, atau bahkan dari dalam widget lain yang berbeda.

Kapan Fitur Ini Berguna?

  • Logika kondisional - Misalnya: "Jika judul widget HTML1 adalah 'Iklan', maka sembunyikan elemen tertentu."
  • Menampilkan informasi widget di luar tempatnya — Misalnya menampilkan judul widget di area header padahal widget-nya ada di sidebar.
  • Debugging — Mengecek tipe atau ID widget saat sedang mengembangkan template.

Syarat Penggunaan

Pastikan template Anda sudah menggunakan Layout Version 3. Cirinya, pada bagian paling atas kode XML template Anda, terdapat atribut seperti ini: 

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html b:layoutsVersion='3' ...>

Jika template Anda masih menggunakan b:layoutsVersion='2' atau tidak ada atribut tersebut, fitur data:widgets kemungkinan tidak akan bekerja.

Sintak (Kode Dasar)

Ada 2 cara penulisan untuk mengakses data global widget. Keduanya menghasilkan output yang sama, Anda bebas memilih sesuai kebutuhan.

Cara 1: Tag Data Klasik

<data:widgets.{NamaWidget}.{Properti}/>

Cara ini paling sederhana. Cocok jika Anda hanya ingin menampilkan nilainya secara langsung.

Cara 2: Tag b:eval

<b:eval expr='data:widgets.{NamaWidget}.{Properti}'/>

Cara ini lebih fleksibel. Gunakan cara ini jika Anda ingin menggabungkan data dengan operasi lain, seperti perbandingan di dalam b:if atau penggabungan string.

Keterangan Placeholder

Placeholder Penjelasan
{NamaWidget} ID unik widget yang tertera di Tata Letak (Layout) blog Anda. Contoh: HTML1, Blog1, Label1, PopularPosts1, Header1.
{Properti} Jenis data yang ingin diambil dari widget tersebut. Lihat tabel atribut di bawah.

Atribut yang Tersedia

Berikut adalah tiga properti yang bisa diambil dari sebuah widget menggunakan objek data:widgets:

Properti Tipe Data Deskripsi
title String (teks) Mengambil judul yang tertulis pada widget tersebut. Judul ini adalah teks yang Anda isi di kolom "Judul" saat mengedit widget di menu Tata Letak.
type String (teks) Mengambil jenis/tipe widget tersebut. Contoh hasilnya: HTML, Blog, Label, PopularPosts, Feed, Image, dll.
id Number (angka) Mengambil angka ID dari widget tersebut. Yang diambil hanya bagian angkanya saja. Misalnya jika ID widget adalah HTML1, maka hasilnya 1. Jika Label2, hasilnya 2.

Contoh Penggunaan

Untuk semua contoh di bawah ini, kita asumsikan Anda memiliki sebuah widget HTML/JavaScript di Tata Letak blog dengan konfigurasi berikut:

  • ID Widget: HTML1
  • Judul Widget: Iklan Atas

1. Menampilkan Judul Widget

Menampilkan teks judul widget HTML1 di luar widget tersebut. 

<h3>
  <b:eval expr='data:widgets.HTML1.title'/>
</h3>

Hasil HTML di browser:

<h3>Iklan Atas</h3>

2. Menampilkan Tipe Widget

Mengecek dan menampilkan jenis widget HTML1.

<div class='info-widget'>
  Tipe Widget ini adalah: <b:eval expr='data:widgets.HTML1.type'/>
</div>

Hasil HTML di browser:

<div class='info-widget'>
  Tipe Widget ini adalah: HTML
</div>

3. Menampilkan Angka ID Widget

Mengambil bagian angka saja dari ID widget HTML1. 

<span class='widget-number'>
  Nomor ID: <b:eval expr='data:widgets.HTML1.id'/>
</span>

Hasil HTML di browser:

<span class='widget-number'>
  Nomor ID: 1
</span>

4. Menggunakan dalam Kondisi b:if

Ini adalah penggunaan yang paling praktis. Misalnya, Anda ingin menampilkan sesuatu hanya jika judul widget HTML1 adalah "Iklan Atas". 

<b:if cond='data:widgets.HTML1.title == "Iklan Atas"'>
  <div class='ad-banner'>
    <!-- Kode iklan atau elemen lainnya ditampilkan di sini -->
    <p>Bagian ini hanya muncul karena widget HTML1 berjudul "Iklan Atas".</p>
  </div>
</b:if>

Penjelasan: Kode di dalam b:if hanya akan dirender jika kondisinya terpenuhi. Jika Anda mengubah judul widget HTML1 menjadi sesuatu yang lain, blok di atas tidak akan tampil.

5. Menggunakan di Dalam Atribut HTML

Anda juga bisa menyisipkan data widget ke dalam atribut HTML 

<div b:attr:data-widget-type='data:widgets.HTML1.type'
     b:attr:data-widget-id='data:widgets.HTML1.id'>
  Elemen ini membawa informasi widget sebagai data attribute.
</div>

Hasil HTML di browser:

<div data-widget-type='HTML' data-widget-id='1'>
  Elemen ini membawa informasi widget sebagai data attribute.
</div>