Hướng dẫn tạo footer 3 cột hoặc 4 cột cuối trang cho blogspot

Hôm nay mình sẽ hướng dẫn các bạn tạo tạo footer 3 cột, 4 cột cho blogspot làm cho blog của bạn trông chuyên nghiệp hơn. Tức là sẽ tạo footer nằm ở cuối trang blog và bạo sẽ kéo một số tiện ích như thống kê lượt truy cập, ngôn ngữ, liên hệ,..vào đó, làm cho blog của bạn nhìn gọn gàng và chuyên nghiệp hơn, ngoài ra nó còn giúp cho blog của bạn chạy nhanh hơn.

Minh họa

Để 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ả.

Ôi Hot chúc các bạn thành công!