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

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

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

• 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é