Ẩn các tiện ích trong Blogger, bogspot

Đôi khi chúng ta cần ẩn một hay nhiều tiện ích hoặc một thành phần nào đó tại trang chủ hoặc trang riêng biệt nào đó để giúp dễ dàng hơn trong việc bố trí thiết kế trang chủ blogspot theo ý thích của người tạo blog. Hôm nay tôi sẽ hướng dẫn cách ẩn tiện ích và thành phần ở một phần riêng biệt nào đó của blog.

Muốn ẩn một tiện ích hoặc một thành phần nào đó thì ta phải xác định được id hoặc class của nó. Các id thông thường trong blogspot như là: HTML1, HTML2, HTML3, …, Label1, Label2, Label3, …, BlogList1, Followers1, Blog1, BlogArchive1, Profile1, header-wrapper, sidebar, main-wrapper, footer-wrapper, comments, comments-block, … Các id khi đưa vào CSS có dấu # ở phía trước, ví dụ: #HTML1. Các class thường gặp trong blogspot như: header-outer, main-outer, footer-outer, post-body, post-footer, … Các class khi đưa vào CSS có dấu . (dấu chấm) ở phía trước, ví dụ: .header-outer.

Lấy ví dụ muốn ẩn tiện ích có id là HTML1 ở trang chủ thì đặt đoạn code sau đây vào sau dòng ]]></b:skin> trong Template.

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

<style type='text/css'>

#HTML1 {display:none !important;visibility:hidden !important}

</style>

</b:if>

Nếu muốn ẩn nhiều tiện ích ở trang chủ, ví dụ các tiện ích có id lần lượt là HTML1, Label1, Followers1 thì sử dụng đoạn code sau.

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

<style type='text/css'>

#HTML1, #Label1, #Followers1 {display:none !important;visibility:hidden !important}

</style>

</b:if>

Nếu muốn ẩn tiện ích có id là HTML1 ở các trang bài viết thì sử dụng đoạn code sau.

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

<style type='text/css'>

#HTML1 {display:none !important;visibility:hidden !important}

</style>

</b:if>

Nếu muốn ẩn tiện ích có id là HTML1 ở các trang chính gồm trang chủ, trang nhãn, trang lưu trữ thì sử dụng đoạn code sau.

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

<style type='text/css'>

#HTML1 {display:none !important;visibility:hidden !important}

</style>

</b:if>

Nếu muốn ẩn tiện ích có id là HTML1 ở các trang lưu trữ thì sử dụng đoạn code sau.

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

<style type='text/css'>

#HTML1 {display:none !important;visibility:hidden !important}

</style>

</b:if>

Nếu muốn ẩn tiện ích có id là HTML1 ở các trang tĩnh thì sử dụng đoạn code sau.

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

<style type='text/css'>

#HTML1 {display:none !important;visibility:hidden !important}

</style>

</b:if>

Nếu muốn ẩn tiện ích có id là HTML1 ở một trang riêng biệt nào đó thì sử dụng đoạn code sau.

<b:if cond='data:blog.url == &quot;URL của trang riêng biệt&quot;'>

<style type='text/css'>

#HTML1 {display:none !important;visibility:hidden !important}

</style>

</b:if>

Trong trường hợp muốn ẩn tiện ích có id là HTML1 ở trang chủ, các trang nhãn, các trang lưu trữ mà không ẩn ở các trang bài viết thì sử dụng đoạn code sau.

<b:if cond='data:blog.pageType != &quot;item&quot;'>

<style type='text/css'>

#HTML1 {display:none !important;visibility:hidden !important}

</style>

</b:if>

Hoặc 

Đăng nhập blog

Vào chỉnh sửa code HTML (edit code HTML)

Chọn mở rộng mẫu tiện ích (Expand Widget Templates).

Nhấn Ctrl+F rồi gõ vào ID của widget ở trường hợp này là HTM2 Khi đó bạn sẽ thấy đoạn code tương tự như sau:

<b:widget id='HTML2' locked='false' title='' type='HTML'>

<b:includable id='main'>

  <!-- only display title if it's non-empty -->

  <b:if cond='data:title != ""'>

    <h2 class='title'>

<data:title/></h2>

</b:if>

  <div class='widget-content'>

    <data:content/>

  </div>

<b:include name='quickedit'/>

</b:includable>

</b:widget>

Ta thay đoạn code trên bằng đoạn code dưới đây

 <b:widget id='HTML2' locked='false' title='' type='HTML'>

<b:includable id='main'>

 Thay vào đây

  <!-- only display title if it's non-empty -->

  <b:if cond='data:title != ""'>

    <h2 class='title'>

<data:title/></h2>

</b:if>

  <div class='widget-content'>

    <data:content/>

  </div>

<b:include name='quickedit'/>

 </b:if>

</b:includable>

Bạn thay chữ (Thay vào đây) thành các đoạn code tương ứng bên dưới cho phù hợp

1. Chỉ hiển thị Widget ngoài trang chủ thay vào đoạn sau :

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

2. Chỉ hiển thị Widget ở trang Archive thay bằng đoạn sau:

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

3. Chỉ hiển thị Widget ở trang bài viết thay bằng đoạn sau:

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

4. Chỉ hiển thị Widget ở Trang chủ, trang Label và trang Archive thay bằng đoạn sau:

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

<!-- Chỉ hiện widget ở trang bài viết --><b:if cond='data:blog.pageType != "item"'><style type='text/css'>#ID_widget {display:none !important;visibility:hidden !important}</style></b:if>
Lưu ý: Nếu thay == thành != thì kết quả sẽ ngược lại - nghĩa là không ẩn mà chỉ hiện các widget ở các trang lựa chọn ở trên và ẩn ở các trang còn lại.

 Như vậy:  muốn ẩn một cái gì đó thì nó phải có id hoặc class.