Điều kiện ẩn hiện kết hợp nâng cao trong blogger - Ảnh 1
Điều kiện ẩn hiện kết hợp nâng cao trong blogger - Ảnh 1

Điều kiện ẩn hiện kết hợp nâng cao trong blogger

Blogspot Tips ₫

Bài viết trước chia sẻ cho bạn các điều kiện xuất hiện hoặc chặn xuất hiện ở 1 trang nào đó trong blogger tiếp tục bài viết này là các thẻ đ...

Xem Demo
Tags:
Bài viết trước chia sẻ cho bạn các điều kiện xuất hiện hoặc chặn xuất hiện ở 1 trang nào đó trong blogger tiếp tục bài viết này là các thẻ điều kiện kết hợp cho các bạn áp dụng 2 hoặc 3 trang...

Xem lại: Điều kiện ẩn hiện trong blogger (cơ bản)
điền kiện ẩn hiện trong blogspot
Đ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 == &quot;false&quot; 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 == &quot;true&quot; 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>

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 == &quot;static_page&quot; or data:blog.isMobileRequest == &quot;true&quot;'>
<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 == &quot;true&quot;'>
<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 == &quot;false&quot; 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ủ đề)

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 != &quot;item&quot; and data:blog.pageType != &quot;static_page&quot;'>
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 == &quot;true&quot;'>
// nội dung của bạn
</b:if>

Chúc bạn thành công!
2 Nhận xét

Cùng chuyên mục