Friday, April 26, 2013

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


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.

  • Nếu muốn ẩn tiện ích có id là HTML1 ở trang chủ thì đặt đoạn code sau 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: Nếu muốn ẩ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 ta 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>


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

  • Ta thấy 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ủ.