Tag Elemen Halaman untuk Tata Letak

Bagian `` pada tema tata letak Blogger terdiri dari beberapa bagian (*section*) dan widget. * **Bagian (*Section*)** adalah bidang atau area dari halaman Anda, seperti bilah sisi (*sidebar*) dan *footer*. * **Widget** adalah elemen halaman seperti halaman (*PageList*), *blogroll*, atau apa pun yang dapat Anda tambahkan dari tab "Elemen Halaman". Anda dapat menyertakan HTML apa pun yang disukai di sekitar bagian dalam tema. --- ## Bagian (`b:section`) Every section dalam tema Anda wajib memiliki tag pembuka dan penutup yang ditulis seperti ini: ```xml ``` ### Atribut Tag `` * **`id`** — (Wajib) Nama unik yang hanya boleh terdiri dari kombinasi huruf dan angka. * **`class`** — (Opsional) Nama-nama *class* umum yang sering digunakan meliputi: `"navbar"`, `"header"`, `"main"`, `"sidebar"`, dan `"footer"`. Jika Anda mengubah tema di kemudian hari, nama-nama standar ini membantu Blogger menentukan cara mentransfer konten lama Anda dengan tepat. * **`maxwidgets`** — (Opsional) Jumlah maksimum widget yang diizinkan untuk dimasukkan ke dalam bagian ini. Atribut ini tidak akan membatasi sistem jika tidak ditentukan nilainya. * **`showaddelement`** — (Opsional) Berisi opsi `"yes"` atau `"no"`, dengan `"yes"` sebagai nilai default. Atribut ini menentukan apakah tab Elemen Halaman di dasbor Blogger akan menampilkan tautan tombol "Tambahkan Elemen Halaman" di bagian ini atau tidak. * **`growth`** — (Opsional) Berisi opsi `'horizontal'` atau `'vertical'`, dengan `'vertical'` sebagai nilai default. Atribut ini menentukan susunan tata letak komponen; apakah widget di dalam bagian ini disusun bersebelahan secara mendatar atau ditumpuk secara vertikal. > **Penting:** Sebuah bagian (`b:section`) hanya dapat diisi oleh widget (`b:widget`). Anda tidak bisa menyisipkan kode HTML tambahan langsung di dalam struktur bagian. Untuk menyisipkan kode tambahan, Anda harus memisahkan area tersebut menjadi dua atau beberapa bagian baru. --- ## Widget (`b:widget`) Widget diwakili oleh tag tunggal (*self-closing tag*). Tag ini berfungsi sebagai *placeholder* untuk menunjukkan cara elemen tersebut ditangani dan ditampilkan pada dasbor tab Elemen Halaman. ### Contoh Kode Widget Berikut adalah beberapa contoh deklarasi widget (untuk komponen header halaman, daftar teks, dan arsip blog): ```xml ``` ### Atribut Tag `` * **`id`** — (Wajib) Hanya boleh terdiri dari huruf dan angka. Setiap ID widget di dalam tema Anda harus unik. ID ini bersifat permanen dan tidak dapat diubah kecuali Anda menghapus widget tersebut lalu membuat widget baru. * **`type`** — (Wajib) Menunjukkan jenis atau tipe sistem dari widget yang digunakan (misalnya `Header`, `BlogArchive`, `PageList`). * **`locked`** — (Opsional) Berisi opsi `"yes"` atau `"no"`, dengan `"no"` sebagai nilai default. Widget yang disetel terkunci (`"yes"`) tidak akan bisa dipindahkan tempat atau dihapus melalui tab Elemen Halaman. * **`title`** — (Opsional) Judul tampilan widget. Jika tidak ditentukan, judul default sistem seperti "List1" akan otomatis digunakan. * **`pageType`** — (Opsional) Berisi opsi `"all"`, `"archive"`, `"main"`, atau `"item"`, dengan `"all"` sebagai nilai default. Menentukan agar widget hanya muncul pada tipe halaman blog yang ditunjuk saja. (Catatan: Semua widget akan tetap muncul di tab tata letak dasbor Elemen Halaman tanpa terpengaruh oleh atribut ini). * **`mobile`** — (Opsional) Berisi opsi `"yes"`, `"no"`, atau `"only"`, dengan nilai bawaan berupa `"default"`. Menentukan status visibilitas widget pada perangkat seluler. Jika disetel `"default"`, hanya widget bawaan tertentu seperti *Header, Blog, Profil, PageList, AdSense,* dan *Atribusi* saja yang otomatis dirender pada perangkat seluler. --- > 💡 **Catatan Penting Hasil Publikasi:** > Ketika halaman blog dipublikasikan dan diakses di browser, seluruh tag XML khusus Blogger seperti `` dan `` akan digantikan secara otomatis dengan tag HTML umum `

` dengan atribut `id` yang sesuai. Hal ini memungkinkan Anda untuk dengan mudah memberikan gaya visual CSS menggunakan referensi selektor seperti `div#header` atau `div#myList`.