Tạo template 3 cột cho blogspot.

1. Lý thuyết:
Các template của blogger sử dụng tag

để "định nghĩa" và định vị các wrapper (gói). Phần header (đầu) nằm trong header-wrapper. Phần sidebar nằm trong sidebar-wrapper. Phần main (chứa bài viết) nằm trong main-wrapper. Phần footer (chân) nằm trong footer-wrapper. Main-wrapper và Sidebar-wrapper nằm trong Content-wrapper. Header, Content, Footer Warapper nằm trong Outer-wrapper.

Có thể hình dung cách bố trí như vậy theo sơ đồ sau:......

2. Thực hành

Bây giờ chúng ta thực hành tạo thêm cột bên trái (leftsidebar) cho blog của mình. (bài này hướng dẫn với mẫu Minima, các mẫu khác cũng làm tương tự).

Vào Edit Template, có 2 chỗ cần chỉnh sửa, đó là CSS và BODY.

- Edit CSS:

Tìm đến đoạn code có dạng như sau:

CODE 1:

/* Outer-Wrapper
----------------------------------------------- */
#outer-wrapper {
width: 660px;
margin:0 auto;
padding:10px;
text-align:left;
font: $bodyfont;
}

#main-wrapper {
width: 410px;
float: left;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

#sidebar-wrapper {
width: 220px;
float: right;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

#outer-wrapper: Bạn hãy để ý các chữ màu đỏ, 660 đó là độ rộng mặc định của toàn bộ blog của bạn. Bạn hãy thay đổi con số này lớn hơn một tí để khi thêm sidebar bên trái vào blog của bạn nhìn không hẹp phần giữa. Ví dụ tôi thay 660 bằng 970.

#main-wrapper: Độ rộng thể hiện bài viết là 410. Bạn có thể thay bằng một số lớn hơn, nên chọn 500 hoặc 550. Tôi thay bằng 550

#sidebar-wrapper: hiện tại chúng ta chỉ có 1 sidebar, độ rộng là 220. Hãy chú ý dòng float: right; , dòng này cho biết sidebar sẽ hiển thị bên phải.

Như vậy, để thêm một sidebar bên trái nữa, ta chỉ cần copy đoạn code của #sidebar-wrapper và chỉnh chữ "right" thành "left". Nhưng bạn phải hiệu chỉnh bề rộng của các sidebar (các dòng width: 220px; ), sao cho tổng bề rộng của 2 sidebar-wrapper và main-wrapper nhỏ hơn outer-wrapper. (Ví dụ bài này là 550+ 200 + 200 =950 )

/* Outer-Wrapper
----------------------------------------------- */
#outer-wrapper {
width: 970px;
margin:0 auto;
padding:10px;
text-align:left;
font: $bodyfont;
}

#main-wrapper {
width: 550px;
float: left;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

#sidebar-wrapper {
width: 200px;
float: right;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

#leftsidebar-wrapper {
width: 200px;
float: left;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

Tiếp theo, tìm trong CSS đoạn code như sau:

CODE 3:

#header-wrapper {
width:660px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}

CODE 4:

#footer {
width:660px;
clear:both;
margin:0 auto;
padding-top:15px;
line-height: 1.6em;
text-transform:uppercase;
letter-spacing:.1em;
text-align: center;
}

Hãy thay các số 660 (độ rộng của #header-wrapper và #footer) bằng với độ rộng của #outer-wrapper mà lúc nãy bạn đã thay. Ví dụ của tôi là 970.

Như vậy đoạn CODE 3 và CODE 4 sẽ trở thành:

CODE 5:

#header-wrapper {
width:970px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}

CODE 6:

#footer {
width:970px;
clear:both;
margin:0 auto;
padding-top:15px;
line-height: 1.6em;
text-transform:uppercase;
letter-spacing:.1em;
text-align: center;
}

- Edit BODY: Lưu ý là không đánh dấu chọn Mở rộng mẫu tiện ích với thao tác này.

Tìm sau thẻ đoạn code "tương tự" như sau:

CODE 7:

Copy toàn bộ đoạn CODE 8 này vào "ngay phía trên" đoạn CODE 7 vừa tìm được. Sở dĩ phải "ngay phía trên" là vì leftsidebar sẽ hiển thị bên trái của main-wrapper.

CODE 8:

Như vậy phần EDIT BODY nhận được là:

CODE 9:

Xong rồi, bây giờ bạn Save Template lại, vào Thêm phần tử trang để thêm các Widget bình thường.
*** Bằng cách tương tự, bạn có thể tạo thêm 1,2 sidebar nữa tùy thích miễn sao cho phù hợp là được rồi !!!

chúc bạn thành công

Nguồn: vietwebguide.com

Người theo dõi

Tạo template 3 cột cho blogspot.