"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.

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

Xem khác cùng chủ đề

19 nhận xét | Viết lời bình

4/29/2011 10:46:00 CH Trả lời

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 ?

Admin
4/30/2011 01:39:00 SA Trả lời

Ở 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

9/12/2011 07:10:00 CH Trả lời

khong6 co1 code nhu7 anh noi1 sao ma2 thay ......

9/28/2011 11:55:00 SA Trả lời

sau tim hoai khong thay doan code o buoc 4 vay admin. xin chi giup nge

Admin
9/28/2011 07:37:00 CH Trả lời

@ 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é.

6/03/2012 11:44:00 CH Trả lời

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

7/07/2012 07:34:00 CH Trả lời

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.

Admin
7/07/2012 07:47:00 CH Trả lời

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.

7/27/2012 04:24:00 SA Trả lời

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....!

7/27/2012 04:33:00 SA Trả lời

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

Admin
7/29/2012 06:38:00 SA Trả lời

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

10/29/2012 05:01:00 SA Trả lời

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???

Admin
10/29/2012 05:19:00 SA Trả lời

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'/>

4/03/2013 12:52:00 SA Trả lời

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

4/03/2013 01:02:00 SA Trả lời

Trang của mình: http://www.tintuyensinh365.com/

4/03/2013 01:09:00 SA Trả lời

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

Admin
4/03/2013 01:20:00 SA Trả lời

Đấ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;)

4/04/2013 12:26:00 SA Trả lời

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

4/04/2013 05:36:00 SA Trả lời

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

Bạn nhập từ: cungly Bạn nhập từ: lleu Bạn nhập từ: kkrong Bạn nhập từ: cuoilon Bạn nhập từ: roile Bạn nhập từ: hehehe Bạn nhập từ: byebye Bạn nhập từ: idontknow Bạn nhập từ: votay more »

Giải pháp bán hàng online Số 1 Việt Nam
Lên đầu trang Xuống cuối trang