Ẩn / Hiện hoàn toàn một Widget bất kỳ cho Blogger

How to Show / Hide a Widget for Blogger

Đôi khi bạn muốn ẩn 1 widget đi hoàn toàn mà lại không muốn xóa bỏ nó, hay chỉ muốn ẩn/hiện widget đó tại một số trang nhất định như trang chủ, trang bài viết... Bài viết dưới đây của Iris Tips sẽ giúp bạn thực hiện điều đó.

1. Ẩn Widget hoàn toàn

a) Nếu widget là widget HTML/Javascript

Đơn giản bạn chỉ cần mở widget đó lên và đặt toàn bộ các dòng code trong widget trong dấu <!-- và -->

Ví dụ code của widget muốn ẩn như sau

 <div class="separator" style="clear: both; text-align: center;">
<a href="/p/test-iq.html"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5IcisxAhqKb6l2Yuy_IlPTAwxdpanAHwHFltDh98rUvaKxewu2VP89Qhe3eNAzrvNh91cSQc1CN52fBVsctjthjiXsDOl_BsDue9HiBVwGY-QuP-lKXPNLNiterZadLTximTxQFnMiU2Y/s1600/iq-test.png" class="img-responsive" /></a>
</div> 

Bạn chỉ cần sửa thành

 <!--<div class="separator" style="clear: both; text-align: center;">
<a href="/p/test-iq.html"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5IcisxAhqKb6l2Yuy_IlPTAwxdpanAHwHFltDh98rUvaKxewu2VP89Qhe3eNAzrvNh91cSQc1CN52fBVsctjthjiXsDOl_BsDue9HiBVwGY-QuP-lKXPNLNiterZadLTximTxQFnMiU2Y/s1600/iq-test.png" class="img-responsive" /></a>
</div>--> 

b) Nếu không phải là widget HTML/Javascript thì bạn cần

1 Xác định ID của widget cần ẩn.
Bạn vào Mẫu >> Chỉnh sửa HTML và xác định ID của widget đó.

Xem thêm: Cách xác định ID của một Widget trong Blogger

2 Dán đoạn code dưới đây vào trước thẻ </head>

 <!--Hide widget by Iris Tips-->
<style>
#ID-widget {display:none;!important;}
</style> 

Trong đó ID-widget là ID bạn vừa tìm được ở bước 1. Ví dụ muốn ẩn widget thống kê có ID là Stats1 thì đoạn code sẽ như sau

 <!--Hide widget by Iris Tips-->
<style>
#Stats1 {display:none;!important;}
</style> 

2. Ẩn/hiện Widget tại một trang bất kỳ

1 Bạn vào Mẫu >> Chỉnh sửa HTML, nhấn vào Chuyển đến tiện ích và sau đó chọn ID widget bạn muốn ẩn.

2 Click vào dấu ... đoạn code của widget sẽ như sau

 <b:widget id='Stats1' locked='false' title='statistics' type='Stats'>
<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> 

Sau đó bạn cần thêm thẻ điều kiện <b:if> vào bên trong thẻ <b:includable>

Ví dụ muốn widget chỉ hiển thị tại trang chủ bạn sửa code lại như sau

 <b:widget id='Stats1' locked='false' title='statistics' type='Stats'>
<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 != ""'>
<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> 

Các trường dùng thẻ điều kiện <b:if> khác bạn có thể tham khảo tại bài viết sau

Xem thêm: Tổng hợp các trường hợp sử dụng thẻ điều kiện if - else trong Blogger

Nếu có bất kỳ vấn đề khó khăn hay câu hỏi gì, bạn đừng ngần ngại, hãy để lại bình luận ở form bên dưới nhé.
Chúc bạn thành công!

Created by Iris Tips

• Twitter
• Facebook
• Google+
• LinkedIn
• Pinterest

Iris Tips

Có thể bạn quan tâm