Để làm được như vậy, các bạn làm các bước sau:
Bước 1: Đầu tiên bạn vào Mẫu/ Chỉnh sửa HTML
Bước 2: Tìm thẻ ]]></b:skin> (bằng cách nhấn Ctrl+F sau đó dán ]]></b:skin> vào ô tìm kiếm rồi Enter). Dán đoạn code dưới vào trước (trên) thẻ ]]></b:skin> .
#lower {
border-top: #38761d 2px solid;
margin:auto;
font-family: Georgia;
width: 100%;
padding: 0px 0px 0px 0px;
background:#001b00;
}
#lower a {
color: #DBDBDB;
font-family: Georgia;
}
#lower-wrapper {
margin:auto;
font-family: Georgia;
padding: 20px 0px 20px 0px;
width: 1060px;
}
#lowerbar-wrapper {
background:#001b00;
float: left;
color: #ffffff;
font-family: Georgia;
margin: 0px 5px auto;
padding-bottom: 20px;
width: 24%;
text-align: justify;
font-size:100%;
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;
color:#fff;
text-transform:uppercase;
font: bold 16px Arial, Tahoma, Verdana;
border-bottom:3px solid #666666;
}
Chỉnh sửa một số thông số theo giao diện blog của bạn:
- border-top: #38761d và 2px là màu và kích thước đường viền floote.
- Các background: #001b00 là màu nền footer.
- width: 24% là kích thước cho mỗi cột (nếu 4 cột thì nên để 24% còn nếu footer 3 cột thì nên để sửa thành 32% là vừa.
Bước 3: Tìm thẻ </body> rồi dán đoạn code dưới vào trước thẻ </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>
Chỉnh sửa: Nếu footer 4 cột thì xong, còn footer 3 cột thì bạn xóa đoạn này đi
"<div id='lowerbar-wrapper'>
b:section class='lowerbar' id='lowerbar4' preferred='yes'>
</b:section>
</div>".
Bước 4: Bạn vào Bố cục, kéo chuột xuống dưới cùng sẽ thấy xuất hiện thêm các dòng "Thêm tiện ích", mỗi dòng ở đây chính là một cột footer, bạn kéo các tiện ích cần thiết xuống đây.
Bước 5: Chiêm ngưỡng kết quả.
