Loading post navigation ...
 
 

Pro page

16
Nhận xét

Chia Post footer thành nhiều cột

| by Phan Dũng | views

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


[FD's BlOg] - Tương tự bài viết trước (chia footer thành nhiều cột), bài viết này cũng áp dụng thủ thuật tương tự để chia Post Footer (bên dưới bài viết) thành nhiều cột.



Xem hình minh họa thủ thuật:


Còn đây là kết quả hiện thị ngòai blog


Bắt đầu:
1. Đăng nhập blog
2. Vào Bố cục(layout)
3. Vào chỉnh sửa code HTML (edit code HTML)
4. Chọn "mở rộng mẫu tiện ích" (expand widget template)
5. Chèn đọan code màu đỏ vào như bên dưới:

<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Bài đăng trên Blog' type='Blog'/>

...
...
...

</b:section>

<div id='main-footer-content'>
<div id='main2' style='width: 240px; float: left; margin:0; text-align: left;'>
<b:section class='main-footer-column' id='main-col1' preferred='yes' style='float:left;'/>
</div>
<div id='main3' style='width: 240px; float: left; margin:0; text-align: left;'>
<b:section class='main-footer-column' id='main-col2' preferred='yes' style='float:left;'/>
</div>
<div style='clear:both;'/>
</div>

</div>

<div id='footer-wrapper'>
<b:section class='footer' id='footer'>

...
...
...

</b:section>
</div>

- Chú ý : bạn hãy điều chỉnh code màu xanh (là độ rộng của các cột) theo đúng kích thước của main post, ví dụ main post của bạn rộng 600px, thì mỗi cột sẽ là 300px, có thể nhỏ hơn (do có thể main post của bạn được căn lề). Và nếu bạn muốn chia thành 3 cột thì thêm một đọa code như bên dưới trước dòng <div style='clear:both;'/> , và chiều rộng mỗi cột bạn đổi lại là 200px.

<div id='main4' style='width: 240px; float: left; margin:0; text-align: left;'>
<b:section class='main-footer-column' id='main-col3' preferred='yes' style='float:left;'/>
</div>


- Về chiều rộng của các cột bạn không nhất thiết phải chỉnh bằng nhau, tùy theo thiết kế của bạn, bạn có thể tùy chỉnh chúng khác nhau, và phải đảm bảo là tổng chiều rộng phải nhỏ hơn độ rộng của main post.
- Ngòai ra để tạo giao diện các cột, bạn có thể thêm các đoạn code CSS cho nó.

6. Save template.

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


Enter your mail address:

16

Le Thuan

hihi...test phát thành công luôn...

Le Thuan

cái thủ thuật này càng ngày em càng thấy nó hay đấy anh dũng à...đêm qua nhờ cái này em đã test và ko chỉ chia side bar mà cả header hay bất cứ cái gì cũng được..hehe

fandung

uh, đúng rồi.

EM cũng khá rành rồi đó, đã biết áp dụng để chia các section khác của blog.

Tốt, cứ vậy mấy bữa nữa là thành pro ngay thôi, khỏi cần anh chỉ nữa :D

Khách (ẩn danh)

Hix, chỉ mình cách làm cho header đi bạn!

fandung

Bạn muốn chia Header thì cứ thêm dòng code màu đỏ vào sau dòng code này <div id='header'>

fandung

hoặc trước dòng này cũng được : <b:section class='header' id='header' showaddelement='no'>

PC Blog

hjc, cai nay chua bit

Viet-offer.com

Bạn giúp mình cái được ko,mình chia như của bạn vậy,nhưng nó lạ đẩy cột về bên trái,ko ở giữa như của bạn,mặc dù chia đều cột cho hàm main.

Phan Dũng

Nó bị đẩy là do chiều dài của phần main dài hơn các cột sidebar, bạn thử chỉnh lại căn phải xem (nếu cột sidebar của bạn nằm ở bên trái).

Mr_Lam

Mình muốn chèn thêm post footer 1 cột dưới cái post footer 2 cột đã tạo thì làm sao nhỉ? Help mình với!

Phan Dũng

@Mr_Lam : bạn thêm code bên dưới vào sau đoạn code màu đỏ của thủ thuật trên là được. Lưu ý : độ rộng của footer 1 cột này phải bằng gấp đôi độ rộng của các footer 2 cột. (như thế để trông bố cục hợp lý hơn)

CODE :
<div id='main-footer-content2'>
<div id='main-footer1' style='width: 480px; float: left; margin:0; text-align: left;'>
<b:section class='main-footer-column2' id='footer2-col1' preferred='yes' style='float:left;'/>
</div>
<div style='clear:both;'/>
</div>

kaka12186

các bài của bạn thật là bổ ích nó giúp mình rất nhiều cám ơn bạn.Đây đúng là blog kiến thức chuyên đề cần thiế cho mọi người.Bạn cho mình hỏi thêm là nếu mình muốn làm một blog về ảnh thì có cách nào chia bài post thành nhiều cột để hiển thị ảnh nhiều hơn không ví dụ như chia 3 hay 4 côt bài đăng được không bạn.Cảm ơn bạn nhiều lắm

Phan Dũng

@kaka12186 : ở đây mình có bài hướng dẫn hiển thị bài viết dạng gallery, thích hợp cho blog post ảnh của bạn, bạn có thể tham khảo ở đây :

http://www.fandung.com/2009/06/thu-thuat-yeu-cau-tao-widget-recent.html

vnblogger.com

Chào nhé, bài này rất hay, nhưng bạn có biết cách nào làm cái giao diện như của anh Tran Tinh ở eBlogviet không ?

Nguyễn Thị Lan

Mình cũng đã thử chia footer làm thành 3 cột theo như hướng dẫn trên. Tuy nhiên, khi nhìn trên bố cục thì Ok, nhưng khi "thêm tiện ích" của bất cứ hàng nào, đồng thời dán HTML/Javascript vào thì đều hiển thị nằm sát góc trái? Nhờ bạn chỉ giùm cách nào căn chỉnh lại. Cám ơn nhiều.

Nguyễn Thị Lan

Úh, xin lỗi bạn. Mình nhầm là bất cứ cột nào của footer chứ không phải hàng nào...



☺ 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