Bài viết này mình sẽ hướng dẫn các bạn cách chia một tiện ích HTML thành nhiều cột khác nhau, hay chia thành nhiều cột khác nhau.
Bạn có thể sử dụng để tạo 2 cột chèn những tiện ích như recent post, ramdon post,... vào làm đẹp cho blog của bạn.
Bạn có thể sử dụng để tạo 2 cột chèn những tiện ích như recent post, ramdon post,... vào làm đẹp cho blog của bạn.
» Cách chia cột cho tiện ích HTML trong blogspot
Để sử dụng các bạn Pate trực tiếp đoạn code bên dưới vào trong tiện ích HTML/Javascripts (hoặc phần HTML của bài viết hay chèn thẳng vào mẫu của bạn cũng được). Đây là code chia làm 2 cột :
<table style="width:600px;" border="1"> <tr> <td style="width:360px;text-align:left;" > Nội dung cột 1 </td> <td style="width:345px;text-align:left;" > Nội dung cột 2 </td> </tr> </table>
Tùy chỉnh:
- Cái này cơ bản thì có viền xung quanh , để xoá viền đi các bạn để border = "0" là được.
- Tăng giảm chiều rộng của cả bảng thì thay width:600px .
- Để điều chỉnh cột bên trái bạn điều chỉnh thuộc tính width:360px
- Để điều chỉnh cột bên phải bạn điều chỉnh thuộc tính width:345px
» Cập nhật nâng cao
Muốn pro hơn các bạn kết hợp CSS nữa thì sẽ đẹp và gọn gàng hơn có 1 vấn đề nữa là nếu bạn dùng code đơn giản 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ị tụt xuống (ra giữa cột) nếu các bạn muốn lúc nào vị trí cũng ở trên top của cột thì các bạn thêm đoạn này vào sau code là ok
"valign="top"
-Sau khi thêm ta sẽ được thế này :
<table border="1" style="width: 600px" > <tr> <td style="width: 360px;text-align:left;"" valign="top"> Nội dung cột 1 </td> <td style="width: 345px;text-align:left;"" valign="top"> Nội dung cột 2 </td> </tr> </table>
Đó là code để chia thành 2 cột còn 3 cột thì các bạn thêm 1 đoạn code nữa là ok thôi
<td style="width: 200px;text-align:left;"" valign="top"> Nội dung cột 3 </td>
Là được 3 cột nếu muôn độ rộng của các cột ngang nhau thì các bạn chia cái % đều nhau là được đây là code hoàn chình 3 cột :
<table border="1" style="width: 600px" > <tr> <td style="width: 200px;text-align:left;"" valign="top"> Nội dung cột 1 </td> <td style="width: 200px;text-align:left;"" valign="top"> Nội dung cột 2 </td> <td style="width: 200px;text-align:left;"" valign="top"> Nội dung cột 3 </td> </tr> </table>
Vậy là hoàn thành 3 cột rùi đó còn nếu muốn 4 cột thì các bạn làm tương tự như là thêm 3 cột.
Nhận xét
bạn cho mình hỏi muốn đưa màu trang trí cho các module này thì phải làm như thế nào?
Trả lờiXóaBạn có thể xem hướng dẫn có hình nền cho bài viết tại đường dẫn sau: http://namkna.blogspot.com/2011/06/tao-module-cot-hien-thi-cac-bai-viet-cu.html
Trả lờiXóaChào bạn.
Trả lờiXóaMình vừa tìm hiểu bài http://hahuyhoanglong.blogspot.com/2012/09/chia-bai-viet-o-trang-chu-va-trang-nhan.html
Bạn có thể giúp mình cái này với
http://nt2.upanh.com/b1.s11.d1/059867ae98542ffe7111b9e6f4330bd4_51698662.horizontaldropdownmenu2.jpg
chào Bạn !
Trả lờiXóaMình áp dụng thủ thuật này cho google chrome thì ok, nhưng với IE thì kích thước hình nó nhảy tùm lum à. bạn kiểm tra giùm và giúp mình với nhé:
www.giamsathinhanh.com
Với các tirinhf duyệt IE cũ thì mới bị thôi. các trinh duyet IE mới vẫn hiển thị tốt. Nếu không thích hãy dùng mã sau:
Xóa<style>
.table-namkna{margin:0 auto;padding:0 auto;border:1px solid #96d7e2}
.table-namkna .table-namkna1{border-left:1px solid #96d7e2;float:left;margin:0}
.table-namkna .table-namkna2{border-left:1px solid #96d7e2;float:left;margin:0}
.table-namkna .table-namkna3{border-left:1px solid #96d7e2;float:left;margin:0}
.table-namkna .table-namkna4{border-left:1px solid #96d7e2;float:left;margin:0}
<style>
<div class='table-namkna'>
<div class='table-namkna1'> Nội dung ô 1</div>
<div class='table-namkna2'> Nội dung ô 2</div>
<div class='table-namkna3'> Nội dung ô 3</div>
<div class='table-namkna4'> Nội dung ô 4</div>
</div><div style='clear: both;'/>
mình đang dùng IE10 mà vẫn bị bạn à. Bạn có thể chỉ mình rõ hơn về code mới bạn chỉ bên trên được không, mình paste thử vào widget thì không được, mình phải chèn vào đâu trong phần chỉnh sửa HTML, mà code này không có đường link phải ko bạn
Trả lờiXóaMình chưa test thử trên IE 10, Trong thời gian đó hãy dùng mã HTML nha.
XóaĐoạn code trên mình viết thiếu bạn dùng code mới này nha.
- Sửa width và height theo ý bạn nha.
<style>
.table-namkna{margin:0;padding:0;border:1px solid #96d7e2;width:800px;height:200px}
.table-namkna1{border-left:1px solid #96d7e2;float:left;margin:0;width:200px;height:200px}
.table-namkna2{border-left:1px solid #96d7e2;float:left;margin:0;width:195px;height:200px}
.table-namkna3{border-left:1px solid #96d7e2;float:left;margin:0;width:190px;height:200px}
.table-namkna4{border-left:1px solid #96d7e2;float:left;margin:0;width:185px;height:200px}
</style>
<div class='table-namkna'>
<div class='table-namkna1'> Nội dung ô 1</div>
<div class='table-namkna2'> Nội dung ô 2</div>
<div class='table-namkna3'> Nội dung ô 3</div>
<div class='table-namkna4'> Nội dung ô 4</div>
</div>
chào bạn ! cám ơn bạn đã nhiệt tình giúp đỡ.
Trả lờiXóasau khi mình áp dụng thủ thuật thì có mấy điều như sau, mình đưa chi tiết lên để bạn coi thử :
1, đối với code như ở đầu chủ đề của bài viết này thì mình áp dụng chia làm 5 cột trong phần main như sau:
- độ rộng của phần main: 680
- độ rộng mình chia đều 5 cột là: width=129
- kích thước hình ảnh mình đưa vào đều là:(W*H=129*118)
->> trình duyệt google chrome thì rất đẹp như hình sau:
Hình ảnh trên trình duyệt google chrome
->> trình duyệt IE10 thì chữ bị nhảy như hình sau:
hình ảnh trên trình duyệt IE10
2, Đối với code mới mà bạn hướng dẫn mình,thì mình áp dụng chia làm 5 cột trong phần main như sau:
- độ rộng của phần main: 680
- kích thước mình chia đều 5 cột là : (W*H=129*118)
- kích thước hình ảnh mình đưa vào đều là:(W*H=129*118)
->> trình duyệt google chrome thì như hình sau:
Hình ảnh trên trình duyệt google chrome
->> trình duyệt IE10 thì như hình sau:
hình ảnh trên trình duyệt IE10
Rất mong bạn có thể giúp được mình
1. Code 1 bạn hãy dùng thẻ xuống dòng <br> giữa hình ảnh và chữ. ví dụ:
Xóa<img src="link ảnh"height="100" width="100"><br>Mô tả ảnh
2. Code 2:làm tương tụ trên. Và để đường viền không ra ngoài bạn chỉnh width tổng width:800px sao cho nhỏ hơn hoặc bằng bài đăng nha.
cám ơn bạn rất nhiều!
Trả lờiXóamình giữ nguyên code 1, mình enter cái phần: <a href="Liên kết tới bài viết 1">Tiêu đề bài viết 1</a><br> xuống và kết quả đã như ý muốn
chào bạn,
Trả lờiXóaMình tạo bảng gồm 2 cột, nhưng để tạo thanh cuộn giữa ngăn cách 2 cột thì mình làm thế nào?
chào bạn,
Trả lờiXóaMình tạo bảng gồm 2 cột, nhưng để tạo thanh cuộn giữa ngăn cách 2 cột thì mình làm thế nào?
<style>
Xóa.table-namkna{margin:0;padding:0;border:1px solid #96d7e2;width:800px;height:200px}
.table-namkna1{border-left:1px solid #96d7e2;float:left;margin:0;width:49%;height:200px}
.table-namkna2{border-left:1px solid #96d7e2;float:left;margin:0;width:49%;height:480px}
</style>
<div class='table-namkna'>
<div class='table-namkna1'> Nội dung ô 1</div>
<div class='table-namkna2'> Nội dung ô 2</div>
</div>
Thay các giá trị width và height cho thích hợp sẽ có thanh cuộn ngay nha,