Chi tiết cách ẩn và hiển thị Widget trong thiết kế giao diện cho Blog

Một khi bạn tạo một widget trên blog thì nó sẽ được hiển thị ở tất cả các trang theo mặc định, bao gồm cả trang chủ. Đôi khi bạn chỉ cần hiển thị một vài widget ở trang chủ hoặc chỉ ở một số trang hoặc thậm chí ở một trang riêng biệt nào đó. Thủ thuật này cũng khá đơn giản. Điều quan trọng là bạn phải nắm được id của widget mà bạn tạo ra.

Lấy ví dụ widget mà bạn tạo có id là HTML10 và bạn đặt tiêu đề cho widget đó là BLOGGER TIPS. Vào Bố cục (Layout) rồi chỉnh sửa HTML ở chế độ mở rộng mẫu tiện ích.

Trường hợp 1: Hiển thị widget chỉ ở trang chủ: Tìm và thêm đoạn code được đánh dấu màu đỏ và màu xanh như bên dưới.

<b:widget id='HTML10' locked='false' title='BLOGGER TIPS' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>

Trường hợp 2: Hiển thị widget ở tất cả các bài viết, trừ trang chủ: Thay đoạn code màu đỏ ở trên bằng đoạn code sau đây:

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

Trường hợp 3: Chỉ hiển thị widget ở một trang riêng biệt nào đó: Thay đoạn code màu đỏ ở trên bằng đoạn code sau đây:

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

Trường hợp 4: Chỉ hiển thị widget ở các trang chính gồm trang chủ, các trang Label và Archive: Thay đoạn code màu đỏ ở trên bằng đoạn code sau đây:

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

Trường hợp 5: Chỉ hiển thị widget ở các trang lưu trữ: Thay đoạn code màu đỏ ở trên bằng đoạn code sau đây:

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

Trường hợp 6: Chỉ hiển thị widget ở tất cả các trường hợp trừ các trang lưu trữ: Thay đoạn code màu đỏ ở trên bằng đoạn code sau đây:

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

Trường hợp 7: Chỉ hiển thị widget ở tất cả các trường hợp trừ các trang bài viết: Thay đoạn code màu đỏ ở trên bằng đoạn code sau đây:

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

Trường hợp 8: Chỉ hiển thị widget ở tất cả các trường hợp trừ trang chủ: Thay đoạn code màu đỏ ở trên bằng đoạn code sau đây:

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

Trường hợp 9: Chỉ hiển thị widget ở tất cả các trang trừ một trang riêng biệt nào đó: Thay đoạn code màu đỏ ở trên bằng đoạn code sau đây:

<b:if cond='data:blog.url ! == "Url của trang đặc biệt"'>

Trường hợp 10: Chỉ hiển thị widget ở tất cả các trang trừ hai trang riêng biệt nào đó trở lên: Thay đoạn code màu đỏ ở trên bằng đoạn code sau đây:

<b:if cond='data:blog.url ! == "Url của trang đặc biệt 1"'>
<b:if cond='data:blog.url ! == "Url của trang đặc biệt 2"'>

Trường hợp 11: Nếu bạn muốn hiển thị một thứ gì đó ở trang chủ và một thứ gì đó khác ở tất cả các trang: Bạn sử dụng lệnh điều kiện như thế này:

<b:if cond='data:blog.url == data:blog.homepageUrl'>
Đây là điều cần hiển thị ở trang chủ
<b:else/>
Đây là điều không hiển thị ở trang chủ
</b:if>

Trường hợp 12: Chỉ hiển thị widget ở một trang nhãn: Thay đoạn code màu đỏ ở trên bằng đoạn code sau đây:

<b:if cond='data:blog.url == "http://yourblogname.blogspot.com/search/label/Tennhan'>

Trường hợp này chỉ hoạt động với tên nhãn không dấu như Blogger, CSS, Thuthuat, Thuvien (không dùng cho nhãn tiếng Việt). Đối với các nhãn có khoảng cách như Recent Posts thì phải đặt là Recent%20Posts (tức là thay khoảng cách bằng %20).

Các liên kết trang nhãn trong trường hợp này cũng không hoạt động được khi có đuôi ?max-results=

Những thủ thuật nhỏ này rất có ích trong việc xây dựng trang chủ cho blog của bạn.

theo dvt.com

Chú ý quan trọng:

 Tôi đã làm theo cách trên, cũng thấy ẩn đi các Widget, tuy nhiên vẫn có chỗ chưa ưng ý (xem ảnh dưới), đó là vẫn còn xuất hiện các dòng ngăn cách giữa các Widget (trong ảnh là tôi chỉ có 3 Widget), làm cho trang Blog xấu đi:

 

    Tôi không ưng ý lắm nên cố gắng tìm cách khác, và cuối cùng tìm ra cách này, các bạn có thể làm theo, rất mỹ mãn:

Bài: Ẩn tiện ích và thành phần 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>

Lưu ý: 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ủ.

Chúc các bạn thành công