Nguyễn Công Trứ
Thông Báo

Forum này sắp bị đóng cửa.
Để truy cập lại forum của trường,
các bạn vui lòng vào địa chỉ sau:
http://hoichemgio.oni.cc


Nguyễn Công Trứ - Kon Tum - 21 Bắc Kạn
 
Trang ChínhPortalCalendarGalleryTrợ giúpTìm kiếmThành viênNhómĐăng kýĐăng Nhập

Share|

Cách chia Module Blog ra làm nhiều cột

Xem chủ đề cũ hơn Xem chủ đề mới hơn Go down
Tác giảThông điệp
Administrator
Admin
avatar


Tổng số bài gửi : 121
Danh tiếng : 0
Ngày Tham Gia : 01/02/2011
Tuổi : 20
Đến từ : Việt NAm

Xem lý lịch thành viên http://nguyencongtrukt.forumvi.com

Bài gửiTiêu đề: Cách chia Module Blog ra làm nhiều cột Tue Apr 12, 2011 10:37 am



Hum nai quên mất ko đi thi, tí thì tèo mất, 2 lần rồi >"<
may có đứa bạn nó alo đến gọi đi thi
hì..
vừa thi về xong, check mail thấy có bạn hỏi
cách chia Cái module ra làm 2 3 hay nhiều cột như thía nào.
Như hình minh họa bên trên
hì ^^!
cái nài thì cơ bản là dễ ^^!
nhưng phải bít chút ít HTML ^^!
hì...

Cũng ko cóa gì đâu
Cái nài các bạn cũng chẳng cần hỉu lắm ^^!,
mình sẽ đưa code để các bạn xài ^^!.

Đầu tiên là phải tạo 1 module đã ( cái nài đừng nói ko bik nha ^^!, trong mục Yahoo Plus + Hướng dẫn có rồi đấy )

Tiếp theo, các bạn cho cái Module nó nằm ra vị trí ở giữa trang, thía cho nó to còn chia đc nhìu, ko thì cho lên top hoặc dưới bottom cũng đc

Đây là code chia cái module ra làm 2 cột:

<table border="1" width="100%">
<tbody>
<tr>
<td width="50%">Nội dung cột 1</td>
<td width="50%">Nội dung cột 2</td>
</tr>
</tbody>
</table>


VD:
Nội dung cột 1 Nội dung cột 2

Cái này cơ bản thì nó có viền ở xung quanh, nếu mún xóa viền đi, các bạn sửa cái border=0 là đc.
Để chèn nội dung vào các bạn chèn tương tự như sau:

<table border="1" width="100%">
<tbody>
<tr>
<td width="50%">
<img src="http://img195.imageshack.us/img195/5910/iuchiplove.gif" /><a href="http://linkbaiviet1.com">Tiêu đề bài viết 1</a><br />
<img src="http://img195.imageshack.us/img195/5910/iuchiplove.gif" /><a href="http://linkbaiviet1.com">Tiêu đề bài viết 2</a><br /></td>
<td width="50%">
<img src="http://img195.imageshack.us/img195/5910/iuchiplove.gif" /><a href="http://linkbaiviet1.com">Tiêu đề bài viết 1</a><br />
<img src="http://img195.imageshack.us/img195/5910/iuchiplove.gif" /><a href="http://linkbaiviet1.com">Tiêu đề bài viết 2</a><br /></td>
</tr>
</tbody>
</table>

Ví dụ:
Tiêu đề bài viết 1
Tiêu đề bài viết 2
Tiêu đề bài viết 1
Tiêu đề bài viết 2
Các bạn để ý, đoạn

<img src="http://img195.imageshack.us/img195/5910/iuchiplove.gif" />

là hình ngôi sao ở trước các tiêu đề, các bạn mún thay = cái gì cũng đc.
Còn đoạn này
<a href="http://linkbaiviet1.com">Tiêu đề bài viết 1</a>

là để liên kết tới bài viết của bạn
Các bạn có thể thay sao cho phù hợp
Còn cái
<br />

là để xuống dòng.
Mình viết cái nài theo cách cực đơn giản để các bạn dễ hỉu + dễ làm
Còn nếu mún pro hơn thì kết hợp ít CSS nữa thì sẽ đẹp + gọn hơn


Có 1 cái nữa là, nếu dùng code cơ bản như này, thì khi nội dung cột 1 dài hơn cột 2 hoặc ngược lại thì cái cột có nội dung ngắn hơn
sẽ bị hiển thị tụt xuống ( ra giữa cột)
Nếu muốn lúc nào vị trí của các bài viết cũng ở trên top của cột
thì các bạn thêm cái đoạn mình to đậm như bên dưới này vào:
<td width="50%" valign="top">Nội dung cột 1</td>

Vậy sau khi thêm sẽ đc cái này
Nội dung cột 1







Nội dung cột 2





Trên này code để chia module thành 2 cột.
Vậy nếu muốn chia thêm cột thì sao ?
VD là 3 cột
các bạn chỉ cần chèn thêm 1 đoạn nữa

<table border="1" width="100%">
<tbody>
<tr>
<td valign="top" width="33%">Nội dung cột 1</td>
<td valign="top" width="33%">Nội dung cột 2</td>
<td valign="top" width="33%">Nội dung cột 3</td>
</tr>
</tbody>
</table>

là đc.
nếu muốn độ rộng các cột ngang nhau thì các bạn chia cái % đều ra là đc.


Vậy là đc 3 cột rồi nhé:
VD:

Nội dung cột 1 Nội dung cột 2 Nội dung cột 3


Okie
Nếu muốn nhìu cột hơn, các bạn chỉ cần làm tương tự như trên là đc
hì ^^!
Cái nài cũng đơn giản, ko có gì cả
Các bạn xem
ai thích thì làm nha ^^!
hì..
Nếu thích thì hãy gửi web này cho các bạn khác cùng bít để ủng hộ cho ChipLove nha ^^!
hì.
Càng đông càng vui càng hứng, có tinh thần post nhìu bài hay hơn nữa ^^!
hi
Chúc các bạn thành công


Administrator

_____________|-:- Nguyễn Công Trứ -:-|____________
Nguyễn Công Trứ



Chung Tay Vì Một Thế Giới Online Lành Mạnh


Về Đầu Trang Go down

Cách chia Module Blog ra làm nhiều cột

Xem chủ đề cũ hơn Xem chủ đề mới hơn Về Đầu Trang
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
Nguyễn Công Trứ :: Thủ Thuật Blog + Forum :: Thủ Thuật Blog-
Nguyen Cong Tru - Kon TumChung tay vi mot the gioi online lanh manh
Free forum | Kinh tế, Luật, Tài chính | Khởi động | © phpBB | Free forum support | Liên hệ | Report an abuse | Create a free blog