Chia Footer - Thủ thuật chia Footer Blogger thành nhiều cột

Cho nên, nếu những widget nào kém quan trọng hoặc sử dụng JavaScript, các bạn nên đặt chúng ởFooter. Tuy vẫn phải tải hết toàn bộ các widget hiện có, nhưng content-wrapper (phần quan trọng nhất) sẽ được trình duyệt load trước, còn footer-wrapper chỉ được load sau cùng.

1- Đăng nhập vào Blogger / Blogspot

2- Vào thiết kế

3- Chọn Chỉnh sửa HTML

4- Chèn đoạn code bên dưới vào trước thẻ đóng : ]]></b:skin>

#lower {    
margin:auto;     
padding: 0px 0px 10px 0px;     
width: 100%;     
background:#333333;     
}     
#lower-wrapper {     
background:#333333;     
margin:auto;     
padding: 20px 0px 20px 0px;     
width: 960px;     
border:0;     
}     
#lowerbar-wrapper {     
background:#333333;     
float: left;     
margin: 0px 5px auto;     
padding-bottom: 20px;     
width: 23%;        text-align: justify;     
color:#ddd;     
font: bold 12px Arial, Tahoma, Verdana;     
line-height: 1.6em;     
word-wrap: break-word;     
overflow: hidden;     
}     
.lowerbar {margin: 0; padding: 0;}     
.lowerbar .widget {margin: 0; padding: 10px 20px 0px 20px;}     
.lowerbar h2 {     
margin: 0px 0px 10px 0px;     
padding: 3px 0px 3px 0px;     
text-align: left;     
border:0;     
color:#ddd;     
text-transform:uppercase;     
font: bold 14px Arial, Tahoma, Verdana;     
}     
.lowerbar ul {     
color:#fff;     
margin: 0 auto;     
padding: 0;     
list-style-type: none;     
}     
.lowerbar li {     
display:block;     
color:#fff;     
line-height: 1.6em;     
margin-left: 0 !important;     
padding: 6px;     
border-bottom: 1px solid #222;     
border-top: 1px solid #444;     
list-style-type: none;     
}     
.lowerbar li a {     
text-decoration:none; color: #DBDBDB;     
}     
.lowerbar li a:hover {     
text-decoration:underline;     
}     
.lowerbar li:hover {     
display:block;     
background: #222;     
}

width: 960px; : chiều rộng của widget

width: 23%; : % chiều rộng mỗi cột của widget

5- Tiếp tục, chèn đoạn code bên dưới vào trước thẻ đóng : </body> 

<div id='lower'>    
<div id='lower-wrapper'>     
<div id='lowerbar-wrapper'>     
<b:section class='lowerbar' id='lowerbar1' preferred='yes'>     
</b:section>     
</div>     
<div id='lowerbar-wrapper'>     
<b:section class='lowerbar' id='lowerbar2' preferred='yes'>     
</b:section>     
</div>     
<div id='lowerbar-wrapper'>     
<b:section class='lowerbar' id='lowerbar3' preferred='yes'>     
</b:section>     
</div>     
<div id='lowerbar-wrapper'>     
<b:section class='lowerbar' id='lowerbar4' preferred='yes'>     
</b:section>     
</div>     
<div style='clear: both;'/>     
</div> </div>

Đoạn code trên sẽ chia widget thành 4 cột, mỗi cột có chiều rộng bằng 23% so với tổng chiều rộng widget là 960px. Nếu bạn muốn chia widget thành 5 cột, thì phải điều chỉnh chiều rộng widget và chiều rộng mỗi cột cho hợp lý ( ví dụ cho 5 cột là 17% ), sau đó chèn đoạn code bên dưới vào trước dòng : <div style='clear: both;'/>

<div id='lowerbar-wrapper'>    
<b:section class='lowerbar' id='lowerbar5' preferred='yes'>     
</b:section>     
</div>

6- Save template và quay lại Phần tử trang để bắt đầu chèn bất kỳ widget nào bạn muốn.Nếu trong Phần tử trang các section của Footer widget bố trí thẳng dọc là do Blogger có sự điều chỉnh nào đó từ khi xuất hiện Trình thiết kế mẫu,nhưng điều đó không ảnh hưởng gì tới việc hiển thị trên Blog cả, bạn cứ chèn widget vào đó bình thường.