Quốc Kha Blog - Chia sẻ thủ thuật, kiến thức hay online

Home
Blogger

Tổng hợp các thẻ điều kiện thông dụng cho Blogger

Bài viết này mình xin tổng hợp các thẻ điều kiện mà mình hay dùng trong thiết kế giao diện Blogspot. Trong quá trình thiết kế và sử dụng Blogger, mình có hay sử dụng một số thẻ để lập trình. Nay xin phép tổng hợp lại trong bài viết này để anh em tham khảo khi cần thiết.

Thực ra có khá nhiều bài viết trên mạng nói về thẻ điều kiện này rồi nhưng mình post bài này nhằm tổng hợp kiến thức mà mình đã học được và nếu cần thì dỡ ra xem luôn, bài này như là một bài bookmark lại vậy thôi. Còn nếu bạn nào mới tìm hiểu blogspot chưa hiểu về thẻ này thì có thể lấy bài này tham khảo cũng tốt nhé!

© Quốc Kha Blog | Thẻ điều kiện cho Blogger
© Quốc Kha Blog | Thẻ điều kiện cho Blogger

Để á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.

{tocify} $title={Tóm tắt nội dung}

  • 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 cho Blogger

Thẻ điều kiện chỉ áp dụng cho trang chủ

<b:if cond='data:view.isHomepage'>
    <!-- Chỉ áp dụng cho trang chủ -->
</b:if>

Theo version trước:

<b:if cond='data:blog.url == data:blog.homepageUrl'>
    <!-- Chỉ áp dụng cho trang chủ -->
</b:if>

Thẻ điều kiện chỉ áp dụng cho trang bài viết

<b:if cond='data:view.isPost'>
    <!-- Chỉ áp dụng cho trang bài viết -->
</b:if>

Theo version trước:

<b:if cond='data:blog.pageType == "item"'>
    <!-- Chỉ áp dụng cho trang bài viết -->
</b:if>

Thẻ điều kiện chỉ áp dụng cho trang tĩnh (dạng quockhablog.com/p/contact.html)

<b:if cond='data:view.isPage'>
    <!-- Chỉ áp dụng cho trang tĩnh -->
</b:if>

Theo version trước:

<b:if cond='data:blog.pageType == "static_page"'>
    <!-- Chỉ áp dụng cho trang tĩnh -->
</b:if>

Thẻ điều kiện áp dụng cho 3 loại trang: Trang chủ, trang nhãn, trang lưu trữ

<b:if cond='data:view.isMultipleItems'>
    <!-- Chỉ áp dụng cho trang index -->
</b:if>

Theo version trước:

<b:if cond='data:blog.pageType == "index"'>
    <!-- Chỉ áp dụng cho trang index -->
</b:if>

Thẻ điều kiện chỉ áp dụng cho trang tìm kiếm (search)

<b:if cond='data:view.isSearch'>
    <!-- Áp dụng cho trang tìm kiếm -->
</b:if>

Theo version trước:

<b:if cond='data:blog.searchQuery'>
    <!-- Áp dụng cho trang tìm kiếm -->
</b:if>

Thẻ điều kiện chỉ áp dụng cho trang search label (trang tìm kiếm nhãn)

<b:if cond='data:view.isLabelSearch'>
    <!-- Chỉ áp dụng cho trang nhãn -->
</b:if>

Theo version trước:

<b:if cond='data:blog.searchLabel'>
    <!-- Chỉ áp dụng cho trang nhãn -->
</b:if>

Thẻ điều kiện chỉ áp dụng cho 1 nhãn cụ thể

<b:if cond='data:view.isLabelSearch == "Theme Blogspot"'>
    <!-- Áp dụng cho trang search khi tìm label tên Theme Blogspot -->
</b:if>

Theo version trước:

<b:if cond='data:blog.searchLabel == "Theme Blogspot"'>
    <!-- Áp dụng cho trang search khi tìm label tên Theme Blogspot -->
</b:if>

Thẻ điều kiện chỉ áp dụng cho trang lỗi (trang 404)

<b:if cond='data:view.isError'>
    <!-- Áp dụng cho trang lỗi (404 page) -->
</b:if>

Theo version trước:

<b:if cond='data:blog.pageType == "error_page"'>
    <!-- Áp dụng cho trang lỗi (404 page) -->
</b:if>

Áp dụng cho trang lưu trữ (archive)

<b:if cond='data:view.isArchive'>
    <!-- Áp dụng cho trang lưu trữ -->
</b:if>

Theo version trước:

<b:if cond='data:blog.pageType == "archive"'>
    <!-- Áp dụng cho trang lưu trữ -->
</b:if>

Áp dụng khi xem bằng điện thoại (mobile request)

<b:if cond="data:blog.isMobile">
    <!-- Chỉ hiển thị trên Mobile -->
<b:else/>
    <!-- Chỉ hiển thị trên PC -->
</b:if>

Theo version trước:

