Tùy chỉnh footer trong blogspot

Thời gian gần đây mình hơi bận nên cũng ít viết bài. Ghé thăm blog bạn bè thấy các bạn viết bài sôi nổi quá, có cảm giác mình đang bị "tụt hậu".
Hôm nay xin chia sẻ với các bạn cách tùy chỉnh footer trong Blogspot, cụ thể là tạo thêm một số cột cho phép thêm Widget vào blog của bạn. Nếu bạn sử dụng custom template thì sa số chúng đã có phần chèn widget vào footer.

Bạn có thể tạo bao nhiêu cột tùy ý ở footer tùy vào độ rộng của nó, tuy nhiên theo mình thì bạn chỉ nên tạo từ 3 đến 4 cột. Hiện tại mình tạo 3 cột trên BloggerPlus.net. Code trong bài viết này sẽ hướng dẫn các bạn tạo 3 cột, tuy nhiên sẽ rất dễ dàng cho bạn tùy chỉnh số cột.

Vào phần Edit HTML, xác định độ rộng của Footer. Ví dụ của mình là 993px.
Bạn thêm đoạn code sau vào trước ]]></b:skin>, hoặc ngay dưới phần CSS của Footer cho tiện theo dõi.

#lower-wrapper {
     margin: 0 auto; 
     padding: 0px;
     width: 993px; /*Độ rộng của footer*/
     font-family: Arial;
     font-size: 80%;
     color: #000;
     background: #fff;
     border: 1px solid #ebebeb;
}
#lowerbar1-wrapper {
     float: left;
     margin: 0px;
     padding: 0px 0px 20px 0px;
     width: 50%;
     text-align: left;
     line-height: 1.6em;
}
#lowerbar2-wrapper {
     float: left;
     margin: 0;
     padding: 0px 0px 20px 0px;
     width: 25%;
     text-align: left;
     line-height: 1.6em;
}
.lowerbar {margin: 0; padding: 0;}
.lowerbar .widget {margin: 0; padding: 10px 20px 0px 15px;}
.lowerbar h2 {
     margin: 0px -15px 10px -15px;
     padding: 7px 15px 7px 15px;
     color: #000;
     font-family: Verdana; /*Font cho tiêu đề của Widget*/
     text-align: left;
     text-transform: uppercase;
     background: #fff;
     border-bottom: 1px solid #ebebeb;
}
.lowerbar a {color: #195195; text-decoration: none;}
.lowerbar a:hover {text-decoration: underline; color: #6B6464;}
.lowerbar a:visited {text-decoration: none; color: #197197;}

Đây là những thiết lập áp dụng cho BloggerPlus, tùy theo màu sắc, font chữ, căn lề... trên blog của bạn mà bạn điều chỉnh cho thích hợp.

Lưu ý: Độ rộng của lowerbar1-wrapper và lowerbar2-wrapper bạn có thể qui định một cách tương đối (%) hoặc tuyệt đối (qui định số px cụ thể).
Vậy là đã xong phần CSS.

Tìm tới <!-- end content-wrapper --> và paste đoạn code dưới đây ngay sau nó:

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

Hoặc paste đoạn code trên ngay trước <div id='footer-wrapper'> nếu không tìm thấy <!-- end content-wrapper -->.
Nếu muốn thành 4 cột đều nhau thì bạn có thể tùy chỉnh đoạn code trên một chút, ví dụ:

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

Mấu chốt của vấn đề ở chỗ, tùy thuộc vào phần qui định bạn đã thiết lập trong CSS mà bạn có thể thêm bớt số cột cho phù hợp với độ rộng của Footer bằng cách thêm hay bỏ đoạn code:

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

Chú ý thay đổi số id cho hợp lý.

Sau khi hoàn thành bạn lưu template, sang phần Layout sẽ thấy phần Add Widget cho Footer.

Nếu bạn có nhìn thấy nó có dạng này thì cũng không sao, cứ Add widget bình thường nhé, Preview là sẽ thấy ngay.

Chúc các bạn thành công.