Wednesday, September 7, 2011

Hiển thị widget khi xem bài viết thuộc nhãn nhất định

Chỉ hiển thị widget khi xem bài viết một nhãn nhất định là cách giúp tạo sự khác biệt cho các bài viết thuộc một nhãn nào đó. Theo đó tiện ích được chọn hiển thị sẽ mặc định được ẩn đi, khi nào vào xem các bài viết thuộc nhãn nào đó, nếu lệnh lặp nhãn tìm thấy nhãn đã chỉ định thì tiện ích sẽ được hiển thị.

Bạn có thể xem Demo khi xem các bài viết thuộc nhãn Thông báo tại Thủ thuật Blogger, chú ý tiện ích Cập nhật từ blog khác.

Để thực hiện thủ thuật này, trước tiên bạn cần xác định ID của một tiện ích (widget) mà bạn muốn chỉ hiển thị khi xem các bài viết thuộc nhãn nào đó. Lấy ví dụ ở đây là một tiện ích có ID là HTML1.

Bước 1. Đăng nhập Blogger, vào Design >> Edit HTML, chọn Expand Widget Templates. Đặt đoạn code sau đây vào trước thẻ </head>:

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

Bước tiếp theo, tìm đoạn code tương tự đoạn code sau đây:

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

Bước 2. Kế đến dùng từ khóa HTML1 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.vntai.com
if(getLabel=="Tên nhãn") {
document.getElementById("HTML1").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.

Từ thủ thuật này, chúng ta có thể suy luận ra nhiều vấn đề. Lấy ví dụ theo ý của bạn Linh Dung có hỏi 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'>
#HTML1 {display:block}
</style>
</b:if>
</b:if>
</b:loop>
</b:if>
</span>

No comments:

Post a Comment