Chia bài viết ở trang chủ và trang nhãn thành 2 cột cho Blogspot
(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.

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ự
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
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>
<b:if cond='data:blog.pageType == "index"'>
.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
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Ở 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óakhong6 co1 code nhu7 anh noi1 sao ma2 thay ......
Trả lờiXóasau tim hoai khong thay doan code o buoc 4 vay admin. xin chi giup nge
Trả lờiXóa@ 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óaSao 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óaMình muốn hiều hơn 2 cột thị phải làm sao bạn?
Trả lờiXóaVí 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.
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óaChà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óaMì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óaAh mình đã fixed code ở trên rồi bạn ah, giờ bạn có thể thực hiện lại nhé.
Xóabá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óaVì ở 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óaMì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óaTrang của mình: http://www.tintuyensinh365.com/
Trả lờiXóaMuố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Đấ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óaThanks! A lại thêm no vào phần khác thảo nào không ra
Trả lờiXóasau 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