Translate

Thanh Video ( nhấn F5 để xem video mới)

Loading...

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!

Gửi về Email của bạn