Chia bài viết ở trang chủ và trang nhãn thành 2 cột cho Blogspot

Điểm 4.6/5 dựa vào 87 đánh giá

(Traidatmui.com) – Thông thường đối với những mẫu được cung cấp bởi Blogger, thì các bài viết sẽ hiển thị chỉ một cột và đầy đủ ở trang chủ và ở các trang nhãn. Với cách hiển thị như vậy thì khi bạn muốn ở trang chủ có nhiều bài viết hơn nó sẽ kéo trang bạn ra rất dài thậm chí ảnh hưởng đến tốc độ load của trang. Vì thế hôm nay mình chia sẻ đến các bạn cách để có thể hiển thị nhiều bài viết ở trang chủ và trang nhãn hơn nhưng chiếm không gian rất ít. Thủ thuật này là mình sẽ giúp các bạn chia phần bài viết thành 2 cột kết hợp với thủ thuật tự động tóm tắt bài viết trên blog mà mình đã giới thiệu đến các bạn tại đây. Tuy nhiên nếu trên blog bạn đã có thủ thuật tóm tắt bài viết hay đã có phần (readmore) hay đọc tiếp thì bạn không cần thực hiện thủ thuật tự động tóm tắt bài viết ở trên.

Hình ảnh minh họa
» Bắt đầu thủ thuật

1. Đăng nhập vào tài khoản Blogger
2. Vào phần thiết kế (Design)
3. Chọn chỉnh sửa HTML (Edit HTML)
4. Tìm đến code bên dưới hoặc tương tự
.post {
margin:0px 3px 5px 0px ;
padding:5px;
}
.post h3 {
font-size:160%;
font-weight:bold;
margin:3px;
padding:0px;
}
.post h3 a {
color:#0000ff;
}
.post h3 a:hover {
color:#666;
}

5. Thay toàn bộ code vừa tìm được thành code bên dưới
.post {
background:none;
margin-right:0px;
padding:5px;
width:100%;}
.post h3 {
font-size:14px; /* cỡ chữ của tiêu đề bài viết*/
font-weight:bold;
margin:3px;
padding:0px;
}
.post h3 a {
color:#0000ff; /* màu chữ của tiêu đề bài viết*/
}
.post h3 a:hover {
color:#666; /* màu chữ của tiêu đề bài viết khi rê chuột*/
}

6. Bạn chèn tiếp code bên dưới vào ngay trước thẻ </head>
<style type='text/css'>
<b:if cond='data:blog.pageType == &quot;index&quot;'>
.post {
width:48%;
float:left;
margin:0px 3px 5px 0px ;
padding:5px;
background:#eee; /* màu nền của bài viết*/
}
</b:if>

</style>

7. Cuối cùng save template lại

Chúc bạn thành công

Loading...

19 nhận xét

  1. Phần này có cần lưu ý gì về độ rộng của Main không bác ? Hay thủ thuật đã tự động căn đều ?

    Trả lờiXóa
  2. Ở thủ thuật này mình đã đặt độ rộng ở dạng % nên bạn không cần phải quan tâm độ rộng main, nó sẽ tự động điều chỉnh theo độ rộng của main. Nếu bạn muốn đặt lại dạng px thì cần chú ý chia độ rộng cột cho phù hợp. dabong

    Trả lờiXóa
  3. khong6 co1 code nhu7 anh noi1 sao ma2 thay ......

    Trả lờiXóa
  4. sau tim hoai khong thay doan code o buoc 4 vay admin. xin chi giup nge

    Trả lờiXóa
  5. @ Mr.phong: Code ở bước 4 thì mỗi template mỗi khác nhau không giống 100%, bạn chú ý tìm đến phần .post và chỉnh sửa tương tự nhé.

    Trả lờiXóa
  6. Sao của mình lộn xoài hết nhỉ cái chữ readmore chạy mất tiều roài

    Trả lờiXóa
  7. Mình muốn hiều hơn 2 cột thị phải làm sao bạn?
    Ví dụ 4 hoặc 5 cột đực ko?
    Cám ơn bạn vị bài viết hay. Mong sớm nhận được hồi âm.

    Trả lờiXóa
    Trả lời
    1. Bạn chỉ cần tính toán phần độ rộng ở .post {width:48%; sao cho tổng độ rộng của các cột bạn muốn chia phải <= độ rộng của phần main.

      Xóa
  8. Chào @traidatmui ! Mình test thử thì trang home thì ok...nhưng bị lỗi ở các trang như http://domainblog.com/p/contact.html là hiện pé xíu như hiện trạng trình bày ở trang hone...test nhiều templates cũng bị vậy...bạn chỉ hướng khắc phục nhé....thanks....!

    Trả lờiXóa
    Trả lời
    1. Mình nói rõ thực hiện theo code hướng dẫn trên.khi xem các trang bài viết thì bình thường....nhưng xem trang có các url http://domainblog.com/p/aboutus.html hay /p/contact.html là các trang không hiện như mặc định mà hiện nhỏ bằng kích thước các bài ở trang home...giúp mình nhé...thanks bạn nhiều nhiều..moison

      Xóa
    2. Ah mình đã fixed code ở trên rồi bạn ah, giờ bạn có thể thực hiện lại nhé.

      Xóa
  9. bác ơi thủ thuật này làm chữ home ở cuối cùng nó chạy lên trên là sao ak bác???

    Trả lờiXóa
    Trả lời
    1. Vì ở trên chúng ta dùng thuộc tính Float nên nếu độ rộng của 2 cột tổng lại còn thừa ra khoảng trống thì phần blog-page sẽ chạy lên trên. Bạn hãy thêm <div style="clear:both;"/> trước <b:include name='nextprev'/>

      Xóa
  10. Mình làm được thành 2 cột rồi nhưng sao vẫn có những ô trống không hiển thị được bài viết nhỉ Đình

    Trả lờiXóa
  11. Trang của mình: http://www.tintuyensinh365.com/

    Trả lờiXóa
  12. Muốn cố định chiều cao của ô bài viết làm thế nào vậy. Mình cảm ơn trước nha

    Trả lờiXóa
    Trả lời
    1. Đấy là do độ cao không đồng đều, anh thêm thuộc tính height vào .post { ở bước 6 để cố định độ cao cho các ô đồng đều nhau. (Ví dụ: height:180px;)

      Xóa
  13. Thanks! A lại thêm no vào phần khác thảo nào không ra

    Trả lờiXóa
  14. sau khi làm xong, cái sitemap của anh nó bị phủ bởi ô Comments và bài đăng phổ biến. Mong em chỉ giùm nha

    Trả lờiXóa