Những thẻ điều kiện quan trọng để cấu trúc thành blogspot bạn cần biết

Update cách sử dụng chi tiết 10/11/2018

Đối với một template blogger thì thẻ điều kiện b:if hay mở rộng hơn là b:else là yếu tố không thể thiếu, nó giúp bạn có thể điều hướng hiển thị blog của bạn một cách tối ưu nhất. Và một khi bạn đã nắm rõ được chức năng và ý nghĩa của những thẻ này thì bạn có thể tùy chỉnh blog của bạn dễ như trở bàn tay vậy.

Niemstyle | Thẻ điều kiện Blogger/Blogspot

Để áp dụng thẻ (tag) điều kiện bạn phải có kiến thức chút về HTML, bạn chú ý là cơ bản nó bắt đầu bằng tag với thuộc tính “ cond “ và kết thúc là một tag đóng. Trong giữa những tag này, các nội dung (html ,style, script, widgets…) sẽ chỉ xuất hiện hoặc thực hiện theo những điều kiện xác định. Ví dụ như trong đoạn code sau:

<b:if cond='your condition'>
<style>...css code...</style>
<script>...javascript code...</script>
</b:if>

Các thẻ điều kiện

1. Trang chủ (Home Page)

<b:if cond='data:blog.url == data:blog.homepageUrl'> </b:if>

2. Trang bài viết (item)

<b:if cond='data:blog.pageType == "item"'> </b:if>

3. Trang tĩnh (Static page)

<b:if cond='data:blog.pageType == "static_page"'> </b:if>

4. Trang index bao gồm trang chủ, trang hiển thị nhãn Label, và trang archive.

<b:if cond='data:blog.pageType == "index"'> </b:if>

5. Trang label search

<b:if cond='data:blog.searchLabel'> </b:if>.................<b:if cond='data:blog.searchLabel == "blogger"'> </b:if>

6. Hiển thị nội dung cho kết quả tìm kiếm (ví dụ: /search?q=blogger)

<b:if cond='data:blog.searchQuery'> </b:if>...................................<b:if cond='data:blog.searchQuery == "blogger"'> </b:if>

7. Trang lỗi 404

<b:if cond='data:blog.pageType == "error_page"'> </b:if>

8. Trang lưu trữ (archive)

<b:if cond='data:blog.pageType == "archive"'> </b:if>

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

<b:if cond='data:blog.isMobileRequest'></b:if>

Hoặc có thể sử dụng

<b:if cond="data:blog.isMobile"></b:if>

Hoặc

<b:if cond='data:blog.pageType == "data:blog.isMobile"'></b:if>

Hoặc

<b:if cond='data:blog.isMobileRequest == "true"'></b:if>

10. Nội dung hiển thị cho những trang có nhiều bài viết trên cùng một trang, áp dụng này cho bài viết đầu tiên FirstPost

<b:if cond='data:post.isFirstPost'> </b:if>

11. Nội dung hiển thị cho trang tĩnh Static Page và bài viết Item

<b:if cond='data:blog.url == data:post.url'></b:if>

12. Hiển thị nội dung nếu bài viết có ảnh thumbnail

<b:if cond='data:post.thumbnailUrl'> </b:if>

13. Hiển thị một nội dung khi có Backlink

<b:if cond='data:post.showBacklinks'> </b:if>

14. Hiển thị nội dung cho Tác giả bài viết

<b:if cond='data:displayname == "author-name"'> </b:if>

15. Hiển thị nội dung trên trang có số comments bằng một giá trị nào đó

<b:if cond='data:post.numComments == number'> </b:if>

16. Hiển thị nội dung trong tất cả các trang khi chức năng comment được kích hoạt

<b:if cond='data:post.allowComments'> </b:if>

Cách sử dụng và kết hợp các thẻ điều kiện

1. Áp dụng điều kiện xuất hiện hoặc không xuất hiện
== Có nghĩa là chỉ xuất hiện trên trang này …..
!= Có nghĩa là xuất hiện trên tất cả các trang trừ trang này ra……
2. Dùng thêm thẻ <b:/else/>
Nếu như bạn muốn đưa vào một nội dung thay thế khi điều kiện đưa vào là sai, bạn cần thêm một thẻ <b:/else/> và cho nội dung vào giữa.

<b:if cond='data:blog.pageType == "item"'>
Nội dung chỉ hiển thị trang bài viết Item
<b:else/>
Nội dung hiển thị các trang còn lại
</b:if>

3. Kết hợp của nhiều điều kiện (xuất hiện khi thỏa mãn các điều kiện)

<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<style type='text/css'>.post-body {color: yellow;}</style>
<b:else/>
<b:if cond='data:blog.searchLabel'>
<style type='text/css'>.post-body {color: blue;}</style>
<b:else/>
<style type='text/css'>.post-body {color: red;}</style>
</b:if>
</b:if>
</b:if>

Với đoạn code này thì có ý nghĩa xuất ở trang chủ thì .post-body có chữ màu yellow, nếu là trang nhãn sẽ có màu là blue, còn nếu là các trang khác sẽ có màu red.
4. Sử dụng điều kiện IN

<b:if cond='data:blog.pageType in {"static_page","item"}'>Nội dung chỉ hiển thị Trang Tĩnh và trang Bài Viết</b:if>

5. Sử dụng điều kiện NOT IN

<b:if cond='data:blog.pageType not in {"static_page","item"}'>Nội dung không hiển thị Trang Tĩnh và trang Bài Viết</b:if>

6. Sử dụng điều kiện AND

<b:if cond='data:blog.pageType == "static_page" and data:blog.pageType == "item"'>Nội dung hiển thị Trang Tĩnh và Trang Bài Viết</b:if>

7. Sử dụng điều kiện OR

<b:if cond='data:blog.pageType == "static_page" or data:blog.pageType == "item"'>Nội dung hiển thị hoặc Trang Tĩnh hoặc Trang Bài Viết</b:if>

8. Sử dụng điều kiện Else if

<b:if cond='data:blog.pageType == "item"'> <data:post.body/> <b:elseif cond='data:blog.pageType == "static_page"'> <data:post.body/> <b:else/> <data:post.snippet/> </b:if>

Đoạn code trên tương đương với

<b:if cond='data:blog.pageType == "item"'> <data:post.body/><b:else/> <b:if cond='data:blog.pageType == "static_page"'> <data:post.body/> <b:else/> <data:post.snippet/> </b:if></b:if>

Lưu ý

Khi bạn chỉnh sửa code cho template của bạn, đôi khi dấu ngoặc kép (“) sẽ bị thay thế bằng ký tự ". Ví dụ như sẽ được thêm vào là

<b:if cond='data:blog.pageType == quot;static_pagequot;'>

Sử dụng điều kiện trong thẻ b:include hoàn toàn tương tự với thẻ b:if, bạn chỉ cần thêm vào thuộc tính cond='ĐIỀU KIỆN' của thẻ b:if vào thẻ b:include là xong.