Wellcome! Home


Hide/Show Blogger Widgets

Hide/Show Blogger Widgets - DxHdesign
Đối với blog có nhiều chủ đề thì việc sử dụng nhiều Widget (Tiện ích) là điều không tránh khỏi. Do vậy làm thế nào để các Wiget tiện ích đó hiển thị đúng nơi, đúng chỗ là điều mà các Blogger phải tính toán và cân nhắc rất kỹ. Việc bố trí các Widget trong Template một cách hợp lý sẽ làm nổi bật nội dung cần truyền tải, logic và hài hòa với bố cục Blog.


Bước 1: Vào Bố cục → Nhấp vào Chỉnh sửa trên Widget cần xử lý.
- Một cửa sổ Popup bật lên, bạn nhìn vào phía trên góc phải (gần thanh tiêu đề) sẽ thấy dòng có dạng tương tự sau: …null&widgetId=HTML1 (trong trường hợp này là widget HTML1, đối với widget khác sẽ có ID khác)

Bước 2: Khi xác định được ID của widget, bạn vào Chỉnh sửa HTML (chọn Mở rộng Mẫu Tiện ích) để tìm widget đó trong Template (nhấn Ctrl+F rồi gõ vào ID của widget ở trường hợp này là HTML1) Khi đó bạn sẽ thấy đoạn code tương tự như sau:
<b:widget id='HTML1' locked='false' title='' type='HTML'>
<b:includable id='main'>
  <!-- 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:includable>
</b:widget>

Bước 3: Như vậy, ta đã xác định được ID cũng như vị trí và nội dung của Widget. Bây giờ mình sẽ thêm lệnh ẩn hoặc hiện  Widget ở 2 vị trí là:
     »  Vị trí 1: Sau thẻ mở <b:includable id='main'> Phần này bạn thay dổi theo các mã mình cung cấp bên dưới.
     »  Vị trí 2: Thêm lệnh </b:if> vào trước thẻ đóng  như sau </b:includable> phần này dung chung cho tất cả các thủ thật bên dưới.
- Khi đó bạn có đoạn code mới dạng như sau:
<b:widget id='HTML1' locked='false' title='' type='HTML'>
<b:includable id='main'>
 Vị trí 1
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'&gt
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='widget-content'>
    <data:content/&gt
  </div>

  <b:include name='quickedit'/>
 </b:if>
</b:includable>
</b:widget>

=>> Đến đây bạn thay chữ "Vị trí 1" thành các đoạn code tương ứng bên dưới:

1. Chỉ hiển thị Widget ngoài trang chủ
- Thay chữ "Vị trí 1" thành đoạn code sau:
<b:if cond='data:blog.url == data:blog.homepageUrl'>

2. Chỉ hiển thị Widget ở trang Archive
- Thay chữ "Vị trí 1" thành đoạn code sau:
<b:if cond='data:blog.pageType == &quot;archive&quot;'>

3. Chỉ hiển thị Widget ở trang bài viết
- Thay chữ "Vị trí 1" thành đoạn code sau:
<b:if cond='data:blog.pageType == &quot;item&quot;'>

4. Chỉ hiển thị Widget ở trang Static Page
- Thay chữ "Vị trí 1" thành đoạn code sau:
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>

5. Chỉ hiển thị Widget ở những trang với liên kết cụ thể
- Thay chữ "Vị trí 1" thành đoạn code sau:
<b:if cond='data:blog.url == "URL của trang chỉ định"'>
- Trong đó "URL của trang chỉ định" là địa chỉ của trang nhãn hay bài viết. Ví dụ mình muốn HTML1 bên trên chỉ hiển thị trong bài viết này thì mình thay chữ "Vị trí 1" bằng đoạn code sau:
<b:if cond='data:blog.url == "http://dxhbook.blogspot.com/2013/01/an-hien-widget-o-nhung-trang-nhat-dinh.html"'>

6. Chỉ hiển thị Widget ở Trang chủ, trang Label và trang Archive
- Thay chữ "Vị trí 1" thành đoạn code sau:
<b:if cond='data:blog.pageType == &quot;index&quot;'>

<> Ở trên bạn có thể thấy mình cố ý đánh dấu “==” bằng màu đỏ, có nghĩa là bạn hoàn toàn có thể thay dấu “==” bằng dấu “!=” sẽ mang ý nghĩa khác.

Qui ước:
== : “bằng” hoặc tương đương - Tức là chỉ hiện thị khi thỏa mãn điều kiện mà ta đưa ra.
!= : “khác” hoặc không tương đương - Tức là không hiển thị khi thỏa mãn điều kiện ta đưa ra.

Ví dụ: Nếu bạn muốn widget HTML1 hiển thị ở tất cả các trang khác ngoại trừ trang chủ, thì ta thay chữ "Vị trí 1" bằng đoạn code sau:
<b:if cond='data:blog.url != data:blog.homepageUrl'>

Mong rằng thủ thuật nhỏ này sẽ hữu ích cho bạn!
+ Comment +

1 comments:

4/14/13, 8:19 PM

Làm màu đen xấu quá bcas ơi

Reply

Post a Comment

Copyright © 2013 DxHdesign • All Right Reserved