Cara Menghapus Atribut Otomatis b:widget: Solusi Blog Ringan dan SEO Friendly

28 April 2026 28 April 2026

Pernahkah kamu memeriksa kode sumber (view source) blog kamu dan merasa risih melihat banyak sekali atribut bawaan di dalam tag widget? Sebagai pengguna Blogger, kita seringkali ingin kontrol penuh atas struktur HTML kita. Salah satu elemen yang sering dianggap mengganggu pemandangan kode adalah atribut otomatis yang dihasilkan oleh tag b:widget.

Secara default, saat kita menambahkan widget di Blogger, sistem akan merendernya menjadi tag <div> dengan atribut seperti class='widget PopularPosts', data-version='2', hingga id='PopularPosts1'. Bagi sebagian pengembang template atau kamu yang suka dengan gaya minimalis, atribut-atribut ini seringkali ingin dihapus atau dimodifikasi agar sesuai dengan framework CSS yang digunakan, misalnya Tailwind CSS atau Bootstrap.

Di artikel ini, kita akan bedah tuntas bagaimana cara hapus atribut b:widget Blogger dengan teknik yang aman, efektif, dan tentunya bikin skor SEO atau kecepatan blog kamu jadi lebih baik karena struktur HTML yang lebih ramping. Yuk, simak tutorialnya!

Apa Itu Atribut b:widget dan Mengapa Harus Dihapus?

Sebelum masuk ke langkah teknis, kamu perlu tahu dulu apa itu b:widget. Dalam XML Blogger, b:widget adalah tag pembuka yang bertindak sebagai placeholder. Ketika halaman dimuat, Blogger akan mengubah tag ini menjadi elemen HTML (biasanya <div>).

Contoh kodenya di editor XML adalah seperti ini:

<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts' version='2' visible='true'>

Hasilnya saat diakses oleh pengunjung akan menjadi:

<div class='widget PopularPosts' data-version='2' id='PopularPosts1'> ... </div>

Kenapa kita ingin menghapusnya?

Kerapihan Kode: Menghilangkan atribut yang tidak perlu membuat kode HTML blog kamu lebih enak dilihat.
Kustomisasi Total: Kamu bisa mengganti class bawaan Blogger dengan class buatanmu sendiri tanpa bentrok.
Keamanan: Terkadang, menyembunyikan ID widget bisa meminimalisir bot yang mencoba memetakan struktur blog kamu.
Optimasi Kecepatan: Walaupun kecil, pengurangan karakter dalam HTML berkontribusi pada ukuran dokumen yang lebih ringan.

Metode 1: Menggunakan Tag b:attr

Cara pertama yang bisa kamu lakukan adalah menggunakan tag b:attr. Tag ini berfungsi untuk memanipulasi atribut di dalam elemen XML Blogger. Kamu bisa menaruhnya tepat di dalam tag includable utama widget tersebut.

Langkah-langkahnya:

Masuk ke Dashboard Blogger.
Pilih menu Tema > klik tanda panah bawah di samping "Sesuaikan" > Edit HTML.
Cari widget yang ingin kamu bersihkan atributnya. Contohnya PopularPosts1.
Cari kode <b:includable id='main' var='thiswidget'> di dalam widget tersebut.
Tambahkan kode b:attr di bawahnya untuk mengosongkan nilai atribut.

Contoh penerapannya:

<b:includable id='main' var='thiswidget'>
  <!-- Menghapus ID, Class, dan Data Version -->
  <b:attr name='id' value=''/>
  <b:attr name='class' value=''/>
  <b:attr name='data-version' value=''/>
  
  <div class='konten-kustom-kamu'>
    <!-- Isi Widget -->
  </div>
</b:includable>

Dengan teknik di atas, tag <div> pembungkus widget yang biasanya penuh dengan atribut otomatis akan menjadi bersih atau hanya memiliki atribut yang kamu definisikan secara manual.

Metode 2: Menggunakan b:defaultmarkups

Jika kamu sedang membangun template dari nol atau ingin perubahan yang berlaku secara global di semua widget, kamu bisa menggunakan b:defaultmarkups. Teknik ini jauh lebih efisien karena kamu tidak perlu mengedit widget satu per satu.

