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
Thấ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ử nhé! hehe
Trả lờiXóaWidget chia trang chủ thành 2 cột đẹp mắt cho Blogspot