Đám cưới Bùi Huỳnh Minh Tâm

Nguyên Lý 80/20 RICHARD KOCH

 

Ẩn tiện ích tại trang chủ hoặc trang riêng biệt

Chúng ta đã biết cách ẩn bài viết ở trang chủ và chỉ hiển thị tiện ích ở trang chủ hoặc trang riêng biệt. Đô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>

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

Như vậy, làm theo cách trên tôi thực hiện chèn đoạn code sau dòng ]]></b:skin> trong Template:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
#HTML1, #HTML6, #HTML8 {display:none !important;visibility:hidden !important} 
</style>
</b:if>
 thì tôi đã ẩn được 3 Widget ở các trang bài viết mà không còn xuất hiện các dòng ngăn cách giữa các Widget nữa.
Thanks!

     Hik, hik, tôi đã thực hiện như trên, nhưng khi tôi nhấn sang các Tab "Thủ thuật Blog, Mạng máy tính, Phần mềm, ...." thì không thấy ẩn các Widget, mày mò mãi tôi mới làm được. Các bạn muốn chỉ xuất hiện các Widget có id là HTML1, HTML6, HTML8... ở trang chủ thì sử dụng đoạn code sau:

<b:if cond='data:blog.url != data:blog.homepageUrl'>
<style type='text/css'>
#HTML1, #HTML6, #HTML8 {display:none !important;visibility:hidden !important}
</style>
</b:if>
     
     Tại sao tôi mày mò được: Đọc kĩ các hướng dẫn ở trên, tôi thấy là chỉ cần thay dấu ( == ) thành ( != ) thì tác dụng sẽ ngược lại.
VD: 
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 thay ( == ) thành ( != ) thì kết quả sẽ là chỉ Hiện các tiện ích có Id là HTML1,....ở trang chủ.