Thêm một cột cho blog

Bạn có nhận ra cái gì khác thường trên blog của tôi không?

Hãy quan sát kỹ nhé! Tôi sẽ cho bạn biết:

- Một giao diện với ba cột.
- Một header đã thay đổi có rộng lớn hơn mặc định.
- Thanh navbar trên đỉnh đầu không có.
- Cái Icon của Blogger không có trước địa chỉ của tôi mà thay vào đó là cái của tôi.
- ...

Tôi đã là điều đó như thế nào? Ở bài này tôi sẽ hướng dẫn cho bạn chèn thêm một cột cho blog.

(Xem hình kích cở đầy đủ)
Hình. Giao diện Add and Arrange A Page Element của http://thuthuatchoblogger.blogspot.com

Sau khi đăng nhập, hãy vào Template->Edit HTML. Bây giờ công việc của chúng ta là thêm một cột cho blog. Template mà tôi sử dụng trong cho http://thuthuatchoblogger.blogspot.com là Minima. Bạn có thể chọn giao diện này để thêm. Tùy theo template, mỗi template sẽ có phần này khác nhau. Xin lưu ý là trước khi thay đổi, bạn nhớ copy lại Template mà mình hiện có đề phòng chúng ta làm sai mà sửa chữa kịp thời.
Chúng ta đang ở Edit Template. Bây giờ chúng ta kéo thanh trược ở khung bảng mã HTML xuống. Bạn tìm cho tôi một đoạn mã như sau:

#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 */
}

#out-wrapper: Phần giữa của toàn màn hình bao gồm các phần dưới.
#main-wrapper: Phần chính, nơi các bài đăng của bạn sẽ nằm ở đây
#sidebar-wrapper: Cột bên phải theo mặt định của template này.

Bây giờ chúng ta copy hết phần #side-wrapper và paste bên dưới nó như và sửa lại như sau (thay đổi màu đỏ)

#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 */
}

#newsidebar-wrapper {
width: 220px;
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 */
}

Bây giờ thì bạn đã có thêm một cột bên trái. Đừng vội lưu lại mà hãy làm tiếp. Chúng ta thấy #out-wrapper có phần rộng 660px (pixel). Một màn hình 15’ thông thường hiển thị ngang và dọc: 800 x 600, vậy chúng ta sẽ thiết lập cho #outer-wrapper một giá trị chiều ngang bé hơn 800. Bạn có thể thiết lập rộng hơn tùy thích.

Tôi sẽ thay đổi độ rộng của trang ở giá trị width: 660px->750px. Tôi sẽ thiết lập lại độ rộng của #main-wrapper là 400px, của các cột hai bên #sidebar-wrapper và #newside-wrapper lần lượt là 150px. Tuy nhiên bên trái cột bên trái mà tôi tạo ra sẽ dính nhau với cột giữa, do đó tôi thêm lề trái margin-left: 20px; vào #main-wrapper. Cuối cùng tôi sẽ được một đoạn mã tương ứng như bên dưới. (Màu đỏ chỉ các thay đổi cho phần này)

#outer-wrapper {
width: 750px;
margin:0 auto;
padding:10px;
text-align:left;
font: $bodyfont;
}

#main-wrapper {
width: 400px;
  margin-left: 20px;
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: 150px;
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*/
}

#newsidebar-wrapper {
width: 150px;
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 */

}

Bây giờ tôi sẽ thêm một Profile để xuất hiện một bên trái như cột bên phải với Add a Page Element.

Tiếp tục hãy kéo thanh trược xuống dưới nữa và tìm đoạn mã sau:

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

Công việc của bạn là chép đoạn mã này dán lên phía trước đoạn mã đó, nhớ là phía trước nhé!

<div id='newsidebar-wrapper'>
<b:section class='sidebar' id='newsidebar' preferred='yes'>
<b:widget id='NewProfile' locked='false' title='About Me' type='Profile'/>
</b:section>
</div>

Xong rồi thì bạn lưu lại. Nào hãy thử kiểm tra sự khác biệt nhé. Tuy nhiên vẫn chưa hết, cái header và footer của bạn vẫn còn bé xíu như vậy. Thế thì chúng ta thay đổi kích cở chúng đi.

Vào lại Edit HTML, bạn tìm đoạn mã như sau:

*/

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

Bạn sửa số 660 thành 750 là xong. Tương tự như vậy hãy kéo xuống phía dưới nữa tìm đoạn mã bên dưới và sửa lại con số vừa kể.

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

Nào, chúng ta đã có một mẫu với ba cột. Thật tuyệt phải không. Hãy đón đọc các bài khác nhé!

Bạn có thể download template này tại đây. Tôi cũng lưu ý là tất cả những widget mà bạn làm trước đó sẽ không còn nữa. Để sử dụng bạn giải nén file download về, vào Template ->Edit HTML, tìm đến file giải nén ở Backup and Restore và Upload để kết thúc.