Loading post navigation ...
 
 

Pro page

16
Nhận xét

[ Yêu cầu ] : Tùy chỉnh vị trí các cột trong template 3 cột

| by Phan Dũng | views

Hãy nhấn thanks để ủng hộ tác giả

Theo yêu cầu của bạn MAX
[FD's BlOg] - Thủ thuật mình sẽ hướng dẫn các bạn thay đổi vị trí của các cột trong template 3 cột. Như ở template 2 cột, việc này khá đơn giản, ta chỉ cần gán thuộc tính float cho các cột là left hoặc right thì có thể thay đổi vị trí của nó. Còn ở template 3 cột, ta cũng dùng cách đó nhưng phức tạp hơn 1 chút.

Và do đây là thủ thuật yêu cầu nên mình sẽ hướng dẫn theo code template của yêu cầu. Và sẽ rút ra các tổng quát cho các template 3 cột khác.
Cụ thể trong thủ thuật này mình sẽ nói đến template FalknerPress (Design by CamelGrap)

Hình ảnh minh họa:

Bố cục gốc


Bố cục thay đổi theo yêu cầu


☼ Bây giờ ta bắt đầu thủ thuật:
- Do trong code của template mẫu này, các thuộc tính float của các cột đã phù hợp nên mình sẽ bỏ qua bước chỉnh sửa thuộc tính float, phần này sẽ nói ở bên dưới.

1. Vào bố cục
2. Vào chỉnh sửa code HTML
3. Tìm đến đoạn code HTML của left-sidebar , và trong code template của mẫu trên thì nó là code bên dưới:

<div id='left-sidebar'>

<b:section class='categorie' id='left-sidebarr' preferred='yes' showaddelement='yes'>
<b:widget id='HTML5' locked='false' title='Twitter' type='HTML'/>
<b:widget id='TextList1' locked='false' title='Books' type='TextList'/>
<b:widget id='Label1' locked='false' title='Categories' type='Label'/>
<b:widget id='HTML8' locked='false' title='' type='HTML'/>
<b:widget id='Text1' locked='false' title='Sample Text' type='Text'/>
</b:section>
</div>

4. Sau khi tìm được đoạn code trên, ta hãy di chuyển nó vào vị trí như bên dưới :

<div id='container'>

{chèn đoạn code ở bước 3 vào vị trí này}

<div id='content'>
<!--INITIALIZE SMOOTH GALLERY-->

- và nó sẽ trông như thế này :

<div id='container'>

<div id='left-sidebar'>

<b:section class='categorie' id='left-sidebarr' preferred='yes' showaddelement='yes'>
<b:widget id='HTML5' locked='false' title='Twitter' type='HTML'/>
<b:widget id='TextList1' locked='false' title='Books' type='TextList'/>
<b:widget id='Label1' locked='false' title='Categories' type='Label'/>
<b:widget id='HTML8' locked='false' title='' type='HTML'/>
<b:widget id='Text1' locked='false' title='Sample Text' type='Text'/>
</b:section>
</div>

<div id='content'>
<!--INITIALIZE SMOOTH GALLERY-->

5. Save template.

☼ Hướng dẫn tổng quát :
- Giả sử 1 template 3 cột có layout như hình bên dưới:

- Và code CSS của nó như sau:

#main {
float:left;
...
...
...
}
#sidebar1 {
float:left;
...
...
...
}
#sidebar2 {
float:left;
...
...
...
}

- Và bố cục của nó trong code template như bên dưới :

<div id='main'>
<b:section class='main' id='main' preferred='yes'>
...
...
...
</b:section>
</div>

<div id='sidebar1'>
<b:section class='sidebar1' id='sidebar1' preferred='yes'>
...
...
...
</b:section>
</div>

<div id='sidebar2'>
<b:section class='sidebar2' id='sidebar2' preferred='yes'>
...
...
...
</b:section>
</div>

- Với bố cục trong code template và các thuộc tính trong code CSS như trên thì vị trí các cột lần lượt là main, sidebar1, sidebar2 . Nếu các bạn chỉ chỉnh sửa code CSS (chỉnh sửa thuộc tính float) thì ta chỉ được 2 bố cục duy nhất từ 3 cột này, đó là 2 cột sidebar nằm bên trái hoặc phải. Mà không thể cho cột bài viết nằm vào giữa 2 cột sidebar. Muốn làm được như vậy các bạn phải thay đổi vị trí code của các cột trong code template.

- Như ở đoạn code trên, nếu muốn di chuyển cột sidebar vào giữa thì bạn di chuyển cho đoạn code của cột main nằm giữa 2 đoạn code của 2 cột sidebar (như bên dưới)

<div id='sidebar1'>
<b:section class='sidebar1' id='sidebar1' preferred='yes'>
...
...
...
</b:section>
</div>

<div id='main'>
<b:section class='main' id='main' preferred='yes'>
...
...
...
</b:section>
</div>

<div id='sidebar2'>
<b:section class='sidebar2' id='sidebar2' preferred='yes'>
...
...
...
</b:section>
</div>

- Ngoài ra muốn đảo vị trí các cột sidebar cho nhau thì các bạn cũng thực hiện tương tự.

Chúc các bạn thành công.


Enter your mail address:

16

^^

tem tem tem !
Em muốn vẫn giữ nguyên như bản gốc

