Tổng hợp các thẻ điều kiện cho Blogger mới nhất 2026

thẻ điều kiện blogspot 2022, tổng hợp thẻ điều kiện cho blogger 2022, thẻ điều kiện blog mới nhất, cách sử dụng thẻ điều kiện

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

Tổng hợp các thẻ điều kiện cho Blogger mới nhất
Tổng hợp các thẻ điều kiện cho Blogger mới nhất

Ví dụ như trong đoạn code sau:

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

Phần 1. Các thẻ điều kiện

1. Trang chủ (Homepage)

<b:if cond='data:view.isHomepage'>
  <!-- Nội dung chỉ hiển thị trên trang chủ -->
</b:if> 

Theo version trước:

<b:if cond='data:blog.url == data:blog.homepageUrl'>
  <!-- Nội dung chỉ hiển thị trên trang chủ -->
</b:if> 

Bảng so sánh chuyển đổi

Loại trang Code Cũ (data:blog) Code Mới (data:view)
Trang chủ data:blog.url == data:blog.homepageUrl data:view.isHomepage
Bài viết data:blog.pageType == "item" data:view.isPost
Trang tĩnh data:blog.pageType == "static_page" data:view.isPage
Trang Index data:blog.pageType == "index" data:view.isMultipleItems
Tìm kiếm data:blog.searchQuery data:view.isSearch
Nhãn (Label) data:blog.searchLabel data:view.isLabelSearch
Lưu trữ data:blog.pageType == "archive" data:view.isArchive
Lỗi 404 data:blog.pageType == "error_page" data:view.isError

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

<b:if cond='data:view.isPost'> 
 <!-- Nội dung chỉ hiển thị trên trang bài viết -->
</b:if> 

Theo version trước:

<b:if cond='data:blog.pageType == "item"'> 
 <!-- Nội dung chỉ hiển thị trên trang bài viết -->
</b:if> 

Cho một trang bài viết cụ thể:

<b:if cond='data:blog.url == data:blog.homepageUrl path "2019/03/postn.html"'>
  <!-- Nội dung chỉ hiển thị trên trang bài viết có địa chỉ url Blog-cua-ban/2019/03/postn.html-->
</b:if> 

3. Trang tĩnh (Static page)

<b:if cond='data:view.isPage'>
 <!-- Nội dung chỉ hiển thị trên trang tĩnh static page -->
</b:if> 

Theo version trước:

<b:if cond='data:blog.pageType == "static_page"'>
 <!-- Nội dung chỉ hiển thị trên trang tĩnh static page -->
</b:if> 

Cho một trang bài viết cụ thể:

<b:if cond='data:blog.url == data:blog.homepageUrl path "p/static.html"'>
  <!-- Nội dung chỉ hiển thị trên trang bài viết có địa chỉ url Blog-cua-ban/p/static.html 'foo' -->
</b:if> 

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

<b:if cond='data:view.isMultipleItems'>
  <!-- Nội dung chỉ hiển thị trên các trang index: trang chủ, trang hiển thị nhãn, trang lưu trữ -->
</b:if> 

Theo version trước:

<b:if cond='data:blog.pageType == "index"'>
  <!-- Nội dung chỉ hiển thị trên các trang index: trang chủ, trang hiển thị nhãn, trang lưu trữ -->
</b:if> 

5. Trang label search

<b:if cond='data:view.isLabelSearch'>
  <!-- Nội dung hiển thị trên tất cả các trang nhãn label -->
</b:if>
.................
<b:if cond='data:view.isLabelSearch == "blogger"'>  
<!-- Nội dung chỉ hiển thị trên nhãn "blogger"-->
</b:if> 

Theo version trước:

<b:if cond='data:blog.searchLabel'>
  <!-- Nội dung hiển thị trên tất cả các trang nhãn label -->
</b:if>
.................
<b:if cond='data:blog.searchLabel == "blogger"'>  
<!-- Nội dung chỉ hiển thị trên nhãn "blogger"-->
</b:if> 

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

<!-- Bao gồm trang tìm kiếm nhãn -->
<b:if cond='data:view.isSearch'> … </b:if>

