Blogger Code - b:widget

b:widget là thành phần chính trong xây dựng giao diện khi sử dụng nền tảng blogspot, thẻ này được các blogger sử dụng thường xuyên nhưng đa phần chỉ là config qua giao diện UI. Trong bài viết này chúng ta sẽ đi sâu hơn vào code của nó

Mô hình chung cho b:widget như sau: vào bố cục thêm mới widget để blogger tự sinh code → quay sang giao diện chỉnh sửa HTML để tùy biến theo ý thích

+ b:widget bắt buộc nằm trong b:section
+ b:widget bắt buộc có id, các b:widget không được trùng id, b:widget chỉ bao gồm b:includable
+ b:widget không được lồng nhau

Cấu trúc cơ bản 1 thẻ b:widget

<b:widget cond='true' id='Header1' locked='false' title='Blogger Code (Header)' type='Header'>
...
</b:widget>

Viết đầy đủ thuộc tính

<b:widget id='WIDGET_ID'
          cond='TRUE|FALSE'
          locked='TRUE|FALSE'
          version='1|2'
          mobile='yes|no|only'
          title='WIDGET_TITLE'
          visible='true|false'
          type='WIDGET_TYPE'>
...
</b:widget>

Trong đó

• id: là id của widget, là duy nhất, dạng số nằm trong khoảng 1 tới 999 và là giá trị bắt buộc
• title: là tiêu đề của widget, là thuộc tính bắt buộc nhưng có thể bỏ trống value (title="")
• type: loại widget, blogspot có rất nhiều type (Header, HTML, Blog, AdSense, Label, LinkList,...) nhưng bạn không cần bận tâm nhiều, chỉ cần add widget trong layout thì blog sẽ tự tạo type cho widget, đây là giá trị bắt buộc
• mobile: đây là thuộc tính chỉ dùng cho widget v1, xác định cho phần hiển thị trên mobile tương ứng: yes-có hiển thị trên mobile và web, no-không hiển thị trên mobile nhưng vẫn hiển thị trên web, only-chỉ hiển thị trên mobile, thuộc tính này không bắt buộc
• locked: khóa widget, khi giá trị này là true, bạn sẽ không di chuyển được widget trong blogger layout nữa và ngược lại, thuộc tính này không bắt buộc
• cond: điều kiện hiển thị của widget, thuộc tính này không bắt buộc
• visible: đây là thuộc tính chỉ dùng cho widget v2, chỉ định xem widget có được hiển thị hay không, đây là sự cải tiến vượt bậc cho widget, khi sử dụng v1 muốn xóa hay ẩn một widget ta phải xóa code hoặc css display:none thì khi lên v2 chỉ cần set visible="false" code sẽ không được render nhưng vẫn còn trong layout blogger, thuộc tính này không bắt buộc
• version: phiên bản của widget, thuộc tính này không bắt buộc

Khi render

• b:widget khi render sẽ là 1 thẻ div
• thẻ div này có id như bạn chỉ định
• thẻ div này có 1 class tên là widget và 1 class là type của widget (ví dụ class="widget HTML")
• thẻ div này có thuộc tính data-version chỉ định version của widget

Ví dụ

<b:widget id='Header1' locked='false' title='Blogger Code (Header)' type='Header' version='2'>
...
</b:widget>

Render

<div class='widget Header' id='Header1' data-version='2'>
...
</div>

Như vậy qua bài này tôi muốn bạn nắm thật chắc các thuộc tính của b:widget để dễ dàng tùy biến khi tạo mới hoặc thiết kế templae. Trong bài sau ta sẽ học về các thành phần bên trong b:widget là b:widget-setting và b:widget-settings

Chúc bạn học tốt !