Hướng dẫn tạo thêm cột (sidebar) cho Blog

Tạo thêm cột(sidebar) cho blog như thế nào? là một câu hỏi được đặt ra với rất nhiều "new blogger". Nếu bạn muốn việc tạo thêm cột trở nên dễ dàng tôi khuyên bạn hãy sử dụng template Minima vì đây là template có cấu tạo đơn giản nhất. Trong bài viết này tôi sẽ sử dụng template Minima, các bạn hãy xem hướng dẫn dưới đây và có thể làm tương tự với template của mình.
Dưới đây là hình ảnh bạn có thể thấy trong Page Elements của template Minima:

Tạo thêm cột cho template gồm 2 bước:

1) Đặt tên và quy định các đặc tính vật lý cho sidebar :

Các bạn hãy xem đoạn code dưới đây:

#outer-wrapper {
width: 660px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}
#main-wrapper {
width: 410px;
float: $startSide;
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: $endSide;
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ạn sẽ thực hiện bước 1 trong đoạn code này.

outer-wrapper : Bao gồm header, main, sidebar và footer. Ở đoạn mã trên, ta có thể thấy chiều rộng (width) của outer, main và sidebar lần lượt là: 660px, 410px, 220px. Nếu bạn muốn thêm 1 sidebar nữa bạn cần nới rộng outer . Các đơn vị độ dài ở đây bạn có thể sử dụng là : px và % .
Tôi sẽ cho thay đổi chiều rộng của outer, main và sidebar lần lượt là: 100% , 48% , 23%. Sau đó đặt đoạn code sau đây xuống dưới đoạn code trên:

#newsidebar-wrapper {
width: 23%;
float: $endSide;
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 */
}

Đến đây thôi vẫn chưa xong bước 1.

Nếu bạn muốn đặt các bài viết của bạn ở giữa và 2 sidebar nằm 2 bên bạn cần thay đổi thuộc tính Float của chúng. Tôi sẽ thay đổi thuộc tính Float của main, sidebar và newsidebar lần lượt là: left, right, left. Để thay đổi khoảng cách giữa các sidebar và main bạn cần thêm các thuộc tính Margin và padding. Bạn có thể đọc bài viết Tìm hiểu Margin và Padding" để biết cách sử dụng chúng.

Sau khi đã thêm các thuộc tính đó bạn sẽ có đoạn code như sau:

#outer-wrapper {
width: 100%;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}
#main-wrapper {
width: 48%;
float: left;
margin:0 0 0 20px;
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: 23%px;
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: 23%;
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 */
}

2) Xác định vị trí của sidebar

Bạn hãy tìm đến đoạn code 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òn đây là đoạn code bạn cần chèn vào trong template của mình:

<div id='newsidebar-wrapper'> <b:section class='Newsidebar' id='Newsidebar' preferred='yes'/> </div>

Nếu bạn muốn phần bài viết (main) nằm giữa 2 sidebar bạn phải chèn đoạn code mầu xanh lên trên đoạn code mầu đỏ. Nếu bạn muốn đổi vị trí của newsibar với main tức là newsidebar nằm giữa main và sidebar, bạn chỉ cần đổi lại vị trí 2 đoạn code trên là được.

Sau đó bạn tìm đến 2 đoạn code sau:

#header-wrapper {
width:660px;
margin:0 auto 10px;
}

và :

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

Bạn thay đổi chiều rộng của header và footer từ 660px thành 100% . Save lại và mở Page Elements, bạn sẽ thấy:

Vậy là bạn có thể tự tạo cho mình 1 template 3 cột rồi đó. Nếu bạn muốn template của mình có 4 cột, bạn cũng làm bước 1 nhưng cần chỉnh lại chiều rộng của main, sidebar, newsidebar và ở bước 2 bạn có thể đặt code của sidebar mới lên trên hoặc ngay dưới code của newsidebar cũng được.

Nguồn: www.crazyboy89.blogspot.com

Share on Facebook Share on Twitter Share on Google Plus

About Chinhnd

This is a short description in the author block about the author. You edit it by entering text in the "Biographical Info" field in the user admin panel.