<!-- Chỉ các trang tìm kiếm -->
<b:if cond='data:view.isSearch and !data:view.isLabelSearch'> … </b:if>

Theo version trước:

<b:if cond='data:blog.searchQuery'> 
   <!-- Nội dung hiển thị trên tất cả các trang tìm kiếm --></b:if>

...................................

<b:if cond='data:blog.searchQuery == "blogger"'>
  <!-- Nội dung chỉ hiển thị trên trang tìm kiếm với từ "blogger"-->
</b:if> 

7. Trang lỗi 404

<b:if cond='data:view.isError'>
  <!-- Nội dung chỉ hiển thị trên trang lỗi -->
</b:if> 

Theo version trước:

<b:if cond='data:blog.pageType == "error_page"'>
  <!-- Nội dung chỉ hiển thị trên trang lỗi -->
</b:if> 

8. Trang lưu trữ (archive)

<b:if cond='data:view.isArchive'> 
 <!-- Nội dung chỉ hiển thị trên tất cả các trang lưu trữ archive-->
</b:if> 

Theo version trước:

<b:if cond='data:blog.pageType == "archive"'> 
 <!-- Nội dung chỉ hiển thị trên tất cả các trang lưu trữ archive-->
</b:if> 

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

<b:if cond="data:blog.isMobile">
<!-- Nội dung chỉ hiển thị trên trang mobile-->
</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 (chỉ áp dụng cho Blog Gatget v1)

<b:if cond='data:post.isFirstPost'>
 <!-- Nội dung cần trình bày -->
</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:view.isSingleItem'>
<!-- Nội dung chỉ hiển thị với trang tĩnh và bài viết -->
</b:if> 

Theo version trước:

<b:if cond='data:blog.url == data:post.url'>
<!-- Nội dung chỉ hiển thị với trang tĩnh và bài viết -->
</b:if> 

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

<b:if cond='data:post.thumbnailUrl'>
  <!-- Nội dung chỉ hiển thị với bài viết có ảnh thumbnail -->
</b:if> 

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

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

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

<b:if cond='data:displayname == "author-name"'> 
<!-- Nội dung cần trình bày -->
</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'>
 <!-- Nội dung cần trình bày -->
</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'> 
<!-- Nội dung cần trình bày -->
</b:if> 

17. Hiển thị nội dung ở trang Preview (xem trước)

<b:if cond='data:view.isPreview'> … </b:if>

18. Điều kiện đối với nhãn (Label) cuối cùng

<b:loop values='data:post.labels' var='label'>
    <b:if cond='data:label.isLast != &quot;true&quot;'> <!-- Nếu ko phải nhãn cuối thì thêm ký tự đặc biệt vào phía sau -->
       ,
    </b:if>   
</b:loop> 

Phần 2. 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 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> 

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: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 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ử 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> 

5. 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> 

6. 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> 

7. 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> 

8. 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> 

Phần 3. 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;. Ví dụ như

<b:if cond='data:blog.pageType == "static_page"'> 
sẽ được thay 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.

Toán tử so sánh và Logic

Trong XML của Blogger, bạn không thể sử dụng các ký tự đặc biệt như && (Và), || (Hoặc), < (Nhỏ hơn), > (Lớn hơn) trực tiếp vì sẽ gây lỗi cú pháp (Syntax Error). Bạn phải dùng mã thay thế hoặc từ khóa.

Bảng toán tử chuẩn:

Toán tử Ý nghĩa Cách viết trong Blogger
AND Và (Cả 2 cùng đúng) and
OR Hoặc (1 trong 2 đúng) or
NOT Phủ định (Không phải) not hoặc !
EQUAL Bằng ==
NOT EQUAL Khác (Không bằng) !=
IN Nằm trong tập hợp in
LESS Nhỏ hơn &lt; (hoặc lt)
GREATER Lớn hơn &gt; (hoặc gt)

Ví dụ nâng cao:

Hiện nội dung nếu là Trang chủ HOẶC Trang bài viết:


<b:if cond='data:view.isHomepage or data:view.isPost'> ... </b:if>

