Cách tùy chỉnh widget hiển thị trong Blogspot bằng CSS

Đôi khi vì một số lý do nào đó mà bạn chỉ muốn một hay một số widget hiển thị ở trang này nhưng không hiển thị ở trang kia. Ví dụ với widget quảng cáo Google Adsense, Google không cho phép hiển thị quảng cáo ở các trang lỗi 404. Tuy nhiên, nếu thêm widget vào thanh sidebar hay footer, thì nó sẽ hiển thị ở tất cả các trang, kể cả trang lỗi 404. Đó là lý do bạn phải tìm cách không cho hiển thị quảng cáo trong trang 404, tránh việc bị Google phạt.

Đầu tiên nên tìm hiểu một số code hiển thị nội dung bằng HTML trong Blogspot :

Chúng ta có một số code HTML hiển thị nội dung như sau:

- Code chỉ hiển thị nội dung ở trang chủ:

<b:if cond='data:blog.url == data:blog.homepageUrl'> nội dung sẽ hiển thị </b:if>

- Code chỉ hiển thị nội dung ở trang bài viết:

<b:if cond='data:blog.pageType == "item"'> nội dung sẽ hiển thị </b:if>

- Code chỉ hiển thị nội dung ở trang label:

 <b:if cond='data:blog.searchLabel'> nội dung sẽ hiển thị </b:if>

- Code chỉ hiển thị nội dung ở trang Static:

<b:if cond='data:blog.pageType == "static_page"'> nội dung sẽ hiển thị </b:if>

- Code chỉ hiển thị nội dung ở trang lưu trữ:

<b:if cond='data:blog.pageType == "archive"'> nội dung sẽ hiển thị </b:if>

- Code chỉ hiển thị nội dung ở trang lỗi 404:

<b:if cond='data:blog.pageType == "error_page"'> nội dung sẽ hiển thị </b:if>

- Code hiển thị nội dung ở trang chủ, label, lưu trữ:

 <b:if cond='data:blog.pageType == "index"'> nội dung sẽ hiển thị </b:if>

- Còn đây là code chỉ hiển thị nội dung ở một trang url bạn chỉ định:

<b:if cond='data:blog.url == "URL của trang riêng biệt"'> nội dung sẽ hiển thị </b:if>

Trên đây là những code dùng để hiển thị nội dung ở một số trang trong Blogspot.

Vậy code không cho phép hiển thị nội dung là gì?

Trong Blogspot quy định, code hiển thị nội dung sẽ được sử dụng với dấu "==", còn với code không hiển thị nội dung thì sẽ được sử dụng với dấu "!=". Vậy có nghĩa là gì? Nghĩa là bạn chỉ cần thay dấu "==" sau phần data:blog... ở các đoạn code tương ứng trên bằng dấu "!=" thì sẽ đổi thành code không cho phép hiển thị nội dung!
Ví dụ, đây là code không hiển thị nội dung ở trang lỗi 404:

<b:if cond='data:blog.pageType != "error_page"'> nội dung sẽ hiển thị </b:if>

Cách tùy chỉnh widget hiển thị trong Blogspot bằng CSS

Có nhiều cách để áp dụng việc ẩn hiện widget ở một số khu vực nào đó, bạn có thể trực tiếp thêm các đoạn code ở trên vào các widget bạn muốn, hoặc bạn sẽ sử dụng CSS như dưới đây:
- Thêm đoạn code này vào trước thẻ </body>

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

<style type='text/css'>

#HTML1 {display: none;}

</style>

</b:if>

Trong đó:
+ {display:none;} sẽ làm ẩn nội dung của id HTML1. Tương tự, bạn có thể thêm tất cả các widget khác vào ngay sau #HTML1, ngăn cách nhau bởi dấu phẩy là được.
+ <b:if cond='data:blog.pageType == "item"'> bạn sẽ thay bằng đoạn code ẩn, hiện nội dung như các đoạn code ở trên. Với đoạn code ở ví dụ này, có nghĩa là cho phép hiển thị widget HTML1 tại trang bài viết!

- Ví dụ với đoạn code này:

Ở dòng 5674, đây là dòng cho phép hiển thị ở trang Static. Tuy nhiên ở dòng 5676, các thành phần như thông tin cuối bài viết, khung bình luận, nút like FB, G+ mình sử dụng display:none, nghĩa là tất cả mọi thứ đều được hiển thị ở trang Static, ngoại trừ những cái trên ^_^ Trang static của mình là trang này: www.tranbadat.info/p/search.html

• Xem thêm: Hướng dẫn tối ưu thẻ H1, H2 cho Blogspot

Có lẽ sau khi đọc xong bài viết này bạn đã hiểu cách tùy chỉnh widget hiển thị trong Blogspot, nhằm tùy chỉnh cho phù hợp với website của mình. Nếu có thắc mắc gì thì cmt bên dưới nhé :)