nhưng thay vào đó làm to phần hiển thị bài mới và thu gọn thanh ở giữa bù trừ vào thì phải làm thế nào ? cột 3 giữ nguyên ?

:)

Khách (ẩn danh)

cám ơn bạn rất nhiều FD à . mình tham gia blog của cậu lâu rồi và thật sự mỗi bài post của bạn thật sự có ích đối với blogger. chúc bạn vui vẻ :X.

fandung

dạo này có nhiều thủ thuật quá chưa đáp ứng kịp (ko có thời gian để test)

@mecuoi : cái này đơn giản em à, em vào trong code CSS, tìm đến class của các cột, rồi tìm đến thuộc tính width, em hãy thay đổi nó.

Như em nói, nếu muốn cột hiển thị bài viết to ra và cột ở giữa nhỏ lại thì thì ta chỉ việc tăng và giảm độ rộng của cột thôi.

Ví dụ cột bài viết rộng 500px, cột giữa rộng 200px, giờ nếu em muốn tăng 100px cho cột bài viết thì sửa độ rộng 600px, và sửa luôn độ rộng của cột giữa lại là 100px.

Thành Công

Mấy cách này đúng là hay quá nhưng với template của tui bi giờ thì hết thuốc chữa, khỏi nghĩ đến chuyện tùy chỉnh nữa hix

Nguyễn Đạt Tài

fandung mới ra đời nhưng viết nhiều bào chất lượng quá.

Phan Dũng

@aBlogz : cám ơn bạn

Bình Dương

Mình muốn hỏi làm thế nào để tăng độ rộng cột Main lên?? Blog của mình chỉ có 2 cột thôi. Cảm ơn bạn trước

fandung

@Bình Dương : muốn tăng độ rộng của phần Main trước hết bạn phải tăng độ rộng của phần bố cục chính (tức là độ rộng của cả blog). Thông thường đối với các template của blogger cung cấp, đoạn code CSS của phần này sẽ là:

#outer-wrapper {
width:700px;
...
...
...
}

và code CSS của phần Main sẽ là :

#main {
...
width:500px;
...
...
...
}

Ví dụ bạn muốn tăng phần Main lên 200px thì bạn phải thay đổi độ rộng của cả 2 đoạn code CSS này, ví dụ như bên dưới:

#outer-wrapper {
width:900px;
...
...
...
}
#main {
...
width:700px;
...
...
...
}

Bình Dương

hic... nhưng mình tìm cả trong phần mở rộng cũng không thấy có dòng
#outer-wrapper {
width:700px;
....
....

Như bạn nói cả :-/
Blog mình muốn tạo dạng như sau:
http://img7.imageshack.us/img7/4370/blogtheme.jpg
Bạn xem giúp mình với nhé. Cảm ơn bạn rất nhiều. ;;)

Parrot Little

Trước hết cảm ơn anh về bài viết. Sau anh cho em hỏi với trường hợp của em như thế này. Em down về một template "Community". Link đây ạ: http://btemplates.com/download/1149/ . Tuy nhiên khi em chỉnh sửa nó như anh hướng dẫn thì cái slidebar của em ở bên phải nó lại xuống dưới. Cụ thể như thế này: http://i29.tinypic.com/jal8g3.jpg . Anh có thể giúp em được ko ạ?

hoangtumattroi

hix chan chet

Unknown

Tôi muốn tìm cái "Template FalknerPress (Design by CamelGrap)" như bạn nói thì có thể tìm ở đâu? Bạn chỉ cách để cho mình thiết kế theo mẫu bài viết trên.Càm ơn bạn.

hieuvathuong

mình làm không được anh Dung ui ! hix

hieuvathuong

khung comments trang nhà mình nó bị mất, không copy bài viết được, không xem video được. nhờ bạn giúp mình với.
blog: hieuvathuongdalat.blogspot.com
Email: hieuvathuongdalat@gmail.com
Nhờ bạn giúp mình với nhé ! cảm ơn bạn nhiều

Unknown
Unknown

chào bạn, mình muốn di chuyển tùy ý các layout, nghĩa là nhấp chuột giữ và di chuyển đi 1 vị trí khác thì phải làm thế nào, mình có tải 1 them về nhưng các layout đè lên nhau khiến mình không thể chỉnh được.
và trong blog của mình có tới 2 cái mainbody riêng biệt, mình không thể xóa bớt được 1 cái, bạn giúp mình giải quyết vấn đề này nhé, cảm ơn bạn rất nhiều.
mail của mình: ksduongtri@gmail.com



☺ Các bạn có thể viết lời bình của mình cho bài viết, và tuân thủ một số quy tắc sau:
» Các bài comment phải nghiêm túc, không dung tục, không spam.
» Nội dung phải liên quan tới chủ đề bài viết.
» Có thể sử dụng thẻ trích dẫn [quote], cấu trúc thẻ như bên dưới :

[quote=AUTHOR name=fdquote]NỘI DUNG[/quote]

» Có thể sử dụng các thẻ <b>,<i>,<a>.


BlOg FD chính thức đóng comment của khách ẩn danh.

BlOg FD.

[▼/▲] More Emoticons
:)) ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* :| 8-} :)] ~x( :-t b-( :-L x( =))

Newer Posts Older Posts Home