Diễn đàn sư phạm Yên Bái
Khách viếng thăm sẽ rất thiệt thòi đấy!!! Đăng nhập để chia sẻ... Ghi danh để yêu thương... ^^
Change background image
Diễn đàn sư phạm Yên Bái

Kết nối cộng đồng sư phạm Online

wWw.GiaoVienYenBai.7Forum.Net - Kết Nối Cộng Đồng Sư Phạm Online

Go downMessage [Page 1 of 1]

© FMvi.vn

#1codeCách chia Module Blog ra làm nhiều cột on 1/3/2012, 09:22
Đang xem:In total there is 0 user online :: 0 Registered, 0 Hidden and 0 Guests

avatar
avatar

Tôi là thuyền trưởng của cuộc đời tôi

Chia sẻ bài viết: ----------------------------


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

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 1Nộ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 alt="Cách chia Module Blog ra làm nhiều cột - Image 2" title="Cách chia Module Blog ra làm nhiều cột - Image 2" alt="Cách chia Module Blog ra làm nhiều cột - Image 3" title="Cách chia Module Blog ra làm nhiều cột - Image 3" alt="Cách chia Module Blog ra làm nhiều cột - Image 4" title="Cách chia Module Blog ra làm nhiều cột - Image 4" alt="Cách chia Module Blog ra làm nhiều cột - Image 5" title="Cách chia Module Blog ra làm nhiều cột - Image 5" src="http://img195.imageshack.us/img195/5910/iuchiplove.gif" /><a href="http://linkbaiviet1.com">Tiêu đề bài viết 1</a><br />
<img alt="Cách chia Module Blog ra làm nhiều cột - Image 2" title="Cách chia Module Blog ra làm nhiều cột - Image 2" alt="Cách chia Module Blog ra làm nhiều cột - Image 3" title="Cách chia Module Blog ra làm nhiều cột - Image 3" alt="Cách chia Module Blog ra làm nhiều cột - Image 4" title="Cách chia Module Blog ra làm nhiều cột - Image 4" alt="Cách chia Module Blog ra làm nhiều cột - Image 5" title="Cách chia Module Blog ra làm nhiều cột - Image 5" 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 alt="Cách chia Module Blog ra làm nhiều cột - Image 2" title="Cách chia Module Blog ra làm nhiều cột - Image 2" alt="Cách chia Module Blog ra làm nhiều cột - Image 3" title="Cách chia Module Blog ra làm nhiều cột - Image 3" alt="Cách chia Module Blog ra làm nhiều cột - Image 4" title="Cách chia Module Blog ra làm nhiều cột - Image 4" alt="Cách chia Module Blog ra làm nhiều cột - Image 5" title="Cách chia Module Blog ra làm nhiều cột - Image 5" src="http://img195.imageshack.us/img195/5910/iuchiplove.gif" /><a href="http://linkbaiviet1.com">Tiêu đề bài viết 1</a><br />
<img alt="Cách chia Module Blog ra làm nhiều cột - Image 2" title="Cách chia Module Blog ra làm nhiều cột - Image 2" alt="Cách chia Module Blog ra làm nhiều cột - Image 3" title="Cách chia Module Blog ra làm nhiều cột - Image 3" alt="Cách chia Module Blog ra làm nhiều cột - Image 4" title="Cách chia Module Blog ra làm nhiều cột - Image 4" alt="Cách chia Module Blog ra làm nhiều cột - Image 5" title="Cách chia Module Blog ra làm nhiều cột - Image 5" 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ụ:










Cách chia Module Blog ra làm nhiều cột - Image 2Tiêu đề bài viết 1
Cách chia Module Blog ra làm nhiều cột - Image 2Tiêu đề bài viết 2
Cách chia Module Blog ra làm nhiều cột - Image 2Tiêu đề bài viết 1
Cách chia Module Blog ra làm nhiều cột - Image 2Tiêu đề bài viết 2

Các bạn để ý, đoạn

<img alt="Cách chia Module Blog ra làm nhiều cột - Image 2"  title="Cách chia Module Blog ra làm nhiều cột - Image 2"  alt="Cách chia Module Blog ra làm nhiều cột - Image 3"  title="Cách chia Module Blog ra làm nhiều cột - Image 3"  alt="Cách chia Module Blog ra làm nhiều cột - Image 4"  title="Cách chia Module Blog ra làm nhiều cột - Image 4"  alt="Cách chia Module Blog ra làm nhiều cột - Image 5"  title="Cách chia Module Blog ra làm nhiều cột - Image 5"  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 1Nội dung cột 2Nộ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
-----------------------------------------------
Cảm ơn bạn đã đọc bài tại:wWw.GiaoVienYenBai.7Forum.Net



:vietnam: 
♥️…Không Thương…♥️…Không Nhớ…♥️…Không Mơ Mộng…♥️……♥️…Không Buồn…♥️…Không Chán…♥️…Lệ Không Rơi..♥️……♥️…Không Yêu Ai Cả…♥️…Lòng Băng Giá…♥️……♥️…Không Nhớ Ai Cả…♥️…Hồn Tự Do…♥️
View user profile http://m.facebook.com/thienthanbebong199http://xemboi.uiwap.com

Thích

Báo xấu [0]

Gửi một bình luận lên tường nhà rongbay
Trả lời nhanh

Back to topMessage [Page 1 of 1]

  © FMvi.vn

« Xem bài trước | Xem bài kế tiếp »

Bài viết liên quan

    Quyền hạn của bạn:

    You cannot reply to topics in this forum

    • TOP RANK(Giao Vien Yen Bai) Thank to:© FMvi - Design by baivong