Cara Melihat ID Widget Blogger dengan Mudah

inisiteku • Agustus 03, 2026
Cara Melihat ID Widget Blogger dengan Mudah

Apakah Anda ingin mengedit template Blogger, menambahkan CSS khusus, atau memasang kode JavaScript yang hanya berlaku pada widget tertentu? Jika iya, maka Anda perlu mengetahui ID widget Blogger terlebih dahulu.

Setiap widget di Blogger memiliki ID unik yang digunakan oleh sistem untuk membedakan satu widget dengan widget lainnya. ID ini sangat penting ketika Anda ingin melakukan kustomisasi tampilan atau fungsi widget melalui kode HTML, CSS, maupun JavaScript.

Pada tutorial ini, Inisiteku akan menjelaskan beberapa cara melihat ID widget Blogger dengan mudah, baik melalui menu Tata Letak maupun Edit HTML.

Apa Itu ID Widget Blogger?

ID widget adalah identitas unik yang diberikan Blogger pada setiap gadget atau widget yang ditambahkan ke blog.

Contoh ID widget yang sering dijumpai:

  • Header1

  • Blog1

  • HTML1

  • HTML2

  • Label1

  • PopularPosts1

  • BlogArchive1

  • Profile1

Setiap ID tersebut berbeda-beda tergantung jenis dan jumlah widget yang ada pada blog Anda.

Mengapa Harus Mengetahui ID Widget?

Mengetahui ID widget sangat berguna ketika Anda ingin:

  • Menyembunyikan widget tertentu menggunakan CSS.

  • Mengubah tampilan widget secara spesifik.

  • Menambahkan efek JavaScript pada widget tertentu.

  • Membuat widget hanya muncul di halaman tertentu.

  • Mengedit template Blogger dengan lebih mudah.

  • Mengatasi error saat mengikuti tutorial Blogger yang memerlukan ID widget.

Cara Melihat ID Widget Blogger

Ada beberapa metode yang dapat Anda gunakan.

Cara 1. Melalui Edit HTML (Paling Mudah)

Cara ini merupakan metode yang paling banyak digunakan karena seluruh widget akan terlihat lengkap.

Langkah-langkah

  1. Login ke akun Blogger.

  2. Pilih blog yang ingin diedit.

  3. Klik menu Tema.

  4. Pilih Edit HTML.

  5. Tekan Ctrl + F pada keyboard.

  6. Cari kata berikut:

<b:widget

Blogger akan menampilkan daftar widget seperti contoh berikut.

<b:widget id='Header1' locked='true' title='Inisiteku' type='Header'>

Contoh lainnya:

<b:widget id='HTML2' type='HTML'>

atau

<b:widget id='PopularPosts1' type='PopularPosts'>

Bagian setelah atribut id merupakan ID widget yang Anda cari.

Cara 2. Melalui Menu Tata Letak

Cara berikutnya adalah melalui menu Tata Letak.

Langkah-langkah

  1. Masuk ke Dashboard Blogger.

  2. Klik Tata Letak.

  3. Pilih widget yang ingin diketahui ID-nya.

  4. Klik tombol Edit.

  5. Perhatikan alamat (URL) pada browser.

Biasanya URL akan berisi parameter seperti berikut.

widgetType=HTML&widgetId=HTML2

atau

widgetId=PopularPosts1

Nilai setelah widgetId= merupakan ID widget tersebut.

Cara 3. Menggunakan Inspect Element

Cara ini cocok apabila Anda ingin mengetahui ID widget langsung dari halaman blog.

Langkah-langkah:

  1. Buka halaman blog.

  2. Tekan tombol F12.

  3. Pilih menu Inspect.

  4. Cari elemen widget.

Contohnya:

<div class="widget HTML" id="HTML2">

atau

<section id="HTML2">

Jika template masih menggunakan struktur bawaan Blogger, ID widget biasanya akan terlihat dengan jelas.

Contoh Penggunaan ID Widget

Menyembunyikan Widget

#HTML2{
display:none;
}

Memberikan Warna Background

#HTML2{
background:#f5f5f5;
padding:20px;
border-radius:10px;
}

Menggunakan Kondisi Blogger

<b:if cond='data:widget.instanceId == "HTML2"'>

</b:if>

Kode tersebut hanya akan dijalankan pada widget dengan ID HTML2.

Tips Saat Mengedit Widget

Agar proses pengeditan berjalan aman, perhatikan beberapa tips berikut.

  • Selalu lakukan backup tema sebelum mengedit HTML.

  • Gunakan fitur pencarian (Ctrl + F) agar lebih cepat menemukan widget.

  • Jangan mengubah ID widget secara sembarangan.

  • Pastikan kode XML tetap valid setelah diedit.

  • Simpan perubahan secara berkala untuk menghindari kehilangan data.

FAQ (Pertanyaan yang Sering Diajukan)

1. Apa itu ID widget Blogger?

ID widget Blogger adalah kode unik yang diberikan pada setiap widget atau gadget di Blogger. ID ini digunakan untuk membedakan setiap widget sehingga dapat diedit atau dikustomisasi menggunakan HTML, CSS, maupun JavaScript.

2. Bagaimana cara melihat ID widget di Blogger?

Anda dapat melihat ID widget melalui Tema → Edit HTML, kemudian cari tag <b:widget>. Selain itu, ID widget juga bisa diketahui melalui menu Tata Letak dengan membuka pengaturan widget dan melihat parameter widgetId pada URL.

3. Apakah setiap widget memiliki ID yang berbeda?

Ya. Setiap widget memiliki ID yang unik, misalnya Header1, Blog1, HTML1, Label1, atau PopularPosts1. ID tersebut tidak akan sama dengan widget lainnya.

4. Mengapa saya perlu mengetahui ID widget Blogger?

Mengetahui ID widget memudahkan Anda saat ingin mengubah tampilan widget menggunakan CSS, menambahkan JavaScript, menyembunyikan widget tertentu, atau mengikuti tutorial kustomisasi template Blogger.

5. Apakah aman mengedit widget melalui Edit HTML?

Aman, selama Anda tidak menghapus atau mengubah kode penting pada template. Sebelum melakukan perubahan, disarankan untuk mencadangkan (backup) tema Blogger agar mudah dipulihkan jika terjadi kesalahan.

6. Apakah ID widget bisa diubah?

Secara umum, ID widget dibuat otomatis oleh Blogger dan tidak disarankan untuk diubah. Mengubah ID widget dapat menyebabkan kode CSS, JavaScript, atau fitur tertentu tidak berfungsi sebagaimana mestinya.

Kesimpulan

Mengetahui ID widget Blogger merupakan langkah penting bagi siapa saja yang ingin melakukan kustomisasi template. Anda dapat melihat ID widget melalui menu Tema → Edit HTML, menu Tata Letak, atau menggunakan fitur Inspect Element pada browser.

Dari ketiga cara tersebut, metode Edit HTML merupakan pilihan yang paling mudah dan lengkap karena seluruh widget beserta ID-nya dapat ditemukan dalam satu tempat.

Dengan mengetahui ID widget, Anda akan lebih mudah mengikuti berbagai tutorial Blogger yang memerlukan penyesuaian kode CSS, HTML, maupun JavaScript.

Label: blogger

Artikel Terkait