Cách tạo template 3 cột cho blogspot

Tất cả các template mẫu của blogger.com tính đến hiện tại (10/2007) đều mặc định chỉ có 2 cột: một sidebar(cột biên) bên phải và một main hiện các bài viết. Đối với các mẫu template này, nhiều bạn cảm thấy bất tiện và ngay chính tôi cũng không thích gì nó lắm, khi blog của bạn có nhiều Widget thì việc bố trí widgets chỉ trên một sidebar bên phải sẽ làm cho ta có cảm giác "nặng nề" mất cân đối, vì thế blog sẽ không đẹp. Bài này sẽ hướng dẫn các bạn thêm một sidebar bên trái, và hơn thế nữa, đọc xong bài này bạn có thể tự tạo cho mình thêm hai cột, ba cột... bên trái hay bên phải tùy thích.

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:

Code:

/* 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 <>CODE 1 sau khi copy và chỉnh sửa:

CODE 2:

Code:

/* 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:

Code:

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

CODE 4:

Code:

#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:

Code:

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

CODE 6:

Code:

#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 Expand Widget Templates với thao tác này.

Tìm sau thẻ <body> đoạn code "tương tự" như sau:
CODE 7:

Code:

<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>
</div>

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:

Code:

<div id='leftsidebar-wrapper'>
<b:section id='leftsidebar' class='sidebar' preferred='yes'/>
</div>

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

Code:

<div id='leftsidebar-wrapper'>
<b:section id='leftsidebar' class='sidebar' preferred='yes'/>
</div>

<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>
</div>

Xong rồi, bây giờ bạn Save Template lại, vào Page Elements để thêm các Widget bình thường.