Thủ thuật chia Widget thành nhiều cột bằng thẻ Table trong Blogger

Lưu ý: Nếu bạn gặp khó khăn với cách làm của bài viết "Thủ thuật chia Widget thành nhiều cột bằng thẻ Table trong Blogger" dưới đây hoặc mọi vấn đề khác, hãy gửi câu hỏi cho chúng tôi - TẠI ĐÂY - Đội ngũ lập trình sẽ trả lời và hỗ trợ bạn nhiệt tình sau 3 phút, 24/24h. Ok, giờ chúng ta bắt đầu

Đôi khi bạn muốn lập các bảng biểu hoặc chia bài viết thành nhiều cột trong blogger mà chưa biết cách sau đây mình xin giới thiệu cho các bạn thủ thuật blogger tạo khung cho bài viết, với cách này bạn có thể thỏa thích thiết kế website sáng tạo như đưa các bảng số liệu lên bài viết,tạo các list phim tạo các Banner quảng cáo 4 cột trên các Widget.

Để sử dụng các bạn dán trực tiếp vào các Widget hoặc phần HTML của bài viết. Đây là code chia làm 2 cột :

<table style="width: 600px;"  border="1">
  <tr>
    <td style="width: 350px;text-align:left;" >
        Nội dung cột 1
    </td>
    <td  style="width: 350px;text-align:left;" >
        Nội dung cột 2
    </td>
  </tr>
</table>

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 thì thay Width: 600 px .

Mở rộng các bạn có thể tạo danh sách các bài viết cho Blog như sau:

<table border="1" style="width: 600px"  >
  <tr>
    <td style="width: 350px;text-align:left;">
        <img src="Link Icom"><a href="Liên kết tới bài viết 1">Tiêu đề bài viết 1</a><br>
        <img src="Link Icom"><a href="Liên kết tới bài viết 2">Tiêu đề bài viết 2</a><br>
    </td>
    <td  style="width: 350px;text-align:left;">
        <img src="Link Icom"><a href="Liên kết tới bài viết 3">Tiêu đề bài viết 3</a><br>
        <img src="Link Icom"><a href="Liên kết tới bài viết 4">Tiêu đề bài viết 4</a><br>
    </td>
  </tr>
</table>

Các bạn thay các đoạn tương ứng vào các phần ở trên, để thêm bài viết các bạn thêm đoạn sau:

<img src="Link Icom"><a href="Liên kết tới bài viết 1">Tiêu đề bài viết 1</a><br>

Ví dụ mình thay được như sau:

<table border="1" style="width: 600px"  >
  <tr>
    <td style="width: 350px;text-align:left;">
        <img src="http://1.bp.blogspot.com/-kBIazT2TUWQ/UW-W8-gnS6I/AAAAAAAABwA/cJRqV3nP_A0/s1600/bi_mat_tinh_yeu.jpg"><a href="http://namkna.blogspot.com/">Tiêu đề bài viết 1</a><br>
        <img src="http://1.bp.blogspot.com/-kBIazT2TUWQ/UW-W8-gnS6I/AAAAAAAABwA/cJRqV3nP_A0/s1600/bi_mat_tinh_yeu.jpg"><a href="http://namkna.blogspot.com/2011/02/phim-hanh-ong-tuyen-chon.html">Tiêu đề bài viết 1</a><br>
    </td>
    <td  style="width: 350px;text-align:left;">
        <img src="http://1.bp.blogspot.com/-kBIazT2TUWQ/UW-W8-gnS6I/AAAAAAAABwA/cJRqV3nP_A0/s1600/bi_mat_tinh_yeu.jpg"><a href="http://namkna.blogspot.com/2011/02/phim-hanh-ong-tuyen-chon.html">Tiêu đề bài viết 1</a><br>
        <img src="http://1.bp.blogspot.com/-kBIazT2TUWQ/UW-W8-gnS6I/AAAAAAAABwA/cJRqV3nP_A0/s1600/bi_mat_tinh_yeu.jpg"><a href="http://namkna.blogspot.com/2011/01/hai-xuan-2011.html">Tiêu đề bài viết 1</a><br>
    </td>
  </tr>
</table>

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.

"valign="top"

Sau khi thêm ta sẽ được thế này :

<table border="1" style="width: 600px"  >
  <tr>
    <td style="width: 350px;text-align:left;""  valign="top">
        Nội dung cột 1
    </td>
    <td  style="width: 350px;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, nếu muốn 4 cột thì các bạn làm tương tự như là thêm 3 cột.

Ban quản trị:

Bạn đang đọc bài viết "Thủ thuật chia Widget thành nhiều cột bằng thẻ Table trong Blogger". Nếu bạn đang gặp khó khăn với cách làm trên hoặc mọi vấn đề khác, hãy gửi câu hỏi cho chúng tôi - TẠI ĐÂY - Đội ngũ lập trình sẽ trả lời bạn sau 3 phút, 24/24h (Nếu bị bật ra quảng cáo, vui lòng nhấn Bỏ Qua Quảng Cáo)

Thủ thuật chia Widget thành nhiều cột bằng thẻ Table trong Blogger

QUAN TÂM