Silakan cari tag <b:defaultmarkups> di template kamu (biasanya di bagian atas setelah tag <head>). Jika belum ada, kamu bisa membuatnya sendiri.

Masukkan kode berikut ke dalam struktur template kamu:

<b:defaultmarkups>
  <b:defaultmarkup type='Common'>
    <b:includable id='widget:class'>
      <b:attr name='data-version' value=''/>
      <b:attr expr:value='data:id' name='id'/>
      <b:attr expr:value='data:class ?: "widget"' name='class'/>
    </b:includable>
  </b:defaultmarkup>
</b:defaultmarkups>

Setelah mendefinisikan markup di atas, kamu tinggal memanggilnya di dalam setiap widget dengan kode yang sangat ringkas:

<b:includable id='main' var='thiswidget'>
  <b:include data='{class: (data:class ?: ("widget " + data:widget.type))}' name='widget:class'/>
  
  <!-- Isi konten widget kamu di sini -->
</b:includable>

Apa keunggulannya? Kamu bisa dengan mudah mengganti class atau ID secara dinamis. Misalnya kamu ingin menambahkan class khusus, kamu cukup menulisnya seperti ini:

<b:include data='{ class: "my-custom-class", id: "my-id" }' name='widget:class'/>

Tips Tambahan: Optimasi CSS Setelah Hapus Atribut

Setelah kamu berhasil menghapus atribut bawaan, jangan lupa bahwa CSS bawaan Blogger mungkin tidak akan berfungsi lagi jika mereka mengandalkan selector ID atau Class yang kamu hapus. Oleh karena itu, kamu harus menyiapkan CSS kustom sendiri.

Misalnya, jika sebelumnya CSS kamu merujuk pada:

#PopularPosts1 { background: #fff; }

Dan kamu telah menghapus ID tersebut, pastikan kamu menggantinya dengan class baru yang kamu buat melalui b:attr tadi. Ini adalah langkah krusial agar tampilan blog kamu tidak berantakan setelah proses "pembersihan" kode.

Pertanyaan yang Sering Diajukan (FAQ)

1. Apakah menghapus atribut ini merusak fitur widget?

Tidak, asalkan kamu hanya menghapus atribut visual seperti id, class, atau data-version. Fungsi internal widget (seperti mengambil data postingan terbaru) tetap berjalan normal karena datanya diproses di dalam tag includable, bukan pada atribut pembungkusnya.

2. Apakah cara ini aman untuk Adsense?

Sangat aman. Google Adsense tidak bergantung pada atribut b:widget untuk menampilkan iklan. Justru dengan HTML yang lebih bersih, pemuatan script iklan bisa sedikit lebih lancar karena struktur DOM yang lebih sederhana.

3. Kenapa data-version tetap muncul?

Pastikan kamu menggunakan <b:attr name='data-version' value=''/>. Jika kamu menggunakan template versi 3 (terbaru), terkadang Blogger memaksa atribut tertentu. Namun dengan metode b:defaultmarkups, hampir semua atribut bisa dijinakkan.

Kesimpulan

Menghapus atribut b:widget di Blogger adalah langkah cerdas bagi kamu yang ingin meningkatkan kualitas kode template. Kamu bisa memilih cara instan dengan b:attr atau cara yang lebih terstruktur dengan b:defaultmarkups.

Ingat, blog yang profesional tidak hanya terlihat bagus dari depan, tapi juga harus rapi di bagian belakang (kode). Dengan menerapkan tutorial ini, blog kamu selangkah lebih dekat menuju standar template premium yang ringan dan clean code.

Kalau kamu merasa tutorial ini bermanfaat, jangan ragu untuk membagikannya ke teman-teman sesama Blogger ya! Jika ada kendala saat mengedit kode, silakan tulis di kolom komentar, nanti kita diskusikan bersama. Selamat mencoba!

Aurealisa ID

Fakta Gambar (Science Fact), Kutipan (Quote Of The Day), Ulasan (Science Review), Tips, Artikel.

Ruang Debug