welcome sinh k7
Bạn có muốn phản ứng với tin nhắn này? Vui lòng đăng ký diễn đàn trong một vài cú nhấp chuột hoặc đăng nhập để tiếp tục.



 
Trang ChínhCách chia Module Blog ra làm nhiều cột EmptyGalleryTìm kiếmLatest imagesĐăng kýĐăng Nhập

 

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

Go down 
Tác giảThông điệp
vip_boy_lalo
Admin
Admin
vip_boy_lalo


Tổng số bài gửi : 73
Points : 243
Reputation : 0
Join date : 08/06/2010
Age : 37
Đến từ : Hà Quảng - Cao Bằng

Cách chia Module Blog ra làm nhiều cột Empty
Bài gửiTiêu đề: Cách chia Module Blog ra làm nhiều cột   Cách chia Module Blog ra làm nhiều cột I_icon_minitimeThu 12 Aug 2010, 1:10 am

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



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 Very Happy
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 Very Happy
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 Very Happy
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 Very Happy

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

<table style="width: 600px" border="1">
<tr>
<td style="width: 350px" >
Nội dung cột 1
</td>
<td style="width: 350px" >
Nội dung cột 2
</td>
</tr>
</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" style="width: 600px" >
<tr>
<td style="width: 350px" >
<img src="https://2img.net/r/ihimizer/img195/5910/iuchiplove.gif"><a href="http://vn.myblog.yahoo.com/chiplove.9xpro/article?mid=915">Tiêu đề bài viết 1</a><br>
<img src="https://2img.net/r/ihimizer/img195/5910/iuchiplove.gif"><a href="http://vn.myblog.yahoo.com/chiplove.9xpro/article?mid=915">Tiêu đề bài viết 1</a><br>

</td>
<td style="width: 350px" >
<img src="https://2img.net/r/ihimizer/img195/5910/iuchiplove.gif"><a href="http://vn.myblog.yahoo.com/chiplove.9xpro/article?mid=915">Tiêu đề bài viết 1</a><br>
<img src="https://2img.net/r/ihimizer/img195/5910/iuchiplove.gif"><a href="http://vn.myblog.yahoo.com/chiplove.9xpro/article?mid=915">Tiêu đề bài viết 1</a><br>
</td>
</tr>
</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="https://2img.net/r/ihimizer/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://vn.myblog.yahoo.com/chiplove.9xpro/article?mid=915">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ấu trúc
<a href="link bai viet">Tiêu đề bài viết </a>
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 Very Happy
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 Very Happy


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 này vào:

valign="top"
Vậy sau khi thêm sẽ đc cái này
-------------------------------------------------
<table border="1" style="width: 600px" >
<tr>
<td style="width: 350px" valign="top">
Nội dung cột 1
</td>
<td style="width: 350px" valign="top">
Nội dung cột 2
</td>
</tr>
</table>
-------------------------------------------------

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
-------------------------------------------------
<td style="width: 200px" valign="top">
Nội dung cột 3
</td>
-------------------------------------------------
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.
-------------------------------------------------
<table border="1" style="width: 600px" >
<tr>
<td style="width: 200px" valign="top">
Nội dung cột 1
</td>
<td style="width: 200px" valign="top">
Nội dung cột 2
</td>
<td style="width: 200px" valign="top">
Nội dung cột 3
</td>
</tr>
</table>
-------------------------------------------------

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 Very Happy
hì ^^!
Cái nài cũng đơn giản, ko có gì cả Very Happy
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 Wink) 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 Very Happy
Về Đầu Trang Go down
http://www.pacbovippro.tk
 
Cách chia Module Blog ra làm nhiều cột
Về Đầu Trang 
Trang 1 trong tổng số 1 trang
 Similar topics
-
» Theme chia tay
» Cách lấy lại password khi đăng nhập vào hệ thống
» blog tui ne` ca? nha` o*i
» hihi he he blog của tui ne !
» Blog thành viên

Permissions in this forum:Bạn không có quyền trả lời bài viết
welcome sinh k7  :: Giải trí :: chuyên mục :: thủ thuật hay-
Chuyển đến