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 readmore tự độngmà mình đã giới thiệu đến các bạn sẽ rất đẹp:
Về cơn bản thủ thuật này giống với thủ thuật Chèn 2 cột widget vào Main-wrapper mà mình đã giới thiệu trước đây!
» Cách tiến hành
1. Đăng nhập vào tài khoản Blogger
2. Vào Mẫu (Tempalte)
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>
<b:if cond='data:blog.pageType == "index"'> <style type='text/css'> .post { width:48%; float:left; margin:0px 3px 5px 0px ; padding:5px; background:#eee; /* màu nền của bài viết*/ } </style> </b:if>7. Lưu mẫu lại
Nhận xét
Bài viết rất hay. Cám ơn bạn. Bạn cho mình hỏi cái này thay vì chi lam 2 mình có thể chia làm 3 hay nhiều hơn được không vậy bạn? Giúp mình nhé! Mình gà CSS quá. Cám ơn bạn nhiều! ^^
Trả lờiXóaCó thẻ chứ. Bước 6 sửa đoạn này:
Xóa.post {
width:48%;
float:left;
margin:0px 3px 5px 0px ;
padding:5px;
background:#eee; /* màu nền của bài viết*/
}
Thành:
.post {
width:30%;
float:left;
margin:0px 3px 5px 0px ;
padding:5px;
background:#eee; /* màu nền của bài viết*/
}
Anh Nam giúp với, mình chia làm 3 được rồi nhưng nó hiện 3 bài rồi sau đó 1 bài, kế đến lại 3 bài và tiếp 1 bài, cứ lặp lại như vậy, làm sao cho nó liền mạch 3 bài vậy anh? mong hướng dẫn cho, thannks
Xóasao mình không thấy đoạn code nào ở buoc 4 nhỉ >"<
Trả lờiXóaKhông tháy thì có thể bỏ qua bước đó nha bạn.
XóaAnh namkna cho hỏi, mình muốn bỏ thanh công cụ chia sẻ mặc định của blogspot làm như thế nào. Của em nó bị như vầy nè Hinh anh namkna chỉnh dùm em được không?
Trả lờiXóaE đọc bài viết này sẽ thấy có những đoạn đó em thích xóa đoạn nào chỉ việc xóa đoạn đó đi thôi:
XóaCode ở chân bài viết trong mẫu simple template của blogspot
Mìnhnlàm mà chỉ một cột có nội dung một cột không Tiểu Hoa ĐàTiểu Hoa Đà
Trả lờiXóaChỉnh lại thuộc tính width:48% nhỏ bớt đi là được.
XóaThấy trên mạng có code chia 2 cột khá hay có demo luôn rồi, mọi người xem thử coi:
Trả lờiXóaWidget chia trang chủ thành 2 cột đẹp mắt cho Blogspot