Translate

Chủ Nhật, 24 tháng 4, 2011

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



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.



Nội dung cột 1
(http://www.conetvn.blogspot.com)-st-

Không có nhận xét nào:

Đăng nhận xét

Cám ơn bạn đã đóng góp cùng conetvn!