<b:if cond='data:blog.isMobileRequest'>
    <!-- Chỉ hiển thị trên Mobile -->
<b:else/>
    <!-- Chỉ hiển thị trên PC -->
</b:if>

Áp dụng cho bài viết đầu tiên trên trang Index

<b:if cond='data:post.isFirstPost'>
    <!-- Áp dụng cho bài viết đầu tiên -->
</b:if>

Áp dụng cho trang bài viết và trang tĩnh

<b:if cond='data:view.isSingleItem'>
    <!-- Áp dụng cho trang bài viết và trang tĩnh -->
</b:if>

Theo version trước:

<b:if cond='data:blog.url == data:post.url'>
    <!-- Áp dụng cho trang bài viết và trang tĩnh -->
</b:if>

Áp dụng nếu bài viết có ảnh thumbnail

<b:if cond='data:post.thumbnailUrl'>
    <!-- Áp dụng cho bài viết có ảnh thumbnail -->
</b:if>

Áp dụng khi tên tác giả bài viết là NQK

<b:if cond='data:displayname == "NQK"'>
    <!-- Áp dụng cho tác giả bài viết đó -->
</b:if>

Áp dụng khi bài viết có số nhận xét bằng 1 số nhất định (69 là giá trị)

<b:if cond='data:post.numComments == 69'>
    <!-- Áp dụng khi bài viết đó có 69 nhận xét -->
</b:if>

Áp dụng khi bài viết cho phép đăng nhận xét

<b:if cond='data:post.allowComments'>
    <!-- Áp dụng khi bài viết cho phép nhận xét mới -->
</b:if>

Áp dụng ở trang xem trước bài viết

<b:if cond='data:view.isPreview'>
    <!-- Áp dụng ở trang xem trước bài viết -->
</b:if>

Thẻ điều kiện cho Layout Mode

<b:if cond='data:view.isLayoutMode'>
  <!-- Áp dụng cho việc viết CSS cho bố cục -->
</b:if>

Áp dụng đối với nhãn cuối cùng

<b:loop values='data:post.labels' var='label'>
    <b:if cond='data:label.isLast != &quot;true&quot;'> 
        <!-- Nội dung cần trình bày -->
    </b:if>   
</b:loop>

Áp dụng cho một trang cụ thể

<b:if cond='data:blog.url == data:blog.canonicalHomepageUrl + "/2022/10/tong-hop-cac-the-dieu-kien-thong-dung-cho-blogger"'>
    <!-- Chỉ áp dụng cho bài viết có URL như trên, chỉ lấy từ phần sau domain chính -->
</b:if>

Áp dụng khi có Backlink

<b:if cond='data:post.showBacklinks'>
  <!-- Nội dung chỉ hiển thị khi có backlink -->
</b:if>

Áp dụng khi chức năng comment được kích hoạt

<b:if cond='data:post.allowComments'> 
  <!-- Nội dung cần trình bày -->
</b:if>

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

Á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……

Dùng thêm thẻ phủ định <b:/else/>

Nếu 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:view.isPost'>
 <!-- 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>

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:view.isHomepage'>
    <style type='text/css'>.post-body {color: yellow;}</style> 
   <b:else/>
    <b:if cond='data:view.isLabelSearch'>
    <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 nó là khi trang chủ thì .post-body sẽ có chữ màu vàng, nếu là trang nhãn sẽ có màu là màu xanh, còn nếu là các trang khác sẽ có màu đỏ.

Sử dụng điều kiện IN

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

Sử dụ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 Tĩnh và trang Bài Viết -->
</b:if>

Sử dụng điều kiện AND

<b:if cond='data:view.isPage and data:view.isPost'>
  <!-- Nội dung hiển thị Trang Tĩnh và Trang Bài Viết -->
</b:if>

Sử dụng điều kiện OR

<b:if cond='data:view.isPage or data:view.isPost'>
  <!-- Nội dung hiển thị hoặc Trang Tĩnh hoặc Trang Bài Viết -->
</b:if>

Sử dụng điều kiện Else if

<b:if cond='data:blog.pageType == &quot;item&quot;'>
  <data:post.body/>
<b:elseif cond='data:blog.pageType == &quot;static_page&quot;'>
  <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 == &quot;item&quot;'>
  <data:post.body/>
<b:else/>
   <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
     <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ự quot;, bạn không phải lo lắng gì hết nhé, vì mặc định Blogger nó như vậy đây không phải là lỗi. Ví dụ như:

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

sẽ được thay là:

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

Tổng kết

Trên đây là tổng hợp các thẻ điều kiện cho Blogger mới nhất mà mình đã sưu tầm được. Hy vọng bài viết mang lại một số kiến thức hữu ích cho anh em tham khảo trong quá trình thiết kế blogspot. Nếu có thắc mắc hay bất cứ thú gì thì bạn có thể comment phía bên dưới nhé. Chúc các bạn có ngày mới vui vẻ tốt lành!

Muốn có được những thứ mình thích, điều đầu tiên cần phải có là nỗ lực.