Trang Chủ   Vn+ TiVi   Fanpage Twitter  Fanpage FaceBook
Loading
                                         

Bản Tin Câu Lạc Bộ Pa Tin Im-Pod                                                                          
Diễn đàn Vn+
Tiêu Điểm

Tình Yêu - Giới Tính

1001 Bí Ẩn

Tổng hợp phần mềm

Ebook

Thủ Thuật IT

Thủ Thuật Blog

Video Clip

Lạ & Fun


You are not connected. Please login or register

Xem chủ đề cũ hơn Xem chủ đề mới hơn Go down  Thông điệp [Trang 1 trong tổng số 1 trang]

1 Thêm một cột cho blog on Sat Oct 01, 2011 9:24 pm

Trunks-Kun


Administrator
Administrator
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ó.



Hình. Giao diện Add and Arrange A Page Element của [You must be registered and logged in to see this link.]

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 [You must be registered and logged in to see this link.] 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:


Code:
#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 đỏ)

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

[color=red]#newsidebar-wrapper {[/color]

width: 220px;
float:[color=red]left;[/color]

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)

Code:
#outer-wrapper {
width:[color=red]750[/color]px;
margin:0 auto;
padding:10px;
text-align:left;
font: $bodyfont;
}

#main-wrapper {
width: 400px;
[color=red]margin-left: 20px;[/color]

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: [color=red]150[/color]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: [color=red]150[/color]px;
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:

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>

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

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

Code:
*/

#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ể.

Code:
/* 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 [You must be registered and logged in to see this link.]

thuthuatblog

Xem lý lịch thành viên

Xem chủ đề cũ hơn Xem chủ đề mới hơn Về Đầu Trang  Thông điệp [Trang 1 trong tổng số 1 trang]

Permissions in this forum:
Bạn không có quyền trả lời bài viết

 

Legend :  [ Vn-plus Founder ] [ Administrator ] [ Super Moderator ] [ Moderator ] [ Member ] [ VIP member ] [ banned ]



Free Auto Backlink Exchange ServiceFree Backlink Exchange For SeoVietnam BacklinksTravel BacklinksFree BacklinksText Backlink ExchangesText Back Link ExchangeFlorists LinksOverShopping Link ExchangeFree Automatic LinkWeb Link Exchange - Linkcsere

    Diễn Đàn Vn-Plus.Org | Thống kê | Liên hệ | Báo cáo lạm dụng  | Bạn muốn quảng cáo | Lên Đầu Trang

    Powered by: PHPBB2. Copyright © 2011  Diễn Đàn Mở VN+
    Contact: Vn-plus Founder . Yahoo: Nobita_xuka_ccy. Địa chỉ: Từ Tây - Yên Phú - Yên Mỹ - Hưng Yên
    BQT không chịu trách nhiệm bất cứ nội dung nào của thành viên đăng tải

Liên Kết Vớivn+

Free forum | © PunBB | Free forum support | Report an abuse | www.sosblogs.com