Xem lại: Điều kiện ẩn hiện trong blogger (cơ bản)
 |
| Điều kiện ẩn hiện kết hợp nâng cao trong blogger |
1. Điều kiện xuất hiện trên bài viết hoặc trang tĩnh
Nghĩa là chỉ hiện 1 trong 2 trang trên, các trang khác không hiện
<b:if cond='data:blog.pageType == "static_page" or data:blog.pageType == "item"'>
....................
</b:if>
hoặc
<b:if cond='data:blog.url == data:post.url'>
....................
</b:if>
2. Điều kiện xuất hiện trên bài viết hoặc trang chủ
<b:if cond='data:blog.url == data:blog.homepageUrl or data:blog.pageType == "item"'>
....................
</b:if>
3. Điều kiện xuất hiện trên bài viết hoặc trang nhãn
<b:if cond='data:blog.searchLabel or data:blog.pageType == "item"'>
....................
</b:if>
4. Điều kiện chỉ hiển thị trên trang bài viết Desktop
<b:if cond='data:blog.isMobileRequest == "false" and data:blog.pageType == "item"'>
// nội dung
</b:if>
5. Điều kiện chỉ hiển thị trên trang bài viết mobile
<b:if cond='data:blog.isMobileRequest == "true" and data:blog.pageType == "item"'>
// nội dung
</b:if>
6. Điều kiện cho bài viết thỏa mãn khi có nhãn nào đó
<b:if cond='data:post.labels any (l => l.name == "Nhãn 1, Nhãn 2, Nhãn 3....")'>
....................
</b:if>
<style type='text/css'>
@media screen and (min-width : 960px){
//css của bạn vào đây
}
</style>
</b:if>
Điều kiện này thường áp dụng cho trang tĩnh khi muốn nội dung bài viết rộng 100% (main-wrapper) nhưng muốn font-size sẽ to hơn cho dễ đọc thì sẽ dùng css body{font-size:120%}
Tham khảo trang mà mình đã áp dụng điều kiện này: https://www.toilaquantri.com/p/dich-vu-seo.html
<style type='text/css'>
@media screen and (min-width : 601px){
//css của bạn vào đây
}
</style>
</b:if>
7. Điều kiện chỉ hiện ở trang tĩnh và là Mobile với kích thước màn hình lớn hơn 960px
<b:if cond='data:blog.pageType == "static_page" or data:blog.isMobileRequest == "true"'><style type='text/css'>
@media screen and (min-width : 960px){
//css của bạn vào đây
}
</style>
</b:if>
Điều kiện này thường áp dụng cho trang tĩnh khi muốn nội dung bài viết rộng 100% (main-wrapper) nhưng muốn font-size sẽ to hơn cho dễ đọc thì sẽ dùng css body{font-size:120%}
Tham khảo trang mà mình đã áp dụng điều kiện này: https://www.toilaquantri.com/p/dich-vu-seo.html
7.1 Điều kiện chỉ hiện trên Trang Mobile kích thước trên 601px
<b:if cond='data:blog.isMobileRequest == "true"'><style type='text/css'>
@media screen and (min-width : 601px){
//css của bạn vào đây
}
</style>
</b:if>
8. Điều kiện chỉ hiện trên trang chủ Desktop, trang chủ trên mobile sẽ không hiện
Với điều kiện and thì phải thỏa mãn cả 2 trở lên điều kiện thì mới thực thi
<b:if cond='data:blog.isMobileRequest == "false" and data:blog.url == data:blog.homepageUrl'>
// nội dung của bạn
</b:if>
Ví dụ: Đây là các sử dụng để mình xây dựng 2 giao diện trang chủ khác nhau trên Mobile và Desktop
https://www.toilaquantri.com/?m=1 (Hiện bài viết từ mới đến cũ)
https://www.toilaquantri.com/ (Hiện bài viết theo chủ đề)
Ví dụ: Đây là các sử dụng để mình xây dựng 2 giao diện trang chủ khác nhau trên Mobile và Desktop
https://www.toilaquantri.com/?m=1 (Hiện bài viết từ mới đến cũ)
https://www.toilaquantri.com/ (Hiện bài viết theo chủ đề)
9. Điều kiện không hiển thị trên bài viết và trang tĩnh
Nghĩa là trừ bài viết và trang tĩnh ra sẽ hiện thị tất cả trên các trang còn lại (trang nhãn, trang lưu trữ, trang chủ...vv)
<b:if cond='data:blog.pageType != "item" and data:blog.pageType != "static_page"'>
Nội dung không hiển thị Trang Tĩnh và trang Bài Viết
</b:if>
Hoặc
<b:if cond='data:blog.pageType not in {"static_page","item"}'>
Nội dung không hiển thị Trang Tĩnh và trang Bài Viết
</b:if>
Hoặc
<b:if cond='data:blog.pageType not in {"static_page","item"}'>
Nội dung không hiển thị Trang Tĩnh và trang Bài Viết
</b:if>
10. Điều kiện chỉ hiện ở trang chủ Mobile
<b:if cond='data:blog.url != data:blog.homepageUrl or data:blog.isMobileRequest == "true"'>
// nội dung của bạn
</b:if>
Chúc bạn thành công!
[/tintuc]
Phải dùng "in" nhe, sai rồi
.......
Viết vội, để em kiểm tra xem đã nhé