Thiết kế blogspot với các cặp thẻ điều kiện

Một trong những kiến thức khá bổ ích, nó có thể giúp bạn tùy chỉnh hiển thị blogger của bạn theo ý muốn, tuy nhiên không phải ai cũng hiểu hết về nó. Ở đây mình đang muốn nói đến đó là các thẻ điều kiện cho blogspot.
Thẻ điều kiện trong blogspot có tác dụng gì? nói cơ bản, nó giúp bạn cho phép thuộc tính nào đó chỉ hiện thị hoặc không hiển thị ở trang nào đó.
>>> xem thêm: Những trang trong blogspot

thiet ke blogspot voi cac cap the dieu kien

Những cặp thẻ điều kiện trong blogspot hay được dùng

1. Điều kiện chỉ hiển thị ở trang chủ

<b:if cond='data:blog.url == data:blog.homepageUrl'>
Nội dung tùy chỉnh
</b:if>

Không hiển thị ở trang chủ chỉ việc thay == thành !=

<b:if cond='data:blog.url != data:blog.homepageUrl'>
Nội dung tùy chỉnh
</b:if>

2. Điều kiện chỉ hiển thị ở trang bài viết

<b:if cond='data:blog.pageType == &quot;item&quot;'>
Nội dung tùy chỉnh
</b:if>

3. Điều kiện chỉ hiên thị ở trang tĩnh ( trang static page)

<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
Nội dung tùy chỉnh
</b:if>

4.Thẻ điều kiện hiển thi ở trang Index ( trang chủ, trang nhãn, trang archive)

<b:if cond='data:blog.pageType == &quot;index&quot;'>
Nội dung tùy chỉnh
</b:if>

5. Thẻ điều kiện hiển thị ở trang label search ( trang nhãn)

<b:if cond='data:blog.searchLabel'> Nội dung tùy chỉnh </b:if>

6. Thẻ điều kiện hiển thị ở một Url bất kỳ

<b:if cond='data:blog.url == "URL_Ở_Đây"'>
Nội dung tùy chỉnh
</b:if>

7. Hiển thị ở trang lỗi 404

<b:if cond='data:blog.pageType == &quot;error_page&quot;'>
Nội dung tùy chỉnh
</b:if>

8. Hiển thị ở trang lưu trữ ( trang Archive)

<b:if cond='data:blog.pageType == &quot;archive&quot;'>
Nội dung tùy chỉnh
</b:if>

9. Trang hiển thị trên mobi

<b:if cond='data:blog.pageType == "data:blog.isMobile"'>
Nội dung tùy chỉnh
</b:if>

10. Bài viết đầu tiên ( thường dùng trong việc đặt quảng cáo)

<b:if cond='data:post.isFirstPost'>
Nội dung tùy chỉnh
</b:if>

Vừa rồi mình đã hệ thống cho các thẻ điều kiện trong blogspot, nếu bạn muốn phủ định lại điều kiện trên bạn chỉ cần việc thay "==" thành "!=". Như ví dụ mình đã là ở phần thẻ điều kiện ở trang chủ.

Cách sử dụng các thẻ điều kiện trong blogspot

Việc kết hợp các thẻ điều kiện trong blogspot giúp bạn có thể tối ưu các thẻ meta, tối ưu vị trí hiện thị, kết hợp thẻ điều kiện với css,....

<b:if cond='Điều kiện'>
..............
</b:if>
<b:if cond='Điều kiện'>
..............
<b:else/>
..............
</b:if>

là ngược lại.
Ví dụ minh họa:
1. Khi bạn muốn 1 thuộc tính css ( .content {width:1200px; float:left !important; position:absolute} }chỉ hiển thị ở trang chủ bạn dùng thẻ điều kiện sau:

<b:if cond='data:blog.url == data:blog.homepageUrl'>
.content {width:1200px; float:left !important; position:absolute}
</b:if>

2. Bạn muốn 1 thuộc tính khi ở trang chủ nó hiển thị như này, khi ở trang khác nó hiển thị như kia thì áp dụng thẻ như sau:

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div class="title-blog">
<h1> title blog</h1>
</div>
<b:else/>
<div class="title-blog">
<h2> title blog</h2>
</div>
</b:if>

Việc sử dụng kết hợp linh hoạt các thẻ điều kiện trong blogspot sẽ giúp bạn có thể tối ưu được blog của mình, rât mong bài viết này hữu ích cho các bạn đang học thiết kế blogger.

Nguồn: Sưu tầm