Chủ Nhật, 1 tháng 3, 2009

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:

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

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 3CODE 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.

4 Comments:

Gain Capital said...

Chào bạn,
Về hướng dẫn cách chèn thêm cột vào Template, mình đã thực thiện theo chỉ dẫn nhưng không thành công.
Blog của mình: http://patternstrader.blogspot.com/
Bạn có thể giúp mình chèn thêm một cột bên phải không ? Bằng cách nới rộng chiều ngang của Page để chèn thêm một cột bên phải cân đối với cột bên trái.
Mình xin cảm ơn và hậu tạ !
Chi phí thế nào bạn cho mình biết nhé.

VnTim™ said...

Ko cần phí đâu
Nếu ko tự làm dc thì cứ gửi code Theme của bạn vào mail của mình admin@vntim.co.cc mình làm cho rồi quửi qua cho bạn

Hà Ngọc Tú said...

mình đã làm được nhưng mà khoảng cách giữa Main và Side Bar bên trái nó bị rộng quá, có cách nào làm cho nó thu hẹp lại ko ? mời xem link hình dưới
http://i978.photobucket.com/albums/ae266/hangotu/untitled.jpg

John Nguyen said...

bạn xem dùm mình chia không được
http://mylove-tn.blogspot.com/

Đăng nhận xét

» VnTim™ cảm ơn bạn đã đọc bài viết.
» Nếu có thắc mắc hay góp ý, bạn hãy để lại một nhận xét.
» Nếu thấy bài viết hay hãy chia sẻ với những người quanh bạn.
» Bạn có thể sử dụng một số thẻ HTML như <b>, <i>,<a>.
» Vui lòng đăng những nhận xét lịch sự và gõ tiếng Việt có dấu nếu có thể.
» Rất cảm ơn những comment thiện ý.

 

VnTim™ Trái Tim Việt Nam Copyright © 2010 VnTim™ Trái Tim Việt Nam