Chỉ hiển thị widget khi xem các bài viết của một nhãn nhất định

Thủ thuật này giúp tạo ra sự khác biệt cho blog của bạn. Theo đó tiện ích được chọn hiển thị sẽ mặc định được ẩn đi, và widget đó chỉ hiện thị khi nào vào xem các bài viết thuộc nhãn đã được bạn chỉ định. Tiện ích này tương tự như thủ thuật: Hiện thị widget ở những trang nhất định trong blogspot

» Bước 1: Xác định ID của Wdget tiện ích cần tùy biến theo thủ thuật này.

1.1- Vào Bố cục (Layout) -> Nhấp vào Chỉnh sửa (Edit) trên Widget cần xử lý

1.2 - 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=HTML17 (trong trường hợp này là widget HTML17, đối với widget khác sẽ có ID khác)

» Bước 2: Cài đặt hiện thị widget khi xem bài viết thuộc một nhãn nhất định.

- Bài viết này mình sẽ hướng dẫn cho các bạn 2 cách thực hiện khác nhau bạn có thể tùy ý thực hiện và chọn lấy một cách.

CÁCH 1: KẾT HỢP CSS VÀ XML

1.1. Đăng nhập Blogger.

1.2. vào mẫu (Template) => Chỉnh sửa HTML (Edit HTML) => Đặt đoạn code sau đây vào trước thẻ </head>:

<style type='text/css'>
/*Hiển thị widget khi xem các bài viết của một label (nhãn) nhất định */
#ID_widget {display:none;}
</style>

- Trong đó: ID_widget // Thay ID widget muốn hiển thị vào đây. (Ở ví dụ trên thì ID_widget là HTML17). Khi đó thay vào sẽ được như sau:

<style type='text/css'>
#HTML17 {display:none;}
</style>

Bước 3: tìm đoạn code tương tự đoạn code sau đây:

<data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>

- Thêm vào sau nó đoạn code sau:

<!-- Hiển thị widget khi xem các bài viết của một nhãn nhất định http://namkna.blogspot.com/-->
<b:if cond='data:blog.pageType == "item"'>
<b:if cond='data:label.name == "Nhãn"'>
<style type='text/css'>
#HTML17 {display:block;}
</style>
</b:if>
</b:if>

Nhãn: Thay nhãn của bài viết muốn hiển thị widget.
ID_widget: Thay ID widget muốn hiển thị vào đây.

Bước 4: Save template. (Lưu mẫu)
Cách khác: theo thuthuatblogger, thì  ở bước 3 bạn tìm đoạn code tương tự như sau:

<span class='post-labels'>
<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
</b:loop>
</b:if>
</span>

Rồi đổi nó thành thế này:

<span class='post-labels'>
<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<script>var getLabel=&#39;<data:label.name/>&#39;;</script>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
</b:loop>
</b:if>
</span>

Kế đến dùng từ khóa HTML17 tìm đến cấu trúc XML của tiện ích này rồi thêm vào thành như sau (phần được đánh dấu màu đỏ là phần thêm vào):

<b:widget id='HTML1' locked='false' title='Tên tiện ích' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script>
//<![CDATA[
// Code to display widgets on posts from a label by www.thuthuatblogger.info
if(getLabel=="Tên nhãn") {
document.getElementById("HTML17").style.display = "block";
}
//]]>
</script>
</b:if>
<!-- 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:includable>
</b:widget>

Thay Tên nhãn thành tên của nhãn mà bạn muốn áp dụng thủ thuật. Lưu Template là hoàn thành.

Mở rộng: nếu bài viết có nhiều nhãn thì có thể thêm điều kiện để tiện ích chỉ hiển thị đối với nhãn cuối cùng hay không. Câu trả lời của mình là chỉ cần sử dụng Bước 1 với code nhãn như sau:

<span class='post-labels'>
<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:if cond='data:label.isLast == &quot;true&quot;'>
<style type='text/css'>
#HTML17 {display:block}
</style>
</b:if>
</b:if>
</b:loop>
</b:if>
</span>

Chúc thành công!