Hiện nội dung nếu là Bài viết VÀ KHÔNG PHẢI xem trên Mobile:


<b:if cond='data:view.isPost and not data:blog.isMobileRequest'> ... </b:if>

Tối ưu thẻ Title (Tiêu đề trang)c

Mặc định Blogger hiển thị: “Tên Blog: Tên Bài Viết”. Cấu trúc này không tốt cho SEO. Chúng ta cần đổi lại thành: “Tên Bài Viết | Tên Blog” hoặc chỉ “Tên Bài Viết” để từ khóa xuất hiện đầu tiên.

<title>
  <b:if cond='data:view.isHomepage'>
    <data:blog.title/> - <data:blog.pageTitle/>
  <b:elseif cond='data:view.isPost or data:view.isPage'/>
    <data:blog.pageName/> | <data:blog.title/>
  <b:elseif cond='data:view.isLabelSearch'/>
    Tổng hợp bài viết về <data:blog.pageName/>
  <b:elseif cond='data:view.isSearch'/>
    Kết quả tìm kiếm cho: <data:view.search.query/>
  <b:elseif cond='data:view.isError'/>
    404 - Không tìm thấy trang này
  <b:else/>
    <data:blog.pageTitle/>
  </b:if>
</title>

Tối ưu thẻ Meta Descriptionc

Tránh lỗi trùng lặp thẻ mô tả.

<title>
  <b:if cond='data:view.isHomepage'>
    <data:blog.title/> - <data:blog.pageTitle/>
  <b:elseif cond='data:view.isPost or data:view.isPage'/>
    <data:blog.pageName/> | <data:blog.title/>
  <b:elseif cond='data:view.isLabelSearch'/>
    Tổng hợp bài viết về <data:blog.pageName/>
  <b:elseif cond='data:view.isSearch'/>
    Kết quả tìm kiếm cho: <data:view.search.query/>
  <b:elseif cond='data:view.isError'/>
    404 - Không tìm thấy trang này
  <b:else/>
    <data:blog.pageTitle/>
  </b:if>
</title>

Tối ưu Canonical URL

Tránh lỗi trùng lặp thẻ mô tả.

<title>
  <b:if cond='data:view.isHomepage'>
    <data:blog.title/> - <data:blog.pageTitle/>
  <b:elseif cond='data:view.isPost or data:view.isPage'/>
    <data:blog.pageName/> | <data:blog.title/>
  <b:elseif cond='data:view.isLabelSearch'/>
    Tổng hợp bài viết về <data:blog.pageName/>
  <b:elseif cond='data:view.isSearch'/>
    Kết quả tìm kiếm cho: <data:view.search.query/>
  <b:elseif cond='data:view.isError'/>
    404 - Không tìm thấy trang này
  <b:else/>
    <data:blog.pageTitle/>
  </b:if>
</title>

Tối Ưu Hiệu Suất (Core Web Vitals) – Defer JS/CSS

Google đánh giá rất cao tốc độ tải trang (LCP, CLS, FID). Thẻ điều kiện giúp bạn loại bỏ tài nguyên chặn hiển thị (Render-blocking resources).

Chỉ tải Font Awesome hoặc Icon ở nơi cần thiết

Nếu bạn chỉ dùng Icon ở trang bài viết, đừng tải nó ở trang chủ.

<b:if cond='data:view.isPost'>
    <link href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css' rel='stylesheet'/>
</b:if>

Lazy Load Fanpage Facebook & Comments

Plugin Facebook rất nặng. Hãy dùng điều kiện để chỉ tải nó khi vào bài viết.

<b:if cond='data:view.isPost'>
    <div id="fb-root"></div>
    <script async defer crossorigin="anonymous" src="https://connect.facebook.net/vi_VN/sdk.js..."></script>
</b:if>

CSS điều kiện (Critical CSS)

Bạn có thể chèn thẻ <style> vào trong thẻ điều kiện.

Ví dụ: Bạn muốn nền trang web màu đen khi vào bài viết, nhưng màu trắng ở trang chủ.

