This site uses cookies for analytics, personalized content and ads. By continuing to browse this site, you agree to this use.
Author Image Saturday, 11 August 2018

Blogger Code - b:section


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
Ví dụ cơ bản

<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>
&lt;!--</body>--&gt; &lt;/body&gt;
</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 !
Comments:
Bạn được tự do bày tỏ quan điểm nhưng nghiêm cấm spam
  • Chèn ảnh theo mẫu [img]link[/img]
  • Chèn video Youtube theo mẫu [youtube]link[/youtube]
  • Chèn code theo mẫu [pre]code[/pre]. Lưu ý: mã hóa code trước khi bình luận

  • Please wait while i am loading Facebook SDK js