b:section là một thẻ rất quan trọng dành cho những ai muốn tự thiết kế template blogger hoặc đơn giản hơn là thêm bố cục theo ý muốn.
b:section khi render ra mã HTML sẽ là 1 thẻ div bình thường, việc blogger tạo ra thẻ này đó là dùng nó để chứa các widget, vì vậy nếu bạn đặt các widget (b:widget) ngoài b:section chắc chắn sẽ bị báo lỗi đỏ và không lưu được
+ b:section chỉ hoạt động trong cặp thẻ <body>...</body>
+ b:section chỉ được phép chứa <b:widget>
+ Một template phải chứa tối thiểu 1 thẻ b:section, một trong số đó phải có thuộc tính preferred='true'
Cấu trúc cơ bản
<b:section class='header' id='header'>
...
</b:section>
Viết đầy đủ các thuộc tính
<b:section class='CLASS_NAME'
cond='TRUE|FALSE'
id='SECTION_ID'
maxwidgets='NUMBER'
name='SECTION_NAME'
preferred='YES|NO|TRUE|FALSE'
showaddelement='YES|NO|TRUE|FALSE'>
...
</b:section>
Trong đó
- id: định nghĩa id của section, đây là giá trị bắt buộc
- class: định nghĩa class của section, không bắt buộc, nếu không khai báo khi render blogger sẽ tự tạo class cho section đó
- name: tên của section, nó dùng để hiển thị tên khi xem ở chế độ bố cục blogger, nếu bỏ qua trường này thì blogger sẽ lấy id của section để hiển thị
- maxwidgets: số lượng widget tối đa cho section, không bắt buộc
- preferred: thuộc tính này dùng để chỉ định thành phần chính của blog
- showaddelement: cho phép hiển thị nút "Thêm tiện ích/Add a gadget"
- cond: điều kiện thực thi section, không bắt buộc
<b:section class='header' id='header' name='XXX' showaddelement='yes'>
...
</b:section>
Khi render
<div class='header section' id='header' name='XXX'> ... </div>
* Áp dụng khi thiết kế template
Tạo template trắng và các section như sau
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html b:css='false' b:defaultwidgetversion='2' b:layoutsVersion='3' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
<head>
<title>
Blogger Code
</title>
<b:skin><![CDATA[
body{margin:0;padding:0}
.clear{clear:both}
.header-wrapper{background:#eee;height:100px}
.main-wrapper{background:#bbb;min-height:600px}
.content-wrapper{float:left;width:70%;min-height:inherit;background:#aaa}
.sidebar-wrapper{float:right;width:30%;min-height:inherit}
.footer-wrapper{background:#ddd;height:70px}
]]></b:skin>
<b:template-skin><![CDATA[
body#layout .main-wrapper{min-height:auto}
body#layout .header-wrapper,body#layout .footer-wrapper{height:auto}
]]></b:template-skin>
</head>
<body>
<div class='header-wrapper'>
<b:section class='header' id='header' showaddelement='yes'/>
</div>
<div class='clear'/>
<div class='main-wrapper'>
<div class='content-wrapper'>
<b:section class='header' id='content' showaddelement='yes'/>
</div>
<div class='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' showaddelement='yes'/>
</div>
</div>
<div class='clear'/>
<div class='footer-wrapper'>
<b:section class='footer' id='footer' showaddelement='yes'/>
</div>
<!--</body>--> </body>
</html>
* Phân tích
Ở đây tôi tạo ra 3 phần (header, content và footer - trong content bao gồm 2 section chứa nội dung chính của blog).
Khi render code css trong b:skin thu được
Đây là giao diện hiển thị bên phía client. Khi tạo mới các section, bạn cũng cần viết thêm css cho layout blogger, tức là viết code trong <b:template-skin> và luôn bắt đầu bằng body#layout
Theo code trên khi xem bố cục thu được
Khi đó bạn có thể thoải mái tạo mới các widget để blog tự sinh code và không bị tràn bố cục
Bố cục hiển thị blogger chủ yếu được xây dựng từ các widget, nếu như bạn không biết b:section là gì thì đừng tự nhận mình là người thiết kế template giỏi
Chúc bạn học tốt !
1. Không vi phạm luật pháp nước CHXHCN Việt Nam
2. Không vi phạm thuần phong mỹ tục Việt Nam
3. Không bàn luận vấn đề liên quan đến tôn giáo, chính trị
4. Không đả kích, chửi bới hay đưa ra những lời nói không phù hợp với mục tiêu của website
5. Không bình luận với mục đích quảng cáo, trao đổi, mua bán
6. Khuyến khích sử dụng Tiếng Việt có dấu, hạn chế sử dụng tiếng lóng, viết tắt
7. Khi cần sự trợ giúp, vui lòng miêu tả chi tiết lỗi và để lại link đính kèm, tránh nói chung chung gây mất thời gian cho đôi bên