lt;b:if cond='data:view.isPost'>
    <style>
        body { background-color: #000; color: #fff; }
        .sidebar { display: none; } /* Ẩn sidebar bằng CSS */
    </style>
</b:if>

Khắc Phục Lỗi (Troubleshooting) Thường Gặp

Trong quá trình làm việc, bạn sẽ gặp những lỗi khiến không lưu được Template.

Lỗi: “The reference to entity…”

Nguyên nhân: Trong XML, bạn không được dùng ký tự & đứng một mình hoặc trong biểu thức logic.

  • Sai: <b:if cond='data:view.isPost && data:view.isMobile'>

  • Đúng: <b:if cond='data:view.isPost and data:view.isMobile'>

  • Hoặc: <b:if cond='data:view.isPost &amp;&amp; data:view.isMobile'> (Nhưng hãy dùng and cho chuẩn).

Lỗi: Thiếu thẻ đóng

Mỗi b:if mở ra BẮT BUỘC phải có </b:if> đóng lại. Nếu bạn lồng nhiều thẻ (if trong if), hãy chú ý thụt đầu dòng (indent) để dễ kiểm soát.

Lỗi: Đặt sai vị trí (Scope)

Một số dữ liệu như data:post.labels hay data:post.body chỉ hoạt động bên trong widget Blog1 và bên trong vòng lặp b:loop. Nếu bạn mang ra ngoài </head> hoặc Footer, nó sẽ không hoạt động hoặc gây lỗi.

  • Giải pháp: Chỉ dùng data:view (biến toàn cục) ở ngoài widget. Dùng data:post (biến cục bộ) ở trong widget bài đăng.

Thẻ IF / ELSE

Thẻ <b:if> / <b:else/> là thẻ điều kiện cơ bản hay gặp nhất trong thiết kế giao diện của Bloger. Thẻ này dùng để đặt điều kiện thực thi.

Ví dụ về cấu trúc của thẻ IF/ELSE bên dưới:

<!-- Ví dụ về cú pháp thẻ IF/ELSE -->
<b:if cond='data:view.isPost'>
<b:elseif cond='data:view.isPage'/>
<b:else/>
</b:if>

Thẻ Loop

Thẻ <b:loop> trong Blogger dùng để thực hiện vòng lặp. Thẻ này thường được sử dùng để trích xuất dữ liệu trong một mảng.

<!-- Ví dụ về cú pháp vòng lặp LOOP -->
<b:loop index='i' values='data:links' var='link'>
<a expr:title='data:link.name'/>
<data:link.target/>
</a>
</b:loop>

Trong ví dụ ở trên thì hàm <b:loop> dùng để trích xuất dữ liệu trong mảng data:links, biến phần tử được khai báo var='link'.

Để trích xuất giá trị trong hàm <b:loop> ở trên, chúng ta sử dụng cấu trúc: data:"phần tử"."thuộc tính". Ở trong ví dụ trên, phàn tử link có 2 thuộc tính targetname.

Thẻ Tag

Thẻ <b:tag> được dùng để khai báo 1 phần tử HTML trong Blogger. Loại phần tử HTML được quy định bởi thuộc tính name.

<!-- Ví dụ về cú pháp thẻ <b:tag/> -->
<b:tag expr:href="data:blog.homepageUrl.canonical" name="a">
   SAMPLE TEXT
</b:tag>

Trong ví dụ ở trên, chúng ta sử dụng thẻ <b:tag> để khai báo 1 phần tử <a>. Kết quả bên dưới:

<!-- Ví dụ về cú pháp thẻ <b:tag/> -->
<a href="https://omegakd.blogspot.com">
   SAMPLE TEXT
</a>

Thẻ Class

Thẻ <b:class> được sử dụng để thêm class name vào phần tử cha chứa thẻ này. Class name đươc quy định bởi thuộc tính name.

<!-- Ví dụ về cú pháp thẻ <b:class/> -->
<div class="class1">
<b:class cond='data:view.isMultipleItems' name='index-post'/>
SAMPLE TEXT
</div>

Trong ví dụ ở trên, sẽ cho kết quả như bên dưới nếu khớp điều kiện cond='data:view.isMultipleItems' trả về true.

<!-- Ví dụ về cú pháp thẻ <b:class/> -->
<div class="class1 index-post">
SAMPLE TEXT
</div>

Thẻ Includable

Thẻ <b:includable> dùng để gọi một hàm đã khai báo sẵn trước đó. Hàm được gọi quy định bởi thuộc tính name, và khai báo bởi thuộc tính id.

<!-- Ví dụ về cú pháp thẻ <b:includable/> -->
<!-- Khai báo nội dung cho thẻ <b:includable/> -->
<b:includable id='postMeta' var='post'>
   SAMPLE CONTENT
</b:includable>
<!-- Ví dụ về cách sử dụng thẻ <b:includable/>-->
<b:include data='post' name='postMeta'/>

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

Phần này sẽ trình bày về các loại thẻ điều kiện có thể dùng trong thuộc tính cond. Thuộc tính điều kiện này được sử dụng bởi các thẻ: <b:if>, <b:tag>, <b:class>, <b:loop>, <b:includable>,…

Bên dưới tổng hợp các điều kiện thường dùng trong thuộc tính cond:

Cấu trúc dữ liệu data:view

data:view.isError: true nếu không tìm thấy trang. Dùng để thiết kế trang Error 404.
data:view.isHomepage: true nếu là trang chủ.
data:view.isLabelSearch: true nếu đang xem trang Label.
data:view.isMobile: true nếu đang xem ở chế độ di động.
data:view.isPage: true nếu đang xem Trang.
data:view.isPost: true nếu đang xem Bài viết.
data:view.isSearch: true nếu đang xem kết quả tìm kiếm.
data:view.isSingleItem: true nếu đang xem trang đơn: Page/Post
data:view.isMultipleItems: true nếu đang xem trang đa: HomePage/Search/Archive
data:view.isLayoutMode: true nếu đang xem ở setting Layout trong dashboard của Blogger.

Một số ví dụ về các thẻ điều kiện

Trích xuất dữ liệu từ liên kết đính kèm (enclosure link)

Chúng ta có thể lấy dữ liệu từ liên kết đính kèm với bằng cách dùng thẻ <b:loop> như ví dụ sau:

<!-- Ví dụ về trích xuất dữ liệu từ liên kết đính kèm -->
<b:loop index='i' values='data:post.enclosures' var='enclosure'>
   <data:enclosure.url/>
   <data:enclosure.mimeType/>
</b:loop>

Ngoài ra, chúng ta còn có thể kết hợp thẻ điều kiện <b:if> để kiểm tra trước nội dung của liên kết đính kèm. Trong ví dụ bên dưới, sử dụng thẻ <b:if> để kiểm tra đính kèm có tồn tại type audio trước khi tạo liên kết tải.

<!-- Ví dụ về trích xuất dữ liệu từ liên kết đính kèm -->
<b:if cond="data:post.enclosures any (l => l.mimeType in {&quot;audio&quot;})">
   <b:loop index="i" values="data:post.enclosures" var="enclosure">
      <b:if cond="data:enclosure.mimeType == &quot;audio&quot;">
         <a expr:href="data:enclosure.url">Download</a>
      </b:if>
   </b:loop>
</b:if>

Trích xuất nội dung bài viết

Để trích xuất 1 đoạn ngắn bài viết, chúng ta có thể dùng thẻ <b:eval> để trích xuất nội dung từ data:post.snippets.

<!-- Ví dụ về trích xuất nội từ bài viết -->
<p class='entry-excerpt excerpt'>
   <b:eval expr='data:post.snippets.long snippet { length: 125 }'/>
</p>

Trong đoạn mẫu trên, nội dung bài viết được giới hạn ở 125 ký tự.

Lời 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. Nếu có bất cứ thắc mắc hay khiếu nại về bản quyền hãy comment ngay phía dưới cho mình biết nhé. Chúc các bạn một ngày học tập và làm việc thật hiệu quả. Xin chào và hẹn gặp lại!


Truy cập Bypass Google Account APK để tải file APK nhé

Đăng nhận xét