"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ự
5. Thay toàn bộ code vừa tìm được thành code bên dưới
6. Bạn chèn tiếp code bên dưới vào ngay trước thẻ </head>
7. Cuối cùng save template lại
Chúc bạn thành công
Hình ảnh minh họa
» Bắt đầu thủ thuật1. Đă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;
}
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*/
}
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 == "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>
<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
Nguồn: TRAIDATMUI.com
1 nhận xét:
Đăng nhận xét