Hiển thị bài viết ở trang chủ với 2 hay nhiều cột.

Hiện tại, việc chia module bài viết (post) làm 2 hay nhiều cột ở trang chủ đã và đang rất cần cho các blog về thông tin hay thủ thuật  và đa số các bạn sử dụng các tiện ích như bài viết mới nhất nhưng nó đều sử dụng Java hoặc một số bài viết cũng có kết quà nhưng thật khó thực hiện. Hôm nay mình xin giới thiệu hà hứơng dẩn các bạn một thủ thuật khá đơn giản và hiệu quả rất cao, đặc biệt nó không sử dụng Java nên sẻ không ảnh hửơng đựợc tốc độ load trang.
Đặc biệt thủ thuật này các bạn có thể cải tiến nó, chỉ cần một chút mày mò là có thể chia các module khác ra làm nhiều cột chứ không phải là chỉ module bài viết (post)
Đây là demo :

Bước 1: Thêm thuộc tính  class post. Chèn đoạn mã dưới đây vào trước thẻ ]]></b:skin> trong mẫu blog của bạn.
.post{float:left;width:50%}/*luanvanmienphi.blogspot.com*/
Bước 2: Tìm đến đoạn mã của widget post này (Ctrl + F với từ khóa <data:post.body/> ), chèn đoạn mã dưới đây vào sau trứơc thẻ </div>. ( Nếu đã có đoạn này thì thôi - hảy bỏ qua bứơc này )

<div style="clear:both"/>/*luanvanmienphi.blogspot.com*/
Bước 3: Xong bứơc 2, ta đã chia module bài viết làm 02 cột rồi đấy. Nhưng khi load ở trang bài viết thì phần bài chủ trong bài viết bị thu hẹp 50%, để khắc phục điều này. Một cách đơn giản nhất là chúng ta đặt điều kiện lệnh xuất cho CSS ở bước 01. Thêm đoạn code này vào trước thẻ </head>.


<b:if cond='data:blog.pageType != &quot;index&quot;'>
<style>.post {float:left;width:100%}</style>
</b:if>/*luanvanmienphi.blogspot.com*/
Với giá trị  width:50% nghĩa là ta chia module post ra làm 50/50 nghĩa là 02 cột bằng nhau.
Để chia làm 3 cột thì thay 50% thành 33%, chia làm 04 cột thì là 25%. 20% thì sẻ chia module
ra thành 05 cột bằng nhau.
Đơn giản quá phải không ! Chúc bạn thực hiện thành công thủ thuật này nhé!
Update
Một cách thứ hai đơn giản hơn nửa, ta chỉ sử dụng code sau,với đoạn code này ta chèn vào trước thẻ  </head>.

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<style>.post {float:left;width:50%}</style>
</b:if>/*luanvanmienphi.blogspot.com*/

Với giá trị  width:50% cũng như trên nghĩa là ta chia module post ra làm 50/50 nghĩa là 
02 cột bằng nhau.
Để chia làm 3 cột thì thay 50% thành 33%, chia làm 04 cột thì là 25%. 20% thì sẻ chia 
module ra thành 05 cột bằng nhau.

5 nhận xét:

  1. Phước12.10.11

    Thủ thuật này đơn giản thật.Nhưng mà theo mình thấy thì vẩn chưa khã dụng lắm.

    Trả lờiXóa
  2. Nặc danh22.10.11

    hix, không làm được bác ơi.

    Trả lờiXóa
  3. VN blogger22.10.11

    dc ma pac, em dang xai ny www.vietnamblog.com

    Trả lờiXóa
  4. mình chèn vô nó bị lỗi bạn ơi

    Trả lờiXóa
  5. Nặc danh22.10.11

    mình làm vẩn được mà bạn

    Trả lờiXóa

- CẤM SPAM VỚI MỌI HÌNH THỨC
- VIẾT NHẬN XÉT BẰNG TIẾNG VIỆT CÓ DẤU
- KHÔNG NHẬN XÉT KIỂU BÓC TEM..TEM VÀNG..TEM BẠC
- COMMENT SẺ BỊ XÓA NẾU CHÈN LIÊN KẾT
- KHÔNG SỬ DỤNG CÁC TỪ NGỮ GÂY BỨC XÚC CHO NGƯỜI ĐỌC