Thêm cột cho Blogger Footer

[Info tech] Bạn có muốn add thêm column cho phần Blogger Footer? Nếu bạn đang sử dụng một trong những default template của Blogger, bạn có thể thấy rằng trong phần Footer chỉ có một thanh ngang để thêm Gadget như sau:


Chúng ta có thể thay đổi điều này bằng cách thêm 3 colunm vào phần Footer. Và đặt phần default xuống dưới cùng.

Tiện ích:

► Bạn có thể thêm được nhiều widgets (gadgets)

► Sắp xếp lại theo ý bạn

► Nội dung chính của bạn sẽ load nhanh hơn khi bạn đặt thanh ngang lớn nhất xuống dưới cùng.

Bây giờ hãy bắt tay vào làm nhé, bạn chỉ việc copy và paste. Chỉ mất khoảng 7 phút. Trước khi bắt đầu hãy nhớ backup template của bạn.

1. Nếu bạn đã có một vài widgets (gadgets) trong phần Footer, hãy gỡ bỏ.

LAYOUT ► kiểm tra xem có gadget trong phần footer không ► nếu có, click vào Edit và ► gỡ bỏ

2. Đi tới LAYOUT ► EDIT HTML ► Tìm đoạn code sau:

]]></b:skin>

</head>

..ABOVE it, you'll have to place the following part of the code:

#footer-columns {

border-top:1px dotted #999999;

clear:both;

margin:0 auto;

}

.column1 {

padding: 0px 5px 3px 5px;

width: 30%;

float: left;

margin:3px;

text-align: left;

}

.column2 {

padding: 0px 5px 3px 5px;

width: 31%;

float: left;

margin:3px 3px 3px 5px;

text-align: left;

}

.column3 {

padding: 0px 5px 3px 5px;

width: 30%;

float: right;

margin:3px;

text-align: left;

}

.addwidget {

padding: 0 0 0 0;

}

#footer-columns ul {

list-style:none;

margin:0 0 0;

padding:0 0 0;

}

#footer-columns li {

margin:0;

padding-top:0;

padding-left:0;

padding-bottom:.25em;

padding-right:15px;

text-indent:-15px;

line-height:1.5em;

}

body#layout #footer-columns {

width: 100%;

margin-left: auto;

margin-right: auto;

}

body#layout .column1 {

width: 32%;

float: left;

}

body#layout .column2 {

width: 32%;

float: left;

}

body#layout .column3 {

width: 32%;

float: right;

}

3. Còn bây giờ hãy làm như sau: Trong phần LAYOUT ► EDIT HTML ► tìm tag sau:

<b:section class='footer' id='footer'/>

...bạn sẽ phải XÓA nó đi, và THAY THẾ bằng code:

<div id='footer-columns'>

<div class='column1'>

<b:section class='addwidget' id='col1' preferred='yes' style='float:left;'>

</b:section>

</div>

<div class='column2'>

<b:section class='addwidget' id='col2' preferred='yes' style='float:left;'>

</b:section>

</div>

<div class='column3'>

<b:section class='addwidget' id='col3' preferred='yes' style='float:right;'>

</b:section>

</div>

<div style='clear:both;'/>

</div>

<b:section class='footer' id='footer'/>

...Save template.

Về cơ bản thế là xong. Bạn có thể thay đổi về độ rộng một chút cho phù hợp với template của mình. Chúc các bạn thành công và có một blog đẹp.

